In this lesson I have shown the basic methods of adding images and media that you are most likely to use in a regular website. As ever, I encourage you to explore the options further for yourself if you want to be a bit more adventurous.
I added an image to my post but how can I move it to a different position?
In the ‘Edit Post’ page, click on the image that you want to move and drag it to where you want it. If that doesn’t work, click on the image and then click on the small ‘Edit Image’ icon that appears in the far top left of the picture. This displays a pop-up which allows you to edit the alignment, link, title, caption etc. Make what changes you want and then click the ‘Update’ button.
Or, if you want to start over, click on the image, hit the delete key on your keyboard, insert the cursor where you want the image to appear in your text and insert the image over again.
Then click ‘Update’ to update the post or page.
How can I get one of those moving slideshows on my website?
There are a number of very good plugins that will display a slideshow of images and it is worth experimenting with several to find the one that suits you. Some slideshow plugins will display the gallery (see above) associated with a post or page while others will require you to upload your images separately.
One slideshow plugin that I currently like is called ‘Portfolio Slideshow’ because it is relatively easy to set up and there is also a low-cost ‘pro’ version of it available. See Lesson 15 for how to find and install plugins.
Add A Video To Your Website
Videos are now a popular feature of many websites and WordPress makes it quite easy to include them in posts or pages.
For reasons which I explain in the FAQ below, I do not recommend that you upload videos to your Media Library. Instead, I suggest that you upload the video to YouTube (or one of the other white-listed video-sharing websites) and link to it from your website.
WordPress now provides a very easy way to display a video on your website from third-party video sites. Here’s how.
First of all, find the YouTube (or wherever) video that you want to use (yours or someone else’s) and click on it:
In your browser’s menu bar you will see the URL of your chosen video. It will look something like this:
Copy this URL to your clipboard.
Then go to the post or page where you want to display the video and, on a line of its own, paste the URL of the video just where you want the video to appear.
Don’t make this into a hyperlink: just leave it as a line in the text.
WordPress knows that this is an approved video site and will translate the URL into an embedded video. Magic, or what?
When you view the page it will look something like Figure 10.2:
The frame of the video is shown in the content of the post/page and when the visitor clicks on the ‘Play’ button the sound and picture plays from YouTube.
How can I add a video that I recorded myself?
It is possible to embed your own video files into a WordPress website but you do need to be aware that videos can be very large files and there is a file size limit of 8 megabytes that you can upload via WordPress into your Media Library. This restriction severely limits your options for displaying self-hosted videos.
And, because video files are usually very large and eat up bandwidth, if you have a basic hosting plan you may find that your hosting provider will want to charge you extra if you want to host your own videos on your own website.
The easiest way to show videos on your site is to upload the file to YouTube or Flickr (or any of the many other free video hosting sites) and use the code that they provide (as example shown above) to embed the file into your post or page as shown above. But if you really do need commercial video hosting there is always Amazon Web Services (aws.amazon.com) who, for a fee, will provide a powerful video serving facility that is used by many of top-name webmasters.
If you don’t want to do it this way and your file size is less than 8mb then I suggest you search for plugins that will do the job (see Lesson 15). I won’t recommend any particular plugin because there are new ones coming out all the time and they all differ in what they can do and how. But spend some time experimenting with plugins until you find what you want.
Be aware that you may need to use HTML to do this job and so you should also study Lesson 19 where I show you how to do this.
The Power Of Text Widgets
We looked at the basics of Widgets in Lesson 8 but there are a number of other things you can do with widgets that will provide much more functionality.
The best way to see what widgets in general can do is to experiment with the options available (from the dashboard, click ‘Appearance’, ‘Widgets’…) and view the results. As before, all you usually have to do is drag the widget into the appropriate area on the sidebar, configure the options and save it. If you don’t like it, you can delete it.
But there is one widget that will provide almost endless variations and possibilities and that is the Text Widget.
This facility can, for example, enable you to display graphics and ads in your sidebar and here I’ll show you how.
Add An Image Using A Text Widget
There isn’t, as yet, a simple WordPress widget that lets you place a picture in the sidebar but it can be done easily enough with a bit of HTML. This example will include an easy piece of HTML code that you can copy and edit into a text widget that will place a graphic in your own site.
The first thing you need to do is upload the image file to your Media Library (see Lesson 9) and copy the File URL of the image file to your clipboard.
The easiest way to construct the HTML for this to type it into a text editor such as
NotePad. So type this piece of text (exactly!) into NotePad:
<img src=“ “ />
and then place your cursor between the two quotation marks and paste the File URL you just copied to the clipboard into that space. This is what this looks like for my chicken keeping site:
Now, go to ‘Appearance’, ‘Widgets’ and drag a text widget to the sidebar where you want to display that file. Then copy and paste the snippet of NotePad text into the text widget, ‘Save’ and ‘Close’.
View your site to see the results. Figure 11.1 shows what my site now looks like, with a little graphic image in the sidebar:
Use A Text Widget To Display A Banner Ad
One of things that webmasters like to do is to use space on their website to advertise products, either their own or someone else’s. They want to place a small graphic (a ‘banner’) in the sidebar of their website which is clickable, and which will send the visitor through to a sales or order page.
If you are advertising a third-party product, the merchant or agent will often provide the complete code to display the ad. All you have to do is to copy and paste it into a Text widget, as in the previous example. Then click ‘Save’ and ‘Close’ and the banner will display where you placed it.
But what if the product or service you are advertising is your own, or the advertiser wants you to host their graphic on your website?
Advertisers sometimes do this because it saves them bandwidth. What you need to do in this case is to download the banner graphic from their website and upload it to your site’s Media Library (see Lesson 9).
The method of displaying the banner graphic is the same as the previous example but the difference is that you want the image to be ‘clickable’, that is, the code must include a link.
I will illustrate this by actually making the image on my website a clickable link. I’ll make the target of the link a sales page of a product that my visitor could buy.
The advertisers have given me the URL of the link I need to use to direct the visitor to their sales page.
The outline HTML code to display a clickable image looks like this:
<a href=“ “ ><img src=“ “ /></a>
In between the first set of quotation marks you need to paste the URL of the webpage where you want to send your visitors when they click on the image. Between the second set of quotation marks paste the File URL of the image in your Media Library.
So, the HTML for this on my chicken keeping site is:
<a href=“https://roton360hub.info/” ><img src=“https://roton360hub.info/wp-content/uploads/2020/07/image-46.png” /> </a>
This is illustrated in Figure 11.2:
I leave you to play around and experiment with text widgets on your website. All you have to do (in most cases) is to drag and drop the widget into your sidebar, ‘Save’ and ‘Close’.
How do I show Google Adsense ads in my sidebar?
AdSense ads are the little the chunks of code links you see on many websites which advertise goods and services available from third parties. This is a program run by Google where people pay them to display ads and Google pays web publishers (you!) to display them.
You have to sign up with Google as an AdSense publisher and then you are allowed to display AdSense ads on your site and (hopefully) get paid for doing so.
You have to have a completed website which is getting some traffic before Google will allow you to sign up to AdSense. But once accepted you can display ads on any site registered to you.
Custom Menus And Why You Should Use Them
Custom Menus are a relatively new feature of WordPress but they add a lot of flexibility and power to the design of a WordPress website.
What Is A Custom Menu?
If you look at most websites you will see that they have somewhere a row of tabs which consist of links to pages or areas within the site. This row of tabs is called a ‘menu’.
As shown in Figure 12.1, menus are often in a prominent position at the top of the page and their labels provide clues as to where you will be taken if you click on them.
Before Custom Menus were introduced, WordPress would automatically create a menu from all of the pages in your website and, every time you added a page, another tab would be added to the menu. The menu would be displayed wherever the theme placed it, usually somewhere across the top of the page.
The problem was that, if you had a lot of pages (or pages with long titles), your menu would become very crowded and could even confuse your visitors.
By default, this is how WordPress will still behave. If you have only a few pages in your website then maybe this is sufficient and you may not need to have Custom Menus.
But if you want to choose what goes in your menu and/or decide whether to have more than one menu, then you should make use of custom menus.
How To Create A Primary Menu
A ‘Primary Menu’ is one that your theme has already configured into its design. The Twenty Twelve theme has built the primary menu into the horizontal menu bar at the top of the page, as shown in Figure 12.2. Other themes may designate the primary menu as links or buttons down the right or left sidebar, or elsewhere on the site.
To construct your primary menu, from the dashboard, click on ‘Appearance’, ‘Menus’. In the box labeled ‘Menu Name’ type a name for the menu (it doesn’t matter what the name is) and click ‘Create Menu’. I’ve created a menu called ‘blank’ in Figure 12.3:
You can see that there are a number of options here that make this a very powerful feature:
- ‘Custom Links’ are links to anywhere you like: a page, post or even a picture inside your site, or a link to another website. Type the full URL of the location you want to link to, enter the ‘Label’, which is the text that will appear on the menu tab and click ‘Add to Menu’. You can add as many of these as you like to the menu.
- ‘Pages’ enables you to pick and choose from the pages you have so far published. The beauty of this option is that you can put some pages in one menu and some in another and you can also order them however you want. Check the pages that you want to include on this menu and click ‘Add to Menu’.
- ‘Categories’ refers to the categories recorded on Posts. If your website consists mostly of posts you can have a menu that enables your user to browse selected categories from your menu.
As you can see, you have to check the items that you want to include on the menu and click ‘Add to Menu’. You can mix and match the different types of menu items in one menu if you like.
If you want, you can also change the ‘Navigation Label’ to a different title than the one that would appear as default. Expand the menu item by clicking on the down arrow to see the box where you can do this.
The items within the menu can be dragged and dropped into the order you want them to appear, and another neat option is that, if you have a lot of items in the menu, you can arrange them into a hierarchy by simply dragging pages slightly to the right and they will nest beneath the ones above.
When the menu items are assembled how you want, just click ‘Save Menu’ and it’s done.
Now you must tell WordPress that you want this menu to appear as your site’s ‘Primary Navigation’ which, in the case of the Twenty Twelve theme, is horizontally across the top of the page. Under ‘Theme Locations’, select the menu that you just created from the drop-down list and click on ‘Save’.
How To Create A Secondary Custom Menu
In addition to the Primary Menu, you can create a secondary menu (and additional menus) that you can display in the sidebar or other areas of your site. When you have a lot of pages, or categories, or other destinations where you want to send your visitors, this can be a useful way of dividing the navigation of your site into more meaningful sections.
To create another Custom Menu, from the dashboard, click ‘Appearance’, ‘Menu’ and click the tab marked with a + at the top of the screen. (See Figure 12.3)
Then enter another menu name, as before, and click ‘Create Menu’. You can then populate that menu with the pages, Custom Links or categories that you want and click ‘Save Menu’.
Position Your Custom Menus Using Widgets
When you have created a secondary custom menu you can position it where you want it by using the ‘Custom Menu’ widget.
To do this, from the dashboard, click ‘Appearance’, ‘Widgets’ and drag a Custom Menu widget into the sidebar or other widget area provided by your theme, as shown in Figure 12.4:
I hope I have demonstrated some of the ways you can use Custom Menus, but you can experiment for yourself and discover how you can use this feature to make your website look and behave the way you want.
Set The Home Page Of Your WordPress Website
One of the differences between building a WordPress website and creating one using traditional HTML-type tools is that WordPress lets you choose which page you want as your front (home) page. This is the first page that visitors will see when they land on your domain.
Traditional webmasters sometimes have difficulty getting their head around this: if you are one of them, just forget everything you ever knew about index.html…
By default, WordPress will choose to display your latest posts. This is fine if you have a ‘journal’ or ‘latest news’ or ‘blog’ type of website. If you leave it as the default or if you choose ‘your latest post’, your front page will be updated every time you add another post. This was how it worked when WordPress was (and still is) used for a traditional blog.
But if you want a static page as your front page you have to say which page you want.
Set An Existing Page As Your Home Page
To set your front page, from the dashboard, click ‘Settings’, ‘Reading’.
To set an existing (static) page as your front page, click the appropriate radio button as shown in Figure 13.1, select the required page from the drop-down box and click ‘Save Changes’. This page will then become your home page. Note that if you haven’t created this page yet, it won’t appear in the drop-down!
2012 Front Page Template
The 2012 WordPress theme provides an optional special template for you to use for your front page. This does not have a sidebar but instead has two separate footer widget areas beneath the main article on the page.
What this means is that you could, for example, construct a ‘welcome’-type page and then show a sub-set of navigation links in the two lower widget areas. You can then lead your visitor into the areas of the site that you would like them to visit first.
I have done this on the front page of my chicken keeping site as shown in Figure 13.2:
Group Your Posts On To Their Own Page
There’s also another optional, handy feature that I like to make use of. If you set a static page as your front page then you can have all your posts grouped together on another ‘container’ page which can then appear as a tab on the menu bar. This means that you don’t then need to have a widget in the sidebar to show the latest posts.
To do this, just create a blank page with the heading you want as its title and publish it, either as a blank page or maybe a small amount of text as an introduction.
You could, for example, create a blank page with the title ‘News’ or ‘Blog’ or something equivalent. Then, on ‘Settings’, ‘Reading’, select that page from the ‘Posts page’ drop-down box. This is illustrated in Figure 13.1.
Then, whenever you add a post, it will automatically be added to that page.
Set The Number Of Posts To Scroll
Whenever you add another post to your website, by default, the latest post will occupy the space at the top of the posts page and all older posts will scroll down beneath it. Because of this it is a good idea to decide just how many posts you want to see scrolling down the page. If you want your website to look more like a conventional website maybe one will be enough. WordPress initially sets this number to ten which is probably too many for most purposes.
So, to set the number of posts per page view, from the dashboard, click on ‘Settings, ‘Reading’ and set the indicator labeled ‘Blog pages show at most’ to the number of posts you want to see on the page.
Again, this is illustrated in Figure 13.1 where you can see that I have set my ‘News’ page to display three posts.
This setting will be applied whether or not you have a static front page.
When you’re done, click on ‘Save Changes’.
Set A Sticky Post
Another useful feature of posts is that you can designate one of your posts to be ‘sticky’, which means that it will always appear above other posts of a later date. This can be very handy if there is some permanent information that you always want to display (‘How To Order’…) on the top of your front page but to have later posts scrolling beneath it.
To make a post sticky, on the Post page, click on ‘Edit’ next to ‘Visibility’ and check ‘stick this post to the front page’. Then click ‘OK’, as shown in Figure 13.3.
When you publish or update the post, it will always appear on the front page of your posts.
Choose And Change Your WordPress Theme
WordPress themes are the design templates that determine the appearance of the website. There are hundreds (thousands?) of free themes to choose from and you can (usually) switch the theme quite easily if you change your mind about what you want.
You should be aware that the Twenty Twelve theme that we have used to illustrate this tutorial only offers a sub-set of the possible options that WordPress provides to present your online content.
For example, some themes offer more than one header widget, others provide sliders and galleries, and some have built-in functions like opt-in boxes while others can format your content in a magazine-like view.
So, if you think that your requirements are too complex for WordPress to render, I urge you to think again and explore some of the more feature-rich themes that some very clever designers have provided for you.
WordPress offers many free themes on its website that you can install with a few clicks of the mouse. Others are offered by third parties, some for free and some for sale.
You can commission a professional to create a unique theme just for you or you can even create your own themes by the use of drag-and-drop software such as Artisteer.
See the Conclusion of this tutorial to find out where to read more about these options.
But to illustrate the possibilities, we are going to go to the WordPress site and pick a free theme.
Install A Free WordPress Theme
From the dashboard, click on ‘Appearance’, ‘Themes’ and then the ‘Install Themes’ tab.
You’ll see a menu where you can search for available themes:
If you know what shape and color of theme you want, then click on the appropriate check boxes and then click on ‘Find Themes’ to see what comes up.
Alternatively, you can browse the latest offers. You could click on the ‘Featured’ tab because these themes are usually very striking and will often suggest ideas for how you might build your site.
Three free themes that I currently use are ‘Responsive’ (see Figure 14.1), ‘Graphene’ and ‘Pageline’. These all get very good reviews from their users and they have clean and original designs that I happen to like. If you know the name of the theme you want you can search for it in the box at the top of the above screen.
When you find a theme that you like the look of you can click on ‘Preview’ to see how the theme will look on the screen. This will pop up in a new window which you can close when you’ve seen enough. It’s also a good idea to click on the ‘Details’ links to see how many stars the theme has been awarded by other users – the more the better.
When you’ve found a theme that you like, click on ‘Install’ and then on ‘Install Now’ in the pop-up window. This will automatically upload the theme to your website. You can now preview the theme again as it will look on your own website and, if you like it, click ‘Activate’ and you’re done – you’ve changed the theme.
You can change the theme of your WordPress website as often as you like, but it is a good idea to do your experimenting early on in the development of your site. What you ideally want is to find a theme that fits the style and personality that you want to portray and then settle down when you are comfortable with it. Your visitors will soon come to recognize the look and feel of the website with your particular style.
If you change the theme more than once you will probably end up with several non-active theme files in the background. You can, if you wish, go back and re-activate a theme that you’ve previously installed. But, when you know that you don’t want to make use of a previously installed theme, it’s a good idea to simply delete it because it will just be taking up space on your web hosting server.
After installing a new theme, have a look at the options it gives you for changing the header, widgets, colors, or whatever. The theme’s author may provide a link to their website where you can find out more about this theme or others that they may have on offer.
Install A Third-Party Theme From A Zip File
If you have a theme that you have obtained from a third party, you will likely have the theme files in a ZIP file sitting somewhere on your computer, in which case do not unzip it.
To install a zipped theme from your computer, from the dashboard, click on ‘Appearance’, ‘Themes’, ‘Install Themes’ and then click on the ‘Upload’ tab, as in Figure 14.3:
A pop-up box will prompt you to browse your computer to locate the ZIP file and when you have done so, click on ‘Install Now’. The theme should then upload and install automatically from the ZIP file. Activate it, as above, and you’re done.
OK, I’ve made it look pretty simple to choose and change your website’s theme, but there are one or two important provisos that you need to be aware of.
If you choose a theme and then go on to do a lot of work on your website (particularly with widgets and menus) and then decide to change your theme, the new theme may not automatically pick up all your content and display it how you want.
It may be just fine, but be aware that this is a possibility and you may have to reinstall your widgets and/or menus. This is not usually a big deal but it may just cause a bit of unexpected work.
WordPress issues new software releases from time to time and sometimes these are major upgrades which require a theme to be upgraded accordingly. Most reputable theme designers keep their themes up to date but be aware that you may be forced to change your theme if your designer’s theme gets out of sync with the latest WordPress release.
How can I design my own theme?
To design your own theme you need to be fairly competent at CSS, HTML and PHP, not to mention graphics technology and WordPress. So, to be realistic, it isn’t easy for a beginner to design their own WordPress themes.
However, one easy way for a non-geek to create a unique WordPress theme is via software that lets users design WordPress themes using a very flexible template which they can then tweak and personalize themselves. I use Artisteer to do this and I thoroughly recommend it. It takes a bit of practice to explore all its possibilities but I use it a lot to create my own, unique themes. See the Conclusion to find out more details of Artisteer.
What’s a ‘child theme’?
Child themes are rather beyond the scope of this tutorial, but I will briefly explain what they are and how they can become useful.
Essentially, a child theme enables you to create a theme that inherits most of its characteristics from another theme (the ‘parent’ theme) but which contains a few specific changes that make it different from its parent. For example, if you have a parent theme that has a sidebar on the right but you want a sidebar on the left, you can create a child theme that specifies sidebars on the left.
You do this by creating a small style sheet file (style.css) that contains the changes that you want to override the corresponding lines in the equivalent parent theme’s style sheet.
The principle is that the original parent theme remains unchanged and can be subject to updates and enhancements but the child theme’s style sheet will always be linked into the parent and the changes will still apply at run-time.
This is a relatively new attribute of WordPress and their development team has stated that child themes will become more important as future WordPress updates occur. At the very least, it will probably mean that tools will become available for non-tech users to tweak and personalize their themes without having to risk compromising the functionality of the underlying theme.
The Power Of Plugins
‘Plugins’ is a term for a collection of additional (often free) pieces of software that provide extra functionality for WordPress websites. These are the ‘optional extras’ that you may, or may not, need to make your website behave as you want.
They are called ‘plugins’ because they do exactly that: if you install a stand-alone plugin, WordPress detects that it’s there and makes the connection with it automatically. You may have to configure a few parameters to tailor it to your requirements, but that’s all you have to do.
There are thousands of WordPress plugins available but, in this lesson, we’re just going to install a few of the ones that I consider essential. They are all free. I will explain what they do and how to use them as we go along.
First, I’ll show you how to install plugins in general. Then, I’ll list my recommended plugins and show you how to configure them.
How To Install Plugins
From the dashboard, click ‘Plugins’. You should see the list of currently installed plugins as in Figure 15.1:
To install any plugin, from the dashboard, click ‘Plugins’ then ‘Add New’ at the top of the screen. You can access the plugins you need several ways from here, but the quickest way is to click on the ‘Popular’ tab and see what comes up, as in Figure 15.2.
You will probably see some of the recommended plugins straight away.
To install a plugin, all you have to do is click on ‘Install Now’ on that plugin’s listing and confirm that you really do want to install the plugin. Then WordPress takes over, installs the plugin on your website automatically and then all you have to do is activate it.
You should repeat this step for all the recommended plugins that you can find on the first page of ‘Popular’.
If you can’t find the plugin on the ‘Popular’ page, then the other way of locating a plugin is to search for it. Instead of clicking on ‘Popular’, use the ‘Search’ box on the ‘Install Plugins’ page. Type the exact title of the plugin into the Search box and click ‘Search Plugins’. You may be presented with more than one choice so be sure to pick the one that has the exact title, and then install the plugin as above.
So, the plugins I recommend are:
Google XML Sitemaps
This popular plugin provides a Google-compliant sitemap for your website.
What’s a sitemap? Well, it is a file called sitemap.xml that sits in the background on your website and which contains a complete list of all your website’s pages and posts and documents the connections between them.
The sitemap file is there for the benefit of the search engines, to help them find their way around your site and index it accordingly. Sitemaps are not really for human visitors!
Most professional websites have a sitemap and this plugin is considered to be essential for effective SEO.
The plugin updates the sitemap automatically every time you add, delete or edit something so, once installed, you don’t have to do a thing.
All In One SEO Pack
This, in my opinion, is another essential SEO plugin. It provides all the features you need to optimize your site’s pages to rank in the search engines for your chosen keywords.
When you install the ‘All In One SEO Pack’ plugin and activate it you will see a red warning prompt at the top of the screen asking you to configure the plugin. See below for instructions on how to do this.
Contact Form 7
Having somewhere on your site where your visitors can contact you is considered good practice and makes you look serious and trustworthy in your customers’, and the search engines’, eyes.
Simply sticking up an email address on your website is not a good idea because it will quickly be harvested by the spam phishers and your email address will rapidly become unusable.
This plugin provides a secure way for people to contact you privately and will provide the credibility you need to present a professional face to the world. Later in this lesson I will show you how to create a ‘Contact’ page.
OK, we’re nearly done. Just let’s finish by configuring the plugins we just installed. If the plugin doesn’t appear below, then the good news is that there’s nothing more to do on it!
Configure All In One SEO Pack
Click on the link on the red prompt message at the top of your website page and you’ll get to the options page for this plugin, as shown in Figure 15.3:
First, click the radio button next to Plugin Status, ‘Enabled’. Then look at the three boxes below entitled ‘Home Title’, ‘Home Description’ and ‘Home Keywords’. These are the boxes that tell the search engines what your site is all about.
The text you enter here will show up on the search results when your site appears on their listings. Figure 15.3 shows what I entered for my website.
Enter your text and scroll to the bottom of the page and click ‘Update Options’. There are a lot of other technical options available on this page and it is safe to leave the defaults as they are.
Now that you have installed this plugin you will notice that it has added some similar boxes to the individual Pages and Posts screens:
The fields ‘Title’, ‘Description’ and ‘Keywords’ shown in Figure 15.4 are what is known in tech-speak as ‘meta-data’. This information gets copied to the invisible background of your webpage and is provided solely for the search engines; your human visitors will not see this information.
It is good practice to fill these each time you add your pages and posts. I will cover this topic again in Lesson 18.
Configure Contact Form 7
From the dashboard, click ‘Plugins’ and click ‘Settings’ for ‘Contact Form 7’.
There is nothing really to change here, but it would be a good idea for you to check that the email address quoted on this page is the email you want your messages to be sent to. This will not appear on the contact page and will not be visible to anyone other than you. If necessary, change this email address and then click on ‘Save’.
Before leaving the page, copy the shortcode at the top of the page ([contact-form-7 id=“55” title=“Contact form 1”]) to your clipboard.
Add A Contact Page
Now, let’s quickly add a ‘Contact Us’ page. From the dashboard, click ‘Pages’, ‘Add New’. Enter a title such as ‘Contact Us’ and then paste the shortcode you just copied into the body of the page. You can add some surrounding text if you like, and then click ‘Publish’. Easy – you just got yourself a ‘Contact’ page.
While you are going through this exercise you may well see other plugins that look interesting and that you are tempted to install. By all means explore what’s available and install more plugins if you can see a use for them. My advice, when looking for plugins, is to choose only those with three or more stars and do not install a plugin that has not been tested with the version of WordPress that you are using.
You can find out more about a plugin by clicking on ‘Details’ against that plugin on the ‘Install Plugins’ page.
There are many, many more plugins that you can use and I leave you to discover and install them yourself. But a quick word of advice if this is the first WordPress website you have ever built. Don’t overload your website with plugins if you cannot justify that they are necessary for the functionality of your site.
Plugins can clutter up your site and slow it down and can, from time to time, conflict with one another. And, as with themes, plugins can become out of date and can stop working if the plugin’s author has not kept up to date with the current version of WordPress. So, take it step by step and be a little self-disciplined in your use of plugins, at least at first.
What is the best plugin for keeping track of the number of visitors to my website?
‘Google Analytics’ is the system used by most professional webmasters and this provides an extensive breakdown of how many visitors your site attracts and where they come from.
To use Analytics you need to have a Google account (free, and easy to set up) and you have to sign up to Analytics. All this is explained in http://www.google.com/analytics/.
When you have added your website to your Google account, you are provided with a snippet of tracking code which you have to include on your website. This operates in the background and invisibly monitors your visitors so that Google can present you with a detailed breakdown of your website traffic. You can see the daily results of this by logging into your Google Analytics account.
There are various plugins which enable you to add the tracking code to your website and the one I currently favor is ‘Google Analytics for WordPress’. Search for this plugin as explained above, install it and copy and paste your tracking code as directed.
Having said all this, when you first get started Google Analytics may not be very useful because you may not actually be getting many visitors. So, you don’t need to rush into this until you have your site up and running (say, after a month or so).
Comments: Start A Dialogue With Your Visitors
You may remember that, in Lesson 5, I cautioned you about allowing people to comment on your posts and pages because of the nuisance of spam. Leaving open the opportunity for visitors to add their own content can turn your website into a magnet for spammers around the world to post garbage and, at times, some seriously offensive material.
However, if you have a good reason for inviting your visitors to leave comments on your website, and if you are prepared to moderate it, here is what I recommend you do:
From the dashboard, click on ‘Settings’, ‘Discussion’ and check the following boxes:
- Allow people to post comments on new articles
- Comment author must fill out name and email
- An administrator must always approve the comment
- Comment author must have a previously approved comment
As you can see from Figure 16.1, there are other settings on that page that are self-explanatory and you can decide for yourself what else you want to check.
Then click ‘Save Changes’.
That’s all you need to do if you want a comment box to appear at the foot of every post and page. But you will probably want to be a bit more selective about which pages you actually want to allow comments on. For example, you probably wouldn’t want to invite comments on your Contact page.
To set up selective commenting, from the dashboard, go to ‘Pages’, ‘Add New’. Then look over to the top right of the screen and click on the arrow next to ‘Screen Options’ as in Figure 16.2. Where it says ‘Show on screen’ make sure the ‘Discussion’ box is checked.
What this will do is to add a ‘Discussion’ box on the screen where you add a new page. You can then check or uncheck whether you actually want a comment box on that page at the time that you add or update that page.
Do the same with the Screen Options on the ‘Posts’, ‘Add New’.
Moderate Comments To Banish Spammers
Note that I recommend that comments must be approved before appearing on your website.
The way this works is that, when someone posts a comment via a page or post on your site, the administrator (you!) will receive an email informing you that a new comment is awaiting moderation.
You then have to approve the comment before it is published. When you approve a comment it will appear on the page where it was originally posted. But if the comment is spam you can mark it as spam and it will disappear.
If a visitor posts a comment and you approve it, then, if that visitor ever visits your site again and uses the same email address, they can post another comment which will be automatically approved. That’s because WordPress assumes that you trust this visitor and that their future comments are going to be OK.
This is generally true but a few people do abuse this so it’s a good idea to just keep an eye on comments. You can easily trash any that are unwelcome.
Moderating comments yourself will probably be all you need to do in the early days of your website because the volume of user comments will likely be manageable. But what if the spammers find you and you are suddenly overwhelmed by hundreds of spam comments?
The answer is to use a plugin to filter the comments before they even get through to your site. The anti-spam plugins I use and can recommend are:
- Spam Free WordPress
You will only need to use one of these plugins to filter spam. Akismet is the most popular (and, in my opinion, the most reliable) but you will have to pay a small license fee if your website is for commercial purposes, otherwise it is free.
Users And Their Capabilities
By default, WordPress assigns the role of ‘administrator’ to the user (you!) who created the WordPress installation. The administrator is the person who has the capability to do everything with the website – add, amend, delete pages, posts and media, change the theme, set passwords, install plugins, manage widgets and add or delete other users – and more.
As a user, you have a profile. To see yours, from the dashboard, click ‘Users’, ‘All Users’ and you will see your username listed. Hover the mouse over your username and click ‘Edit’ when it pops up. You’ll see all the information that WordPress knows about you, as shown in Figure 17.1:
You don’t have to add any more information if you don’t want to but, if you do, some of the information may be visible to visitors to your site.
Note that here, at the bottom of the page (Figure 17.2), is where you can change your password. This is the password you need to login to the WordPress dashboard and you can change this whenever you want to.
Just type in the new password (twice) and then click on ‘Update Profile’.
If you are the founder of your website and you will be the only person who ever works on it, then you can now safely skip the rest of this lesson.
But if there could be more than one person working on the site then you will need to know how to create other users.
Add Another User
To add another user, from the dashboard, click ‘Users’, ‘Add New’. As you can see from the screen, the fields at the top of the screen (Username, E-mail, First Name, Last Name etc.) are self-explanatory. Enter all you need to identify that user. At the bottom of the screen is a drop-down box marked ‘Role’. This will tell WordPress what that user is, and is not, allowed to do on the site:
- Administrator – somebody who has access to all the administration features (the same as you!)
- Editor – somebody who can publish and manage posts and pages as well as manage other users’ posts, etc.
- Author – somebody who can publish and manage their own posts
- Contributor – somebody who can write and manage their posts but not publish them
It is up to you to decide how to allocate the role and capabilities of each user to suit your organization and team.
When all is filled in, click ‘Add New User’ and you’re done. That person can now login to the WordPress dashboard (see Lesson 3) with the username and password that you have assigned and will be given the capabilities that the role permits.
Search Engine Optimization (SEO
As I have mentioned, SEO is a huge topic and is all about how to optimize your website to attract visitors. There is no point in having a state-of-the-art website with all the bells and whistles that make it work like a dream if no-one ever visits it.
So you need traffic, which is a technical term for real people, with real eyeballs, eager to view the delectable content you have prepared for them.
Now when we talk about SEO we really mean optimizing websites for the Google search engine. Google isn’t the only search engine but it is the biggest, and what Google does, the others follow.
The basic problem that all webmasters face is that there are literally billions of websites on the Internet all competing for attention. When someone goes on to Google and performs a search, they begin by keying in some sort of query, for example, ‘how do I keep chickens in my backyard’.
Google checks its index and instantly displays ten results on the first page, as in Figure 18.1:
If the user sees what they want they’ll click on a site. If they don’t, they might just move over to the second page, but rarely beyond that. So, if your website doesn’t show up on the first couple of pages of the search, you are invisible.
Now, wouldn’t it be great if your website could appear on page one or two of the Google search results when someone types in a query applicable to your site? That’s really what SEO is all about.
Google has traditionally been quite guarded about how they decide which websites deserve to appear prominently on their search results. Their search algorithms have always been one of the big trade secrets of this billion dollar enterprise.
But now canny webmasters have effectively reverse-engineered the algorithms and found ways of effectively ‘gaming’ the system to trick Google’s computer robots (that we techies have dubbed ‘spiders’) into artificially boosting their sites.
To deal with this, Google regularly issues new versions of its algorithms and they have lately been a bit more informative about what we webmasters can actually do to please their mighty spiders.
So, while I cannot give you all the insider intelligence on how to definitively optimize your website (nobody outside of Google can), what follows here is a summary of the latest tips Google has now magnanimously released…
Firstly, what I can tell you is that Google likes WordPress websites because the WordPress behind-the-scenes code forces the site to be neat and tidy, without broken internal links, and with a spider-friendly structure that makes it easy for them to crawl the site. So, choosing WordPress is one big plus for you!
Basic WordPress SEO
These few simple steps will optimize your WordPress website so that Google and the other search engines will have every incentive to index your site efficiently and thus help you attract targeted traffic. All these tips start from the dashboard:
‘Site Title’ is very important. As shown in Figure 18.2, it should contain (preferably start with) the main keyword that you want to optimize for. For example, ‘Keeping Chickens’ is much more precise and descriptive than ‘Joe’s Backyard’.
Once your site begins to attract traffic don’t change this unless there is a good reason to do so.
‘Posts’/’Pages’, ‘Add New’
The post or page title is also important. Again, this should contain one of your site’s main keywords. Make sure that the permalink accurately records that. Edit it if it doesn’t.
The content of your post/page should be unique and should contain a sprinkle of words or phrases which have a connection or association with the keyword(s) in the post/page title. The main keyword(s) should be included in the text a few times but not to an exaggerated extent.
One of the latest features that Google looks for is whether your page is useful and interesting. One of the ways it measures this is by looking at how long your visitor stays on the page, how many pages of your website they read and whether they share the content with others. If people tweet or like or share your web pages on social networking sites like Twitter and Facebook then that boosts Google’s approval.
Google also likes to see the main body of your text above the fold. This means that the user need not have to scroll down the page to find anything readable. If the top half of your page is taken up with ads then that’s a downer.
Google also likes the text to be grammatically correct with no typos or spelling errors.
If you have a long article on your post-page you should consider using sub-headings, again containing one of your keywords. Use the drop-down ‘Paragraph’ box to format subheadings as ‘h3’ (not h1 or h2 which your theme might use for other purposes).
If you have an image embedded in your text, add your keyword(s) to the image title, description, alternate text and, optionally, caption.
In the case of Posts, use one or more relevant categories and add two or three keywords to Post Tags.
Remember that you have to do two things when writing your posts and pages. You must communicate effectively not only with your human visitors but also to the computer robots (spiders) that try to work out what it is that you are talking about.
All in One SEO Pack plugin
This plugin is important for SEO because it specifically adds what is known as ‘metadata’ to the internal coding of your site. This is not visible on the page to human visitors but it’s there, behind the scenes, for the spiders to gobble up.
In the plugin’s boxes on the Pages and Posts pages (See Figure 15.4 in Lesson 15), enter the post/page title, a summary of the post/page content in the description and three or four keywords. The ‘description’ box is the text which will be displayed by the search engines on the search results page (see Figure 18.1) so you need to write this in plain language, with keyword(s) appearing naturally in the text and, preferably, a call to action. (‘Find out how to build a chicken coop here!’)
If you want to know more about this plugin and the ways in which it can help with your SEO have a look at the documentation provided on the plugin’s website.
What’s a ‘keyword’?
A keyword is one or more words that might trigger a match in the Google Search Engine database.
Here’s how this works. When you first build your website, Google (and all the other search engines) find your website and their software robots read (‘crawl’) the words on each page, especially the headings and anything you’ve made a point of emphasizing. The bots ignore the entire HTML and technical stuff – all they’re interested in is the actual words that you have written in your pages and posts.
They deliver this data back to Google’s indexing software which then analyses what you’ve written and decides what your website is all about. This is very powerful software and it generally does a pretty good job of impersonating a human reader.
Google then stores the information about your website in its vast database, waiting for someone to sit down at their computer and type a query into their search page which might match what your website is all about.
So, if you want your website to be found by your target audience then it’s important that you optimize your content for the keywords that they might use when searching for information. And that’s where we come to the other side of the equation.
The term ‘keyword’ also denotes the words that the user types in as their query.
Google saves every string of words that users type in to find something and their software calculates the frequency with which these phrases or combinations of words occur, over all the searches made. Therefore, they can calculate very accurately how popular a particular topic or phrase is. And, as you can deduce, the more popular the keyword, the more difficult it is to get your website to come up on page one because there will be too many competing websites.
For example, golf is a very popular topic that people want to search for. But simply typing in the word ‘golf’ is usually a waste of time because it is too broad. Millions of people simply type in the word ‘golf’ and Google does its best to come up with something relevant but the user could be looking for anything and the results they get will likely be too broad to be useful. And it would be virtually impossible for you to get your website to come up on the first page of Google when someone simply types in ‘golf’ because there are just so many other well-established websites competing on the same subject.
But here’s where the ‘optimization’ bit comes in. Canny surfers have come to learn that they’ll get results quicker if they search for something more specific, for example, ‘golf shoes’. But even that is very broad.
It’s much better to look for ‘men’s golf shoes’ or even ‘men’s blue golf shoes’ or ‘men’s blue golf shoes size 10’. That narrows down the search and the user is more likely to find what they’re looking for.
So, if you’re selling golf shoes, it will be easier for you to rank your website in the search results if you optimize one or more pages for very specific words and phrases to describe exactly what products you have for sale.
‘Sportco Men’s Blue Leather Golf Shoes Size 10’ tells Google, and your potential customer, precisely what you have for sale. And you will have a much better chance of coming up higher in the search results simply because there is much less competition for these keywords.
But what if you are a small business or organization and you just want your website to publicize your name and brand?
SEO is much easier if your name is unique (or nearly) because there is much less competition. If your website is all about ‘Clarissa Clancy Clairvoyant’ then it’s much easier to appear on page one of Google when someone types in your name because you are probably the only one using that keyword.
But that presupposes that you have done enough publicity to get your name known outside of Google in the first place – and that’s quite another topic!
Behind The Scenes With HTML
Right at the start of this tutorial I said that you don’t need to know HTML to use WordPress. This is true, but you can see from a couple of the previous lessons that it can be handy to know how to insert HTML if you need to use it to display something not covered by WordPress.
HTML stands for ‘Hyper-Text Markup Language’ and is the code that, originally, people had to use to create and maintain a regular website.
The beauty of WordPress is that it shields you from all this in its user interface but, behind the scenes, WordPress generates all the necessary code for you. And it does it (mostly) very efficiently.
I’m not going to teach you HTML here but I’m going to show you how to use it if you have written any of your own code or if you have a code snippet provided for you to perform some function not supported by WordPress.
Add HTML Code To A WordPress Page
WordPress presents you with an alternative window to use on Posts and Pages if you want to insert your own code. To do this, click on the ‘Text’ tab in a post or page, as in Figure 19.1:
When you click on that you are taken to the HTML window and WordPress expects that there will be some HTML or other code included in the text.
You can write any text as normal and WordPress will display it as normal, but when it encounters any HTML it will execute it rather than displaying it as text.
Figure 19.2 shows the text box with HTML code in it…
Figure 19.3 shows what that page looks like to the visitor:
When you use this Text tab there can be occasions when WordPress doesn’t render the HTML code as you might expect. This is because it does a further layer of verification before accepting the code and this can mean that it strips out anything that it doesn’t like.
This can be annoying, but you can force WordPress to accept your code if you temporarily change your User profile.
Disable The Visual Editor
From the dashboard, go to ‘Users’, ‘Your Profile’ and you’ll see a screen like Figure 19.4:
Check the ‘Disable the visual editor when writing’ box and then scroll down and click ‘Update Profile’.
Now you can enter the code you want into your post or page and it should retain the code ‘as is’ when you publish it.
If you do this, you will have to go back to your User profile and uncheck this box if you want to re-enable the visual editor for use in future posts.
But you’ll have to remember to repeat the disabling if ever you want to go back to edit the original post because, if you don’t, WordPress will strip out all your code!
How To Be A Winning WordPress Webmaster
OK, this section of the book is for when you have completed Lessons 1-19 and you have a working website up and running. People in this situation often ask me, ‘Right, I’ve done my website, now what next?’
Well, I’ll let you into a little secret. Successful websites are never really finished. The point about a living website is that it reflects change through time and it is always up-to-date and fresh when visitors land on it. So, work on a winning website never really stops.
Build Up Your Website
So, you should embark on a schedule of constantly adding new pages and/or posts and fine-tuning your site navigation so that visitors can easily find the information they are looking for.
The more work you do, the more skilled you will get at it and you will effectively learn on the job. And, trust me, you will find it very rewarding to see your website coming to life.
When you’re ready, ask others to give you an honest appraisal of your efforts. Find out what else they would like to see on the site and whether they can offer any positive suggestions for improvements.
Promote Your Website
Don’t forget the external promotion of your website.
You need to let everyone know about your website by adding your domain URL to all your publicity material and your email signature and your business cards and your profile on forums etc., etc.
If you are on Facebook or Twitter or Google+ or LinkedIn (or any other social media), make sure that all your friends, followers and contacts know about the website.
Where possible, ask others with websites to link to yours as this will help your search engine visibility.
Expand Your Skills
And, as you work away, you will find that your skill-set will grow. You will discover that you have mastered techniques that you once thought unfathomable and you will also gain the confidence to learn even more. That is, essentially, how I learned WordPress and you can do the same.
As it says in the title, I wrote ‘WordPress To Go’ as a guide for beginners, not a definitive work on the whole topic of WordPress. But I hope that I have equipped and encouraged you to find out for yourself the answers to questions not covered here.
WordPress has its own self-contained, contextual ‘Help’ system. Look at the top right of each of the pages in the dashboard and you will see a little ‘Help’ tag. When you click on that you will see a drop-down box that contains text and links to provide more information about the type of page you are on and how to use it.
In addition to WordPress.org, there are many other websites offering useful information about WordPress.
Go on to Google and simply type in the question(s) that you want answered. Make sure you include the word ‘WordPress’ somewhere in the question.
You may be surprised at how much information there is out there for free. You will understand a lot more from that material after you’ve been through these lessons than you would have done before.
But one warning about picking up WordPress tips from external websites. Check the date of the page or article that you are referencing because WordPress information can quickly go out of date.
If what you are reading is more than one year old, be careful that the information you are reading is still current.
So, my message in this final lesson is to keep at it. Expand and polish your website. Keep it all fresh and up-to-the-minute. Keep on learning. And take pride in your achievement.That’s the way to become a winning, WordPress webmaster!