!!!!!

Beginner’s Guide to WordPress Course Notes

!!

!!!!!

Course Contents

Introduction 4

WordPress Basics 4

Logging In! 4!

The WordPress Dashboard! 5!

Pages & Posts! 6!

Working With Pages! 6!

Creating Image Galleries! 13!

Media Library! 15!

Categories & Tags! 16!

Managing Comments! 18!

Comment Management Tools! 19!

User Roles! 20!

Menus! 21!

Configuring WordPress 25

Settings > General! 26!

Settings > Writing! 27!

Settings > Reading! 28!

Settings > Permalinks! 30!

Customising WordPress 32

Choosing and Installing Themes! 32!

Choosing a Theme! 33!

Premium Themes! 35!

Custom Themes! 35!

Widgets! 36!

Plugins! 38!

Page �2

SEO for your WordPress Website 43

SEO Basics! 43!

SEO Plugins! 44!

Google Analytics! 46!

Regular Maintenance - Backups and Updates 48

Your backup plan! 48!

Backing up WordPress! 49!

Updating WordPress! 50!

Updating Plugins! 51!

Useful Links! 52!

Support! 52

Page �3

Introduction Welcome to our ‘Beginner’s Guide to WordPress’ course. This session will guide you through everything you need to know to maintain your WordPress website and keep it running smoothly. !!We will demonstrate everything you need to do on the screen during the session. These notes contain instructions on how to perform each of the steps and will help you to practice your new found WordPress skills.!!!WordPress Basics !!Logging In

!The first thing you need to do to access the ‘back end’ of your site, i.e. the WordPress interface, is to go to the WordPress login page. This is usually http://www.yourdomain.co.uk/wp-admin.!!!

!!Enter your username and password, click Log In and this will take you to the WordPress Dashboard.!!!

Page �4

The WordPress Dashboard

The Dashboard displays information in a series of modules such as At a Glance’ and Quick Draft. You can organise this information to best suit you, moving modules around and expanding or contracting them in whichever way you find appropriate by dragging and dropping them around the screen.!!

!!To move a module, click and drag the title bar. To expand or contract a module, click on the right hand edge of the bar where you’ll see an arrow appear. By clicking Screen Options in the top right corner you can choose which modules to display and customise the layout.!!On the left hand side, you’ll notice that there’s a large list of links such as Posts, Media, Links and so on. These are links to all the tools you need to create and manage your WordPress website. !!!!

Page �5

Pages & Posts

!A WordPress website is made up of pages and posts. Typically, a page is static and represents one section of your website - you can also look on them as options in the menu.!!A typical website will have a Home page, About Us, Contact, News/Blog and then others such as Services, Team, etc.!!Posts usually contain articles and tend to be used for things like news items. Posts make up the blog page on your WordPress website. They are created in exactly the same way as pages, but you can display multiple posts on one page and organise them using categories and tags. !Posts are entries listed in reverse chronological order on the blog home page or on the posts page if you have set one (more on this later). !Posts can be found in the Archives, Categories, Recent Posts, and other widgets (more on this later too!). !!!Working With Pages

In the left hand menu, click on the Pages menu option. This will take you to the Pages page which lists the existing pages in the site. Notice that the left hand panel has expanded to display more options.

Page �6

Adding a New Page !1. To add a new page, you can either click on the Add New button near the top of the page, or the

Add New link in the left hand menu. !

2. The Add New Page page opens. Enter the title ‘Home’ and a little bit of text in the content area.

!3. Once you’ve entered your text, press the grey Preview button in the Publish module on the

right side of the screen. This will open a preview of your page in a new window or tab so that you can see how it looks before you publish it on the live site. !

4. Have a look at your new page, go back to your editor and publish it using the blue Publish button. !

5. Click on the grey View Page button that appears underneath the title entry box and view your new web page! It should look something like this:

!

!!

Page �7

Formatting Content !1. Go back into the WordPress Dashboard and go to the Pages section. Choose one of your

pages and select some of the text.!

!2. In the tool bar at the top of the page, make sure you can see both rows of buttons. If you can’t,

click on the Kitchen Sink button shown below in red. Also make sure that you are in the Visual editor and not the Text editor, using the tabs on the right side of the window.

!3. Use the options in the toolbar to format the text you have selected, just like you would in a word

processing package. For example, highlight some text and click on the Bullet Points button, or choose something other than ‘Paragraph’ from the drop down menu.

Page �8

!

4. Preview the page or publish it and then view your changes. !

5. To insert an image, place the cursor on the line of text where you want your image to display and click the Add Media button.!

6. When the Insert Media window opens click the Select Files button. This will open a window where you can choose an image from your computer or Media Library. Select any image and click Choose to upload a new one.!

7. This image is saved into your Media Library so that you can use it any time you want to - you’ll find those images in the Media Library tab. !

8. Once uploaded you’ll be given some options on the right hand side. As you can see, the image in the example is 512 x 512 pixels. Give your image a useful title and some Alt Text - this is used by search engines and screen readers and lets them know what the image is.Adding a Caption will add text next to the imageIn the display settings you can choose to align the image to the left, right, centre or not at all. If you want your text to flow around the image, choose either Left or Right.

TOP TIP! You can use Headings from the drop down menu to break up your content and add style to your text. The styles will be inherited from whatever theme you’re using. These are also great for Search Engine Optimisation (SEO) and let Google know what your page is about, but be sure not to use a Heading 1 in your content - you should only ever have one Heading 1 on a page and that is the page title itself, which your theme will have done for you.

Page �9

The Link To option allows you to choose what happens when a user clicks on the image.Media File - opens the image file when the image is clickedAttachment Page - opens the page you were editing when you uploaded the image Custom URL - allows you to enter a URL that opens when the image is clickedNone - nothing happens when you click on the imageThe Size option allows you to choose from Thumbnail, Medium and Full Size. The thumbnail option will create a square thumbnail of the image. !

9. When you have chosen all your options, click the blue Insert into page button. If you forgot something and want to change the options just select the image in the editor and click on the small pencil icon. If you need to resize it, just click and drag the image corners.

!10. Preview and publish your page and choose some different image options to see what they all

do.!

Page �10

!

!11. Video is best hosted on a service like YouTube or Vimeo. These services have specialist media

hosting that is geared up to support streaming video. To insert or video, go to www.youtube.com or www.vimeo.com and choose any video you want. Copy the URL of the video from your browser and paste it in the page editor window below the content you have been working on. The image below shows how it looks in the editor window:!

Page �11

12. Preview and publish the page - check back in your browser and you’ll see that WordPress has embedded the video for you - magic!

Deleting a Page !To delete a page you can either click the red Trash link on the right hand side of the editing page, or go Pages in the left hand menu, find the page you want to delete, hover over the title and click on the red Trash link. !!It won’t be deleted forever, it goes into Trash. You can access the Trash by going to Pages and clicking the red Trash link near the top of the page (only visible when there are items in there!). Hover over the item and click the blue Restore link to restore the page or the red Delete permanently link if you are sure you don’t want it any more.!!

Page �12

Creating Image Galleries

Image galleries are a great way to share groups of pictures on your website. When editing a page or post, you use the Insert Media button to insert images. The Create Gallery feature of the WordPress Media Uploader allows you to add a collection of thumbnails, creating a simple image gallery for the pages or posts on your site.!

!Here’s how you do it:!!1. Place your cursor on the page exactly where you’d like the gallery to appear - it can be

anywhere within a page or post.!2. Click the Add Media button and choose the Create Gallery option from the left hand side.!3. To upload new images, choose the Upload Files tab, or if the images are already in the library,

click the Media Library tab.!

Page �13

4. As you upload and/or select images from your library, you will see your selection confirmed on the Insert Media screen by check boxes at the top corner of each thumbnail. Also, a row of thumbnails appears at the bottom of the window to help you keep track of all the images you’ve selected. When you are happy with your selection, click the blue Create a new gallery button. Don’t forget to give Google a helping hand; name your images and give them Alt Text!

5. You will now see the Edit Gallery window.

Here you can do the tweak, configure and manage your new gallery:- Drag and drop: organise your thumbnails to order them however you want to- Reverse order: Reverse the current order of the images- Add image captions: Add descriptions that display below each thumbnail in the gallery- Remove images: Hover over a thumbnail and click on the “X” to remove from the gallery- Add more images: Click on the Add to Gallery link in the left hand sidebar- Cancel Gallery: Exit the Edit Gallery window and cancel your image gallery- Links To: Choose what gallery thumbnails link to: Attachment Page, Media file or None - Columns: Set the number thumbnails you want to display on each line- Random Order: Displays your thumbnails in a random order each time they are viewed !

Page �14

6. When you’re happy with all the settings, click the blue Insert Gallery button. You will now see a preview of what the gallery will look like on your page or post. Preview your changes and publish to the live site when you’re ready!

7. If you want to make any changes, just go back to the page editing window, click on the gallery so that it is highlighted in grey and click on the pencil icon - this opens the Edit Gallery window again.!

!Media Library

You’ve already added an image to your website through the editing window. Each time you upload an image, document, sound clip, or any file through the Insert Media window, the files are stored in the Media Library.!!The Media Library screen allows you to manage your media, i.e. edit, view, and delete files previously uploaded to your website.!!!!!

Page �15

Categories & Tags

Categories allow you to organise your posts to make it easier for your website visitors to find the things they’re interested in. They also help show google what your posts are all about.!!Categories are intended to be broad, i.e. news, events, recipes. Tags do a similar job, but they can be much more specific. For example if you were posting about a charity event in Bristol, you might categorise it as ‘events’ but then tag it with something like ‘charity’ and ‘bristol’.!!Using categories and tags well will make your posts much easier to navigate and it’s also a great way to tell Google about the structure of your content.!!Adding a New Post !1. In the beginning, adding posts is exactly the same as adding pages. Go to Posts in the left

hand menu. You can either click on the ‘Add New’ button near the top of the page, or the ‘Add New’ link in the left hand menu. !

2. The Add New Post page opens. Enter the title ‘My New Post’ and a little bit of text in the content area.!

3. Unlike the Pages editing page, when working on posts you have options for categories and tags.To add a new category, just click on the blue Add New Category link, enter a name and click Add New Category. When you have a few you may want to start using sub-categories. For example you might have a category of ‘Social Media’ to categorise articles about social media. You might then have sub-categories like ‘Facebook’ and ‘Twitter’.To do this, just select the main category from the Parent Category drop down.You can also add Tags that help describe the content - in this example we’ve tagged Mark Zuckerberg, but it doesn’t have to be a person!!

Page �16

4. Once you’ve completed your post, press the grey Preview button in the Publish module on the right side of the screen. This will open a preview of your post in a new window or tab so that you can see how it looks before you publish it on the live site. !

5. Have a look at your new post, go back to your editor and publish it using the blue Publish button. !

6. Click on the grey View Post button that appears underneath the title entry box and view your new post.!

7. The left side of this example shows that the post is now appearing in the blog navigation, we have an archive for February 2014 and some categories.The right side shows the content of our post, the title, categories, tags and some navigation to help users get to other posts. All these display factors are dictated by our theme and widgets, which we’ll look at shortly.!

!Deleting a Post !To delete a post you can either click the red Trash link on the right hand side of the editing page, or go to the main Posts page by clicking Posts in the left hand menu. Find the post you want to delete, hover over the title and click on the red Trash link. !!It won’t be deleted forever, but go into Trash. You can access the Trash by going to Pages and clicking the red Trash link near the top of the page (only visible when there are items in there!). Hover over the item and click the blue Restore link to restore the page or the red Delete permanently link if you are sure you don’t want it any more.!

Page �17

Managing Comments

Managing comments is similar to the way you manage your posts and pages. When you log into the Dashboard you will see a snapshot of the latest comments, but to view all of them and manage them properly, pick Comments from the left hand menu.!!• Comments - a reply or feedback that a reader can leave in response to a page or post. You can

then write a comment in response, creating a dialog between you and your readers. !• Trackbacks & Pingbacks - methods for alerting blogs that you have linked to them, or, as a blog

owner, alert you that someone has linked back to your page or post. The difference between them is:!!

• Trackbacks – must be created manually, and send an excerpt of the content.!• Pingbacks – are automated and don’t send any content. - a link from a post in another blog

or website to a post in your blog. The trackback sends a ping from the originating site to your blog, to notify it that a link was created. You can block comments and trackbacks on your site.!!

Trackbacks and pingbacks from other sites will appear in your Comments just like other comments, but on your post pages, they will appear according to your theme's design.!!The highlighted comments are those that are awaiting moderation from you. When you hover over one of the comments you’ll see options appear at the bottom that allow you to moderate them individually. You can also tick them and use the ‘Bulk Actions’ drop down menu to manage them in bulk.!

Comment actions: !• Approve/Unapprove - clicking the Approve link publishes the comment to your blog and

changes the link to Unapprove. Clicking the Unapprove link removes the comment from your blog and puts the comment back in the moderation queue.!

• Reply - Clicking the Reply link opens a quick text box to allow you to reply to a comment from the Edit Comment screen. This means you can reply here rather than having to navigate to the page or post on your website.!!

Page �18

• Quick Edit - Clicking the Quick Edit opens a text box on the screen so that you can make changes to the comments, for example fixing a broken link or correcting grammatical errors.!!• Edit - Clicking the Edit link opens the comment into full edit mode so that you can make changes

to the comments, for example fixing a broken link or correcting grammatical errors.!

• Spam - Clicking the Spam link removes the comment from your blog and places it in your spam folder. You can delete all spam using the Empty Spam option inside your spam folder.!!• Trash - Clicking the Trash link removes the comment from your blog and places it in the trash.!!!Most WordPress websites will receive their fair share of spam comments. It’s important to keep on top of them, mark the spam comments as spam, empty your spam folder and empty your trash folder regularly.!!Equally important is to make sure that you respond to genuine comments and engage with your readers - it’s a great way to keep them coming back.!!Comment Management Tools

Here are some of the best tools we have found to help you to manage your WordPress comments:!!• Akismet - this plugin is included with every installation of WordPress and it detects comment and

trackback spam. Each time a new comment, trackback, or pingback is added to your site it's submitted to the Akismet web service which runs hundreds of tests on the comment and decides whether or not it’s geniune. As a result, you don't have to waste your time sorting through and deleting spammy comments from your blog. You can use Akismet on one website for free, you just need to register your website and enter the API key in the plugin’s settings.http://akismet.com/!

• CAPTCHA - Catchily named, the ‘Completely Automated Public Turing test to tell Computers and Humans Apart’ system helps keep the spammers out by making comment makers enter a code, usually shown in an image on the comment form, before they can submit a comment. We have used ‘Really Simple Captcha’ on many websites - just install the plugin and configure the settings.http://wordpress.org/plugins/really-simple-captcha/ !

• Subscribe to Comments - this plugin allows your readers to subscribe to comments for individual posts. Readers are notified by email when a comment is posted on a post to which they have subscribed. A great thing about this plugin is that it provides subscribers access to a control panel where they can manage their own subscriptions to comments. http://wordpress.org/plugins/subscribe-to-comments-reloaded/!

Page �19

User Roles

Most website owners only ever need to use one user role: administrator. However, you may want to make it possible for people to register on your site and become subscribers, or to allow others to edit and contribute to your content.!!Summary of Roles !

• Administrator – someone that has access to all the admin features within a single site!• Editor – someone that can publish and manage posts including the posts of other users!• Author – someone that can publish and manage their own posts!• Contributor – someone that can write and manage their own posts but cannot publish them!• Subscriber – someone that can only manage their profile!!

We’ve included this information here so that you can understand a little more about subscribers and how you can share your blog posts with them.!!You can either link to your WordPress administration page and allow people to register to your blog, or you can add them manually through the Users interface. To allow users to register, just add a link for them to follow somewhere on your site: http://www.yourdomain.com/wp-login.php?action=register - or use the plugin below:!!Managing and emailing your subscribers !Subscribe2 provides a comprehensive subscription management and email notification system for WordPress blogs that sends email notifications to a list of subscribers when you publish new content to your blog.!!http://wordpress.org/plugins/subscribe2/!!!!

Page �20

Menus

There have been lots of improvements in the way that WordPress lets you manage your menus in recent years, and they’ve made it really easy!!!You can create lots of different menus and use them in different places on your site. The most common example of this is the main menu across the top of the page. You could also create smaller menus to go in your footer or sidebar.!!!1. To choose the pages and the order they display, go to Appearance > Menus from the left hand

menu.

!2. Click on the blue create a new menu link at the top of the page. !

3. Create a menu called ‘Main Menu’.!

4. Click on the Manage Locations tab and choose Main Menu as the Top primary menu. These options will differ depending on your theme.!

Page �21

5. Click Save Changes and go back to the Edit Menus tab. You’ll see on the left hand side that the list of pages on your site is no longer greyed out. Choose the pages from the list that you want to include by ticking the boxes next to them and click the Add to Menu button. You can now drag and drop the pages you chose into the order you want them.

!6. Save the changes by clicking the blue Save Menu button.!

7. You might want to organise your content into sections and subsections. To do this add the ‘Sample Page’ to the menu. Drag and drop it beneath the item that you want to be the section (or parent) and indent it slightly to the right. In the example below ‘About Us’ is the section and ‘Sample Page’ is the subsection.!

Page �22

8. Save your changes and when you view the menu on the website now, you can see that the order has changed and when you hover over ‘About Us’, ‘Sample Page’ appears as a subsection. (You will need to refresh your page to see this change).

!9. You can also create links to categories within

your posts. This is particularly useful for news or magazine style sites that consist mainly of articles. Click on the arrow on the Categories option from the module on the left of the page to view the available categories. This will only display categories for which there is an associated post, so in the example we have the options Uncategorized, Social Media and Facebook.!

10. Just as with the pages, tick the ones you want and click Add to Menu. Add your choice(s) as sub-sections of your news/blog section.!

11. Save your changes, view your website and refresh the page. Now when you hover over ‘News’ or ‘Blog’ in the menu, you’ll see the category/categories. Clicking on this new menu option will open a page that has just the posts in that category.!

Page �23

!12. If you want to link to an external site in a menu or to a

particular blog post you can use the Links option. Click on the arrow on the Links option from the module on the left of the page and enter a web address (e.g. http://www.google.co.uk) in the URL field and a label in the Label field.Make sure that you include the ‘http’ in your URL or the link won’t work.!

13. Click Add to Menu, save your changes and view your website. You’ll have a new menu option that links to the website you entered.

!14. There may be an occasion when you want to edit the label in the menu. For example if you

have a very long page title like, ‘Everything You Ever Wanted to Know About WordPress’ it would take up a lot of space in the menu. Click on the arrow on the right side of the menu item you want to edit, in the list of menu items on the right hand side of the page. This opens it out so that you can edit the label. In the example the item ‘Social Media’ has been edited to be called ‘Social Media Articles’. The Title Attribute option is so that you can apply styles to individual menu items in your theme’s CSS.You can also use the Move links to move items around and the red Remove link to delete.

Page �24

Configuring WordPress !

There are numerous settings within WordPress, some theme-dependent and others not. These notes will guide you through some of the standard ones and the effect they have on your website.!!!!

Page �25

Settings > General

!Site title -This is the site title you entered when you installed WordPress, usually the name of your site (or blog). Most themes will display this title, at the top of every page (see above), and in the reader's browser titlebar. WordPress also uses this title as the identifying name for your feeds.!!Tagline - In a few words, explain what your site is about, for example your slogan or tagline. A tagline is short phrase, or sentence, used to convey the essence of the site and is often funny or eye-catching.!

!WordPress Address (URL) - Enter the full URL of the directory containing your WordPress core application files (e.g., wp-config.php, wp-admin, wp-content, and wp-includes). !!Site Address (URL) - Enter the address you want people to type in their browser to reach your WordPress site. This is the directory where WordPress's main index.php file is installed.

Don’t change the URLs as it can break the website!"!!

E-mail Address - This is the email address you entered when you installed WordPress. Enter the e-mail address to which you want WordPress to send messages regarding the administration and maintenance of your WordPress site. !!For example, if you allow new users to register as a member of your site, then a notification will be sent through e-mail to this address. In addition, if the option, An administrator must always approve the comment, is ticked, this e-mail address will receive notification that the comment is being held for moderation. !!Membership - Check the Anyone can register checkbox if you want anyone to be able to register an account on your site - generally this is not ticked."!New User Default Role - This pull-down box allows you to select the default Role that is assigned to new users. This Default Role will be assigned to newly registered members or users .!!Timezone - From the pulldown box, choose a city in the same timezone as you. !!Date Format - The format in which to display dates on your site.!!Time Format - The format in which to display times on your site. !

Page �26

!Week Starts On - Select your preferred start date for WordPress calendars from the drop-down box. Monday is the default setting for this drop-down, meaning a monthly calendar will show Monday in the first column."!!Settings > Writing

!Formatting - You can use these checkboxes to control some of your blog's formatting.!!• Convert emoticons such as :-) and :-P to graphics on display - Checking this tells

WordPress to convert all of the emoticons in your posts into graphical smilies. !• WordPress should correct invalidly nested XHTML automatically - Checking this helps make

sure that what you write in your posts is valid code. You should probably check this box since invalid code sometimes causes problems with web browsers.!!

Note: Some plugins may not work correctly when this feature is turned on.

Page �27

Default Post Category - The category you select from this drop-down is called the default post category, which is assigned to a post if you fail to assign one. If you delete a category, the posts in that category will be assigned the default one. !!Default Post Format - Post Formats are used by themes to create different styling for different types of posts. This setting is only visible if the current activated theme supports post formats. !Press This - Press This is a bookmarklet: a little app that runs in your browser and lets you grab bits of the web. Use Press This to clip text, images and videos from any web page. Then edit and add more straight from Press This before you save or publish it in a post on your site.!!Post via e-mail - With this option, you can set up your blog to publish e-mails as blog posts. To do this, you would send an e-mail to a specific address you've established for the purpose. More than likely, you will need the help of your web host and/or your e-mail provider. !!!Update Services - When you publish a new post, WordPress automatically notifies the update services of the sites listed in the box.!!!Settings > Reading

Page �28

Front page displays - Use this setting to determine if your home page is your posts page or the page you created earlier. This setting displays only if you have one or more defined. Please note static front page plugins and other 'posts display' control/restriction plugins and themes may affect how these features work.!!

• Your latest posts - Check the radio button so your latest posts are displayed on the website’s front page.!

• A static page (select below) - Check this radio button to cause a ‘static’ page to be displayed as your website’s front page. At the same time, choose the page that will display your actual posts. !

• Front page - Select in the drop-down box the page that you want displayed as your front page. If you do not select a choice here, then effectively your blog will show your posts on both the blog's front page and on the posts page you specify.!!

• Posts page - Select in the drop-down box the name of the page that will contain your posts. If you do not select a Page here, your posts will only be accessible via other navigation features such as category, calendar, or archive links.!!

1. Choose ‘Home’ for the front page and ‘News’ or ‘Blog’ (depending on what you made) for the posts page. These should always be two different pages.!

2. Click the Save Changes button.!3. Go to your URL (http://yourname.websitestage.co.uk) and you’ll see the ‘Home’ page you

created earlier. Click ‘News’ or ‘Blog’ in the menu at the top and you will see the post you created, plus the default ‘Hello World’ post.!

!!Blog pages show at most [X] posts - Enter the number of posts to be displayed per page.!!!For each article in a feed, show  - Determines whether to display the full article or just a summary on your posts page.!

• Full text - Click this radio button to include the full content of each post.!• Summary - Click this radio button include a summary of each post.!

!Search Engine Visibility - Check the Discourage search engines from indexing this site box to ask search engines not to index this site.!!!!!!!

Page �29

Settings > Permalinks

!By default, WordPress uses web URLs which have question marks and lots of numbers in them; however, WordPress offers you the ability to create a more user friendly, custom URL structure. !!This can improve the aesthetics, usability, and make your links easier to maintain. It’s also a great way to show Google what your pages and posts are about.!!

Common settings!!• Default - An example of the default structure is http://www.sample.com/?p=123!• Day and name - An example of the day and name based structure is http://www.sample.com/

2008/03/31/sample-post/ !• Month and name - An example of the month and name based structure is http://

www.sample.com/2008/03/sample-post/ !• Numeric - An example of the numeric structure is http://www.sample.com/archives/123!• Post name - An example of the post name structure is http://www.sample.com/sample-post !• Custom structure - In the box specify the custom structure you desire to use. One example

is /archives/%year%/%monthnum%/%day%/%postname%/.!!!

Page �30

1. Select the Post name option from the list and click the Save Changes button.!2. View your website and click on a few of the different pages and posts - notice that the page

address has changed to a much more user friendly format.Before

After!

!Optional  - You may enter custom bases for your category and tag URLs here. For example, using /topics/ as your category base would make your category links like this: http://example.org/topics/uncategorized/. If you leave these blank the defaults will be used.!

• Category base - Enter a custom prefix for your category URLs here. !• Tag base - Enter a custom prefix for your tag URLs here.!!!!!!

Page �31

Customising WordPress !Choosing and Installing Themes

In its most simple form, a WordPress theme dictates the layout, design and functionality of your website without changing the content or WordPress itself.It’s a bit like respraying your car and adding a sporty body kit; the car underneath hasn’t changed, you’ve just souped up the surface layer.!!Themes are made up of templates that control the layout of each of your website pages. On most websites you’ve probably noticed that the home and blog pages look different to other pages; in WordPress those would be different templates that are being applied to the page.Some themes have lots of other templates you can use that come with their own functionality, for example a Contact page template which displays a map for you or a Team page template that has options for displaying the members of your team.!!Generally speaking, the elements that make up a template are:!!

• Header!

• Menu!

• Sidebar(s)!

• Widgets!

• Content Area!!Every year, WordPress brings out a new standard theme - the one we have been using today is calledTwentyFourteen.!!1. Choose Appearance > Themes from the menu on the left hand side. You will see that the

current theme is set to TwentyFourteen. Hover your mouse over the TwentyThirteen theme and click the Live Preview button. This will show you exactly how your home page would look if you were to activate the theme.!

Page �32

2. Close the preview, click the Activate button, go to your website and refresh the page. You’ll see that the layout, colours and design have completely changed.!

3. Go back into the Themes page and click the blue Customize button on the active theme. This will give you a preview of the theme and display customisation options on the left hand side. !

4. The options available will depend on the theme you are working with, although some are pretty standard. In this example you can edit the Site Title and Tagline as you can in Settings > General.The Colors section allows you to edit the colour of the title on the page.Header Image allows you to use an alternative image in the header section or remove it completely.Navigation allows you to choose the menu you created earlier, and Static Front Page gives you the front page and blog options we looked at under Settings > Reading.Make some changes to the theme, save your changes, go to your website and refresh the page to see how it looks.!!!

Choosing a Theme

!There are a wide variety of themes available, both free and ‘premium’. When looking for a suitable theme, try to think about:!!

• Purpose of the website - predominantly blog or page lead?!• Page templates - does it come with options for different layouts?!• Customisation options - can you customise the colours easily?!• Support - do the developers offer support? - Do they respond to comments and queries?!• Rating - Have people given it a good score?!• Is it responsive? - Will the theme look good on phones and tablets?!• Documentation - is there a user guide that you can download or an FAQ available?!!!

1. Go to http://wordpress.org/themes/. This is where developers supply free themes that you can download and apply to your site. You can search by keyword (e.g. sport, business, cooking) or use filters to find the colours and layout that you want. Choose a theme and click the green Preview button on the right hand side of the page. You can also search for and install themes directly in the Themes section by clicking the Add New button at the top of the page.!

Page �33

2. One you’ve found a theme that you like, click the red Download button on the right side of the page and save the theme zip file to your computer. !

3. Go back to the Themes page for your website and click the Add new button at the top of the page.!

4. Click the Upload link, then the Choose File button and locate the zip file you just downloaded. Choose the file and then click Install Now.

!5. Once the installation process has finished, click the Activate theme link. Go to your website,

refresh the page and see how much the appearance of your site has changed!

!!

Page �34

6. Go back the the Themes page of your website, click on the blue Customize button and change some of the options. Depending on the theme you installed you may also have a new menu option on the left hand side that allows you to customise other elements of the theme.!

Premium Themes

There are loads of great free WordPress themes, but if you really want to do something special, a Premium theme can give you a really professional looking website very quickly.!!Try searching on www.themeforest.net using the checklist we provided earlier. Look out for ‘Elite Authors’ that have contributed a lot of themes, and check the comments section to make sure they respond to queries.!!View the live previews of the themes you like - these are fully functional websites that you can browse to see everything the theme has to offer.!!These themes are really great but they can vary wildly in terms of functionality and how they’re set up. If you decide to use one you will get a really modern looking website, but be prepared to face a lot of trial and error or to get a little bit of help from a professional.!!!Custom Themes

A custom theme is one that you have designed from scratch, giving you totally bespoke design and functionality to suit your requirements. !!It’s also possible to customise existing themes beyond the options available through WordPress - you just need to learn a bit of CSS or speak to your friendly local web designer!!!

Page �35

Widgets

!WordPress Widgets add content and features to your sidebars. WordPress comes with set of default widgets for post categories, tag clouds, navigation, search, etc. !!Widgets were originally designed to provide a simple and user friendly way of providing design and structure control.!!Most themes are ‘widgetised’ and allow you to add, remove and move around various widgets.!!1. Go to Appearance > Widgets from the left hand menu.

!2. The widget areas available with your theme are listed on the right. The image above shows

those available with the Twenty Fourteen theme - Primary Sidebar, Content Sidebar and Footer Widget Area. The Primary Sidebar already has several widgets inserted. These relate to the menu down the left hand side of your website.On the left of the screen are the widgets that are available with your current theme by default, along with a short explanation of what they do.!

3. Click on the arrow on some of the widget area and installed widgets to view and edit their options, drag and drop them to change the order and remove any that you don’t want.!

Page �36

4. Drag a widget from the left hand side over to the one of your widget areas, save your changes, view your website and refresh the screen to see the effects.!

!

If you apply a different theme to your website, you may have a number of different widget areas that are site-wide or specific to particular page templates. The theme may also come with its own widgets such a slideshows, calendars, videos.!!There are lots of different plugins that also include widgets so that you can drag and drop them onto your site. These are particularly useful for linking to other sites, for example Twitter feeds, Facebook ‘likes’, Flickr photos, etc.

Page �37

Plugins

WordPress plugins add functionality to your site. There are tens of thousands of free ones to choose from - you can just search the WordPress website to find one, download it, install it, configure it and Bob’s your uncle! !!They add content features in your widget areas and some can also be inserted into your pages using shortcodes.!!Examples include contact forms, maps, Google Analytics and SEO tools. The instruction below describe the basic process for finding, installing and configuring a simple Plugin.!!1. One of the most commonly used plugins is Contact Form 7. You can either browse plugins

directly through your WordPress Dashboard or you can go to http://codex.wordpress.org/WordPress_Widgets. Go to Plugins from the menu on the left hand side of the page. You’ll notice that you already have two plugins installed by default. !

2. Click the Add New button at the top of the page. Type ‘Contact form 7’ into the search box and press the Search button.

!3. Click the blue Install Now link. If a dialogue box pops up asking you to confirm, press OK. Click

the blue Activate Plugin link.!4. You’ll now have a new option in the menu on the left hand side, ‘Contact’. Click on Contact.!5. You’ll see that ‘Contact Form 1’ has already been created for you. Click on the blue link to view

the contact form. You’ll see a basic contact form made using HTML.!6. To insert this onto a page, select and copy the shortcode from the box at the top of the page.!

Page �38

7. Go to Pages from the left hand menu and create a new page (or if you already have a contact page, select that).!

8. Paste the shortcode into the text editor window and click Preview on the right hand side of the page.

!9. You’ll see a basic contact form has been added to your page. Go back to the editing page,

press the blue Publish button, then click View Page to see it live on your website.!

Page �39

10. By default the contact form will send contents of the form by email to the address you provided when you installed WordPress. Fill out the form and send yourself a message!!

11. Click on Contact in the left hand menu and select your contact form. You can add new form options using the drop down box on the right hand side. Common choices are text, radio button, check box, etc.Most are self explanatory, but a checklist lets the user choose a number of set options, while a radio button only lets them choose one.!

12. Choose Radio buttons from the list. You can leave all the other options blank, but add your choices, one on each line. When you’ve finished, highlight and copy the short code (shown in blue).!

!

Page �40

13. Paste this into the Form area on the left. Save your changes. View your ‘Contact’ page in the browser and refresh the page. You’ll see that there are now radio buttons that the person filling out your form can select.!

Page �41

14. Now you need to make sure that when the user chooses one of those options, it gets emailed to you. Go back to the Contact editing page. Scroll down to the Mail section. The Message body section is the content of the email that gets sent when a user submits the form.!

15. When we copied and pasted the short code into the form, there was also a shortcode that you can paste into the Message body section. In the example above, it’s [radio-905]. Enter the shortcode into the Message body section, save your changes and go back to your website. Refresh the ‘Contact’ page and send yourself another email; you should see the new option in the message body.!

16. If you want to change the email address that the message goes to, to the left of the Message body section you can configure where the email is sent, the from address/name and the subject line of the email. In general the last two options will stay the same.!

!!!!

Page �42

SEO for your WordPress Website !SEO stands for Search Engine Optimisation, and it’s one of the most important things you can do on your website. SEO is the art of making your website more attractive to search engines, in the hopes that they will rank your website for key search terms. !!So, for example, when people type ‘Web designer Bristol’ into Google, we want the Skills on Toast homepage to be on the first page of results. The more search engine friendly our site is, the more likely that is to happen.!!SEO Basics

The most basic thing you need to know about SEO is that the more information you give the search engines that tells them what your site is all about, the more likely your site is to rank well - all you have to do is serve that information up on a platter in a format they can understand, and that format is called metadata - information about each individual page and post on your website.!!Amongst other things, here’s what they’re looking for (this does change, but at the moment, it’s all true!)!!

• Browser title - this is what you see in the tab on your browser when you’re on a website - it’s usually the name of the page you’re on, or the name of the site, or a combination of the two. This is also the link text that appears on search engine results pages. It should be descriptive of the page or post’s content and different on every page of your website. It should bender 60 characters to prevent it being cut off on search results pages.!

• Description - this is the text you see beneath the link on search engine results pages. It should be a proper sentence that describes what the page or post is about. A general rule of thumb to write this text is to identify a few key words that describe the page and then use them in a sentence. You only have 160 characters to do it, so it needs to be concise, and don’t overdo the keywords, or it will get spammy!!

• Keywords - there is very little evidence to suggest that search engines still use the keywords metadata, and we don’t event fill them in any more - but if you want to, try to pick no more than ten key words and/or phrases that apply to your content.!

!!

Page �43

SEO Plugins

You can help make your website more search engine friendly with a little help from some great plugins - all you need is a little bit of knowledge and to use it in the right places.!!!All in One SEO Pack !This is really great SEO plugin that helps you to make your website search engine friendly - really simple to use and quick to set up. !!https://wordpress.org/plugins/all-in-one-seo-pack/!!!By default WordPress will give you some slightly ugly looking browser titles. It will also insert the first 160 characters of your content as your description - sometimes this works really well, but sometimes it leaves your search engine result entries displaying all the options in your menu, which is less than helpful!!!When you install All in One SEO Pack, it generates meta tags from your content automatically. it also gives you an interface where you can customise the browser title, description and keywords (if you want to!) on each page and post on your website.!!You can also configure the homepage and site settings in the main All in One SEO panel - just choose All in One SEO from the left hand menu. There are a multitude of settings that you can play with - click on the question mark next to each one to see what it does.!!As a minimum, you should always fill in the Home Title and Home Description fields on the main settings page.!!It also does a whole load of other great SEO-y things for you, that will get your site ranking in no time!!!!

Page �44

This graphic shows how the settings available on individual pages and posts translate into search engine listings.

!!Page �45

Google Analytics

If you haven’t set up Google Analytics for your website yet, then now’s the time! Google Analytics is a powerful tool that can show you how many people have visited your site as a whole, the individual pages visited, how long people spent there and whether they left after one click - and, it’s totally free!!!If you haven’t already done so, the first thing you need to do is create a Google Analytics account - it only takes a couple of minutes.!!1. Go to www.google.com/analytics - click either Sign in or create an account and take all the

necessary steps to sign. The chances are, you won’t need to create an account. If you use any other Google products, such as Gmail, Google Drive, YouTube or Google+, you can use the same login that you use for those accounts.!

2. Once logged in, there are just three steps:!

3. Click the Sign Up button on the right hand side, and enter your website details!

Page �46

4. Click the Get Tracking ID button, accept the terms and conditions and you will see a confirmation message with your tracking ID - something like UA-00000000-0!

5. Copy the tracking ID - we’ll need this later.!!Now that your account is set up, we need to install the tracking code onto your website - this is easier than it sounds!!!1. Log into the back end of your website and go to Plugins > Add New. Search for ‘Google

Analytics’ - install the one shown below (first in the list at the time of writing).!

2. Activate the plugin and then go to Settings > Google Analytics.

!3. Paste the Tracking ID you copied earlier into the text box and Save Changes.#!Et voila! Google Analytics is installed. It will take a few hours to start showing any traffic data, but now that you have it running on your website you can log into it Google Analytics any time and see how many visitors have been to your site and what they did whilst they were there.!!To add this information to your WordPress dashboard, install the Google Analytics Dashboard for WP plugin - https://wordpress.org/plugins/google-analytics-dashboard-for-wp/ - then configure it with your Google Analytics account information under Settings > Google Analytics Dashboard.!!!!!

Page �47

Regular Maintenance - Backups and Updates !In order to keep your website running smoothly, you need to keep everything up to date. Every so often WordPress themselves release new versions of the software with security fixes and improved user interface tools. !!!Plugins and themes also need to be updated, to keep them compatible with the latest version of WordPress and to get the benefits of improvements that the developers have made. !!!However, updating WordPress isn’t without its pitfalls, so you need to make sure that everything, website files, database and settings, are all backed up before you update anything. !!!We regularly speak to people that have updated a plugin on their website, only to find that it causes a conflict with another plugin and breaks their whole website.!!!Having a backup plan in place can mean the difference between a quick fix and a time consuming, laborious rescue, either from software updates or, as we see quite often, from attacks from hackers.!!!Your backup plan

!Knowledge is power! Make sure you have the following information, so that if your site breaks you can act quickly:!!!• Who to call – do you know who hosts your website and how to contact them?!

• Where your backup files are stored – can you access them readily?!

• Your backup-backup plan – if your hosts can’t help, who should you call? Can the developers that built your site help?!!!It’s always wise to have an ‘in case of emergency’ option in place, so just give these factors some thought.!!!

Page �48

Backing up WordPress

You can back up WordPress manually, (i.e. the long way!) or you can use one of the many backup tools that are freely available, such as BackupWordPress - !https://wordpress.org/plugins/backupwordpress/.!!!Once installed you can find the configuration options under Tools > Backups - then click ‘Settings’.!!Make sure that you set it to back up both the database and the files, set the frequency of your backups and when they should run (doing it at night reduces the load on your server), how many to keep and whether you want to send an email notification on completion of a successful backup.!!!Click Update and then run your backup. It will take a couple of minutes to run, but when it has you’ll see it appear in a list on the main page. !!!Click Download to save a copy for your records. In the event that an update breaks your website you can either use the files to revert to the old version via FTP, or provide them to your web designer, who can do it for you.!!

We always recommend storing these files on the cloud, in DropBox or Google Drive so that you can get to and share them easily.!!!!

Page �49

Updating WordPress

You’ll know when WordPress has an update available because a message will appear across the top of the screen, prompting you to do so:!

WordPress comes with an automatic update tool which does everything for you, so the process is very simple - just follow these steps.!!1. Take a backup of your site and download it for safe keeping (see the previous section for more

details).!2. Click the Please update now link at the top of the page, or go to Dashboard > Updates.!3. You’ll see a message advising you that:

!4. Click Update Now. You will see something like the screen below, but once the update has

completed you’ll be taken to a welcome screen or message, confirming that you have updated WordPress.!

5. If the update fails, do a search on Google for whatever error message you receive - it may be a common problem with a simple solution. Otherwise, you may need to update manually, which involves replacing the core WordPress files via FTP. You can find instructions on how to do this here: http://codex.wordpress.org/Updating_WordPress#Manual_Update - just be careful or get some help!!

Page �50

Updating Plugins

!From time to time the developers will release new features for their plugins. They may also release an update when WordPress releases a software update to ensure the plugin is compatible.!!When an update is available, you’ll see a number appear next to the Plugins option in the left hand menu, telling you how many plugins have updates available.

!1. Click on the Plugins option in the left hand menu. Plugins with updates available will be

highlighted, simply click the blue update now link next to the plugin and hey presto! Your plugin is up to date.!!!A word of caution"!

Updating plugins can break your website, so it’s always worth keeping a copy of the old plugin files just in case. The same applies to updating themes and WordPress itself. If you have customised your theme directly in the code, updating it may overwrite your changes.!!Always take a backup of your website before updating anything, particularly WordPress itself.!!Best Practice for Updating WordPress and Plugins !1. Log in weekly as your WordPress site administrator and check for updates; you will see

notifications across the top of the dashboard area and in the ‘Plugins’ section when updates are available.!

2. Always back up your site before undertaking any updates, so that if something does go wrong, you can easily restore your site to the way it was.  WordPress provides step-by-step instructions on how to back up your data: http://codex.wordpress.org/WordPress_Backups !

3. Once everything is backed up, follow the steps on the WordPress website, to update to a new version of WordPress http://codex.wordpress.org/Updating_WordPress.  To update plugins, just follow the on-screen instructions in the ‘Plugins’ area of WordPress.!

4. For more information on plugin management, visit http://codex.wordpress.org/Managing_Plugins!

!Page �51

Useful Links

Here’s a list of links that you may find useful while working on your WordPress website. !!!• http://codex.wordpress.org - a whole host of information, tutorials and glossaries!

• http://www.skillsontoast.co.uk/category/WordPress - our ‘WordPress’ categorised posts

have the latest WordPress news and lots of ‘how to’ guides. If you can’t see the one you want

please let us know and it could make an appearance on the blog!!

• http://wordpress.org/themes/ - free WordPress themes!

• http://www.themeforest.net - premium WordPress themes!

• https://wordpress.org/plugins/ - free WordPress plugins!

• http://www.codecanyon.net - premium WordPress plugins!

!Support

If all else fails, don’t forget that we are always on hand to offer support. We can help you via email, over the phone, make ‘how to’ videos or come to see you for a 1-2-1 session. Email me at zoe@skillsontoast.co.uk or call 0117 230 3322.!

Page �52