How To Install WordPress- The Manual Approach

One-click WordPress installation seems to have become the norm. And why not? I mean, pit a single click installation against a circuitous, technical, laborious, ‘multi-click’ (the horror!) installation and we have a no-brainer, right?

But what if I were to tell you that sites installed using Fantastico/ Fantasico De luxe etc. are soft targets for hackers? And what if I were to tell you that the manual installation isn’t as hard as it’s made out to be. And that it’s just a one-time inconvenience?

Hmmm, the choice isn’t that obvious now, is it? So, if your site’s security trumps convenience, read on and install WordPress the right way – the manual way!

Here’s what we are going to do –

  • Download WordPress at http://wordpress.org/download/. Unzip the file.
  • Rename the ‘wp-config-sample’ file to wp-config
  • Open wp-config in a text editor- (a) Insert unique keys and salts (b) Change the default database table prefix
  • Create a database, database user and password from the cPanel
  • Again go back to wp-config and insert the database details
  • FTP the WordPress files to the webserver using FileZilla
  • Run the Install Script & fill in details of your website
  • Done!

The changes made to the default values in wp-config beef up your WordPress website against hacker attacks.

And here are the steps in detail –

PART 1 – Download The WordPress Zip File

(1) Go to http://wordpress.org/download/ and click on the ‘Download’ button. This will download the wordpress zip file to your computer. Please note that the version might vary.

WordPress Zip Download

 

(2) Navigate to the WordPress zip file on your computer, copy and paste it into its own folder (to keep things nice & neat). Then right click on the zip file and choose “Extract Here”. Doing so will create a a ‘wordpress’ folder. We will be uploading the contents of this folder to your website (or web server) using an FTP client a bit down the line.

WordPress Zip File

(3) Open up the unzipped ‘wordpress’ folder – look for the file named ‘wp-config-sample’ and rename it to ‘wp-config’. Next, we need to open the ‘wp-config’ file with a text editor such as Notepad, Notepad++ (do not use Word!). In wp-config, scroll down till you reach the chunk of code that looks like:

define('AUTH_KEY',         'put your unique phrase here');
define('SECURE_AUTH_KEY',  'put your unique phrase here');
define('LOGGED_IN_KEY',    'put your unique phrase here');
define('NONCE_KEY',        'put your unique phrase here');
define('AUTH_SALT',        'put your unique phrase here');
define('SECURE_AUTH_SALT', 'put your unique phrase here');
define('LOGGED_IN_SALT',   'put your unique phrase here');
define('NONCE_SALT',       'put your unique phrase here');

Pretty, eh? In a moment, it’s going to get prettier. Now here’s the important bit, so listen close: we need to replace the keys and salts in the above code (i.e. the 8 rows that start with “define”) with a bunch of randomly generated secret keys. For that, we will make use of the WordPress.org secret-key service. It’s all very scotland yard, I know!

To do that, simply go to –

https://api.wordpress.org/secret-key/1.1/salt/

and refresh the browser. Then, copy and paste the automatically generated values into wp-config, instead of the code in the snippet above, so that it looks something like –

 

define('AUTH_KEY',         'o_[inOz8Rs<4`(q|)eJi`wKbhk+]`CA%)[.<0;WE`T~OZGClLv!+kXFyjrrCBYy5'); 
define('SECURE_AUTH_KEY',  '+DI>K307]oU3u;|9CRt-wnE2u+OJm*z_C>u^n1<W/E5=5{|EPp(ILU[M5<v!DG0M');
define('LOGGED_IN_KEY',    'z:72BMyzU4FuFM7;kHI^l!s9lCF-&;}%NoENhrwMUWU<v1o[p+vIA1{8K|zA_Nb@');
define('NONCE_KEY',        '~UlpG|;}(s&bx4[^S +hk;x+E-1SmRwh~CM(c@Dpa1:4tmS[L<-)s>:(e&,ho Px');
define('AUTH_SALT',        'RVg>;508j2zDcH?#qke-*aP>MFa.Ly!g:jad=VI_h2i~.Dll5)O,8IX|TlgtGhuj');
define('SECURE_AUTH_SALT', 'KS#,xx+`f&zn$+J=#Y+c)2Z3?@kPBvL<!)uU,kUB:(+OkDa&U[zW+Sj`?sXS>&ei');
define('LOGGED_IN_SALT',   'eBise:>Ca u6>@ceppK4+Ds<z*b3Vx+j{pW`No/w|lH:J>NW|mcjg1!0gFFltu0C');
define('NONCE_SALT',       'W%>Ezw[GF H?H8;/SR^SUqTg&0*/-B#320R/HZ *q!i./,`a|9EML,ZyTnz>]{V|');

 

IMPORTANT! The automatically/randomly generated values that you get will be different from those in the code above! The code snippet is merely an example.

TIP: Make sure you paste ALL the 8 rows starting with define.

(4) Now, scroll down a little more in wp-config (that’s open in a text editor) till you find –

$table_prefix  = 'wp_';

“wp_” is the default database table prefix. Simply rename it to anything other than “wp_”. The prefix can be a mix of numbers, alphabets and underscore. While not necessary, try to end the name with an underscore. Here’s an example-

$table_prefix  = 'cklsj_wp_';

(5) Please save the changes to wp-config, we will be revisiting it shortly -so you can leave it open.

Part 2 – Create WordPress Database & Database User

(1) Log into your hosting account’s cPanel and scroll down to ‘Databases’, then click on ‘MySQl Database Wizard’ –

HostGator MySQL Database

(2) Create A Database: In the next screen, give your database a name and then click on the ‘Next Step’ button-

HostGator Database

(3) Add a Database User: Give a username/password for the user and click on ‘Create User’. Please do keep a note of the database name we created in the previous step and the username/password created in this step.

MySQL Database Wizard cPanel

 

(4) In the next screen, check the ‘ALL PRIVILEGES’ box and go to the next step.

Database Privileges

 

(5) The next should will inform you that you have created a database and added a user to it –

 

cPanel Database User

 

(6) Again, in the ‘wordpress’ folder on your system, open up the wp-config file in a text editor and add in the database related information i.e. the database name, username and password. Save.

define('DB_NAME', 'database_name_here');
 
/** MySQL database username */
define('DB_USER', 'username_here');
 
/** MySQL database password */
define('DB_PASSWORD', 'password_here');

WP Config Database

Part 3 – Installing FTP

(1) FTP stands for File Transfer Protocol and an FTP client such as FileZilla allows you to access the files and folders on your website. Using FileZilla, you can upload files from your local machine to your site, download files from your website on to your computer, delete web files etc. I’ll be using FileZilla for this tutorial although you’re free to use any FTP client. You can download FileZilla for FREE here –

https://filezilla-project.org/

(2) Make sure you download FileZilla Client and then choose the appropriate download link depending on your operating system – Windows/Mac etc. Once the download and installation are done, move on to the next step.FileZilla Client Download

 

(3) Fire up FileZilla and use the information on the following page to log into it –

http://support.hostgator.com/articles/specialized-help/ftp/how-to-configure-filezilla

 

FileZilla Login

 

Once you have successfully logged into FileZilla, it’ll look like the image below –

FileZilla Client Interface

The interface comprises 4 quadrants, as marked in the image. Quadrant 1 will display the folders on your computer. When you single-click a folder in quad 1, its contents will appear in quad 2. Similarly quadrant 3, shows the folders in the web hosting account. And when you select a folder in #3, you’ll be able to see its contents in #4.

Tip: Click on the “+” to open a folder further.

To Transfer Files From Your Computer To Your Website:

-Locate the right folder in your computer, in pane #1

-Then select the destination folder in #3

– Select the files in #2 that you need to transfer. To select multiple files, use ‘ctrl’.

– Right-click on the selected files in #2 and choose ‘Upload’. This should transfer the files to #4.

Part 4 – Upload WordPress Files To Your Website

(1) In this step, we will upload the WordPress files we downloaded in step 1 to the website, using FileZilla. So, log into FileZilla. What you need to do is to navigate to the unzipped WordPress folder in quadrant 1 and click on it. As soon as you do this, quadrant 2 should get populated with the contents of the WordPress folder. Now, in quadrant 3 – locate and click on the ‘public_html’ folder. When you do this quadrant 4 will display the files and folders of the ‘public_html’ folder. See how the client works?

(2) Select all the contents of the ‘wordpress’ folder in quadrant 2 (you could do a ctrl+A to select all), right click and choose “Upload”. This will transfer all the wordpress files into the public_html folder. The transfer process will take a couple of minutes.You can check the status bar at the lower left corner.

Part 5 – Run The Install Script

(1)When the transfer is complete,  go to http://yourdomain.com/wp-admin/install.php (please replace ‘yoursdomain’ with your actual domain) and you should see a page with the “Information Needed” form –

WordPress Username Login Information

  •  Site Title – You can give your site’s name here (for now). The site title can be edited later.
  • Username – For security reasons, give a username other than ‘admin’. This will be your WordPress username, that you’ll use to log into the WordPress account.
  • Password – This is your WordPress login password. Please choose a strong, complex password
  • Email – Enter the email where you would like to receive website related information
  • Privacy – You can uncheck it for now.

Using a username other than ‘admin’ and a strong password are a must to protect your website from brute force attacks.

Click ‘Install WordPress’.

(2) That’s it! Once you get the success message, your WordPress website is ready.

WordPress Dashboard Login

(3) Go to www.yourdomain.com and see for yourself! Your website should show up with the “Twenty Thirteen” theme.

(4) To log into the administration area of your WordPress website, go to www.yourdomain.com/wp-admin and key in the WordPress username/password.

Image Credit: teamstickergiant

 

Add a ‘Tooltip’ And Make Your WordPress Images Talk!

Take a look at the two images below.

At first glance, they might seem exactly the same. Well, look again!

Only this time, take your mouse over each of the two images.

WordPress Image Without Tool Tip

 

wordpress image with tooltip

When you mouseover the second image, a short description pops up. And that’s the tooltip! You can easily add a tooltip to an image in WordPress.

Tooltip

And here’s how –

Insert an image into a WordPress post or a page the usual way (via the “Add Media” button). Once the image is inserted hover over the image and click on “Edit” –

WordPress Image Edit

In the pop up, enter into the ‘Title’ field the text for Tooltip and click ‘Update’.

Wordpress Image Add Tooltip

 

And that’s all it takes! Refresh your website and mouse over the image to see the “Tooltip”.

Image Credit: Charles Haynes

Image Credit: Heisenberg Media

How To Add Captcha To Contact Form 7

Adding captcha to Contact Form 7 will provide an additional level of security to keep those spam messages at bay –

 

Contact Form 7 Captcha

 

In case you are not familiar with  how captcha works – the visitor wanting to contact you will have to enter the automatically generated alpha-numeric text as-is into the field, before hitting the ‘Send’ button. Spam bots aren’t smart enough to do that and that’s what keeps them away from bombarding your inbox! A simple, no-nonsense and effective solution.

Here’s a live example of captcha on Contact Form 7 –

http://utterlyweb.com/contact-me/

Install The Really Simple Captcha Plugin For Contact Form 7

We will add captcha to the contact form via the the “Really Simple Captcha” plugin. The plugin developer is Takayuki Miyoshi, the same.From the WordPress Dashboard install the “Really Simple Captcha” Plugin and activate it. Click on the ‘Contact’ tab in the WordPress dashboard and then on the specific contact form that you would like to add captcha to.  The click on ‘Generate Tag’ and select ‘CAPTCHA” from the drop down  list-

Generate Tag Captcha

In the ‘CAPTCHA” box that shows up, make note of the two lines of code at the bottom –

Contact Form 7 Captcha Code

Take this piece of code and add it one at a time in the ‘Form’ panel, right above the code for ‘Send’ –

Copy Captcha Code

 

 

Save the form and refresh the contact page on your website – the contact form now appear with the captcha.

Image Credit

How To Install and Customize Contact Form 7 For WordPress

If you have a website, chances are that you have a contact form on it. And if you have a contact form on it, chances are that you’re using ‘Contact Form 7’. A neat little plugin, ‘Contact Form 7’ adds just that – a form through which your website visitors can easily get in touch with you. It’s FREE, simple to set up, easy to use and reduces spam. Here is a live example of Contact Form 7 on my website –

http://utterlyweb.com/contact-me/

When the user submits the contact form, you will receive it as an email.

If you don’t have Contact Form 7, well, now would be a good time to get it. But whatever you do, don’t publicize your email id on your website. That’s like screaming for spammers!

Step 1 – Install Contact Form 7 for WordPress

(1) From the WordPress Dashboard, click on ‘Plugins’, ‘Add New’ –

Install contact form 7 plugin from WordPress Dashboard

(2) On the next page, search for ‘Contact Form 7’ by name –

Search for Contact Form 7 in WordPress

(3) On the search results page,  click on “Install Now” to install ‘Contact Form 7’. Make sure that the author plugin is ‘Takayuki Miyoshi’. Once installation is complete, activate the plugin.

 

Tatayuki Miyoshi is the plugin author

(4) When the plugin is active, a ‘Contact’ tab will pop up in the WordPress Dashboard. You’ll find it beneath the ‘Comments’ tab. Click on the ‘Contact’ tab and you will be taken to the ‘Contact Form 7’ screen. Select ‘Add New’.

 

Contact Form 7 tab in the WordPress Dashboard

(5) The next screen will look like –

Change email in the contact form

Scroll down to the ‘Mail’ panel and under ‘To’ give the email id where you would like to receive messages sent through the contact form.  If you would like to go with the default contact form as on  http://utterlyweb.com/contact-me/ then hop, skip and jump straight to Step 3. But if you would like to customize the form, please take a look at Step 2 as well.

Step 2- Customize Contact Form 7

The cool thing about Contact Form 7 (other than it being a really cool as-is contact form) is that you can customize it. That is to say – you can add fields, remove fields, mix up up the field types, make a field ‘required’ or not etc. To illustrate, I am going to add 2 new fields to the form – a ‘How Did You Find Out About Us’ mandatory field and an optional ‘Your Website’ field.

Shorter Way

1. Click on the ‘Generate Tag’ tab in the Form panel and select a field type e.g. the Text field.

2. If it’s a required field, check mark the box

3. Give the field a name e.g. “the-source”

4. Copy the code under “Copy this code and paste it into the form left” and paste it into the form.

5. Then, copy the code under “And, put this code into the Mail fields below” and paste it into the ‘Mail’ panel.

6. Save the form.

7. Scroll down to  ‘Step 3- Get The Short Code’

Contact Form 7 Customization

Longer Way

To do that, I will simply add the code down below to the ‘Form’ panel –

How did you find out about us (required)
[text* the-source]

Your Website
[text your-site]

Now the form panel looks like –

Customize Contact Form 7

In the image above, the ‘How did you find out about us (required)’ text marked in blue is where you will enter the field name. You can put in whatever text you deem suitable. The second line is [text* the-source] : the first component here is “text*” which means that a single text field will be generated in Contact From. The “*” makes it a mandatory field. Just get rid of the ‘*’ and use only ‘text’ in case the field is optional, as we have done for ‘Your Website’.

If you would like the field to be much bigger, as in the case of ‘Your Message’ instead of text use textarea (as in the case of ‘Your Message’). With me so far? Good!

Now onto the last bit of customization – we also need to configure Contact Form 7 so that the message shows up correctly in the email that we receive when someone sends a message. We can do that by making use of the second component of  “[text* the-source]” and define it how we want to in the “Message body” –

Configure contact form 7 message body

Note: In ‘[text* the-source]’ – you can call the second component i.e. ‘the-source’ anything you like, such as ‘customer-source’ etc. Whatever you use in the Form panel should match with what you provide in the ‘Message body’.

The corresponding contact form will be as below. Notice the two additional fields that have been added –

New Contact Form

 

Step 3- Get The Short Code

When you have customized and configured the form, click on ‘Save’ and copy the code that you will find under ‘ Copy this code and paste it into your post, page or text widget content.’ Paste the code into a WordPress page. Before you publishing, preview the page and check if the form is working correctly. If all goes well, publish the page to your website.

Contact Form 7 Short Code

In the next post, we will add captcha to Contact Form 7 to make it even more secure.

Important!

Please note that we can create and add multiple contact forms to a website. Also, once a form has been created and added to the website , it is possible to make changes to the form. From the dashboard go to ‘Contact’ and then click on the form you need to modify – just make the changes, click ‘Save’ and refresh your website to check if the changes have been implemented.

Image Credit

How To Add A PDF File To A WordPress Page Or Post

I have been using the term “PDF” for so long that I almost forgot that it’s not a word -it’s an abbreviation! Did that happen with you as well? Anyway, PDF is short for “Portable Document Format” and is a widely used format for documents. WordPress makes it super-fast and super-easy to add a link to PDF file to a page or a post on your website. To download the PDF, one will just need to click on the link.

Here are the steps –

Step 1- From the WordPress dashboard click on ‘Pages’ (or ‘Posts’). To add the PDF file to an existing page, click on ‘All Pages’ and select the exact page OR If you would like to add the PDF to a new page select “Add New” instead.

Step 1 for adding pdf is to click on Pages in WordPress dashboard

 

Step 2 – In the WordPress editor click on the ‘Add Media’ button.

click on wordpress add media button to upload pdf

Step 3 – On clicking the ‘Add Media’ button, the ‘Insert Media’ screen pops up. Click on ‘Upload Media’ , ‘Select Files’ and navigate to the PDF file on your computer’s hard drive. Double click on the PDF file on your computer to upload it to WordPress.

upload-pdf-to-wordpress

Step 4- Fill out the form on the right hand side. What you choose as ‘Title’ will appear as the download link text in the WordPress page. Make sure that you select ‘Media Files’ from the ‘Link To’ drop-down under ‘Attachment Details’. Click on ‘Insert Page’.

Insert PDF into WordPress page or post

Step 5- As mentioned in the previous step, the ‘Title’ makes up the download link text. Add any other text on the page if you like. Now just save the WordPress page and preview it to check if the download link is working correctly. Once done, publish the page.

PDF is added to the WordPress page or post