!!!!! Beginner s Guide to WordPress

Transcription

1 Beginner s Guide to WordPress Course Notes

2 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

3 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

4 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 Enter your username and password, click Log In and this will take you to the WordPress Dashboard. Page 4

5 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

6 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

7 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

8 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

9 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. 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 image In 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. Page 9

10 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 clicked Attachment 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 clicked None - nothing happens when you click on the image The 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 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 or 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 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

13 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

14 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

15 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

16 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

17 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

18 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

19 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. 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. Subscribe to Comments - this plugin allows your readers to subscribe to comments for individual posts. Readers are notified by 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. Page 19

20 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: action=register - or use the plugin below: Managing and ing your subscribers Subscribe2 provides a comprehensive subscription management and notification system for WordPress blogs that sends notifications to a list of subscribers when you publish new content to your blog. Page 20

21 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

22 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

23 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

24 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. 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

25 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

26 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" Address - This is the address you entered when you installed WordPress. Enter the 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 to this address. In addition, if the option, An administrator must always approve the comment, is ticked, this 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

27 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

28 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 - With this option, you can set up your blog to publish s as blog posts. To do this, you would send an 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 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

29 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 ( 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

30 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 Day and name - An example of the day and name based structure is /03/31/sample-post/ Month and name - An example of the month and name based structure is Numeric - An example of the numeric structure is Post name - An example of the post name structure is Custom structure - In the box specify the custom structure you desire to use. One example is /archives/%year%/%monthnum%/%day%/%postname%/. Page 30

31 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: 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

32 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

33 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 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

34 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

35 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 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

36 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

37 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

38 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 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

39 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

40 10. By default the contact form will send contents of the form by 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

41 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

42 14. Now you need to make sure that when the user chooses one of those options, it gets ed to you. Go back to the Contact editing page. Scroll down to the Mail section. The Message body section is the content of the 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 ; you should see the new option in the message body. 16. If you want to change the address that the message goes to, to the left of the Message body section you can configure where the is sent, the from address/name and the subject line of the . In general the last two options will stay the same. Page 42

43 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

44 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. 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

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

46 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 - 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

47 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 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 then configure it with your Google Analytics account information under Settings > Google Analytics Dashboard. Page 47

48 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

49 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 - 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 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