HOW TO USE WORDPRESS TO BUILD A WEBSITE A STEP-BY-STEP GUIDE

Size: px

Start display at page:

Download "HOW TO USE WORDPRESS TO BUILD A WEBSITE A STEP-BY-STEP GUIDE"

Edward Hopkins
5 years ago
Views:

1 HOW TO USE WORDPRESS TO BUILD A WEBSITE A STEP-BY-STEP GUIDE

2 YOUR WEBSITE How to login Go to your website and add /wp-admin: This will bring up the login screen. Enter your username and password. Keep your password safe and don t change it

3 1. Settings general In your dashboard go to: Settings general

4 1. Settings general Change your site name and tagline remove Just another WordPress site. It s cheesy.

5 1. Settings general Do not change these URLS under any circumstances it WILL break your website

6 1. Settings general You can change any of the other settings, including the address if you need to

7 1. Settings general DON T forget to SAVE changes always update/save/publish after any changes via the blue buttons on most sections of the WordPress dashboard.

8 2. Settings reading The next step is to give your site a homepage. By default WordPress is set up to display your latest posts on the front page. That s how blogs work. But for a website we want a fixed homepage. So, first thing to do is create a new page called Home

9 2. Settings reading So, first thing to do is create a new page called Home So go to: pages add new

10 2. Settings reading You don t need to add any content, just publish it for now

11 2. Settings reading Now go to Settings Reading on the dashboard. By default the front page displays your latest posts. You need to change this so the front page displays your home page.

12 2. Settings reading Click the radio button A static page and then use the drop-down box to make your home page the front page. If you have a blog you can make it your posts page. Don t forget to save your changes!

13 3. Settings permalinks The final settings change you need to make is the permalinks. By default, every time you create a page it will be given a number. For SEO, page names are better for Google and the like. So

14 3. Settings permalinks You need to change the setting to Post name

15 4. Pages & page attributes Now it s time to create your pages. Go to pages add new. Here I m creating a new page called newspapers and it will appear on the main navigation. That s because in the Page Attributes I haven t assigned a parent page.

16 4. Pages & page attributes You can see it has created a new item on the top navigation bar

17 4. Pages & page attributes If I want it to be a sub-page or child then I need to choose a parent page, in this case I ve chosen Media

18 4. Pages & page attributes You can see it is now a sub-page of Media

19 4. Pages & page attributes Two other aspects of the page attributes 1. Most themes have different templates this theme has three options which all display differently. Experiment to see which works.

20 4. Pages & page attributes 2. You can also set the order of Parent pages, usually from left to right. Most navigation means that number 1 is furthest to the left. In some themes this only works if you assign a number to all parent pages. Here I want the home button to be the first button on the left so I ve assigned the number 1.

21 5. Post & Category navigation You can also build your site using posts and categories, as well as pages. You might want a static home page but then create posts in different categories. This allows you to have multiple pieces of content in each category.

22 5. Post & Category navigation In this example, the homepage is a static page but I have created a category called animals. I have then added sub-categories (cats, dogs etc) to create the dropdown navigation.

23 5. Post & Category navigation To do this you have to 1. Create the category, by going to the categories section under posts on the dashboard

24 5. Post & Category navigation Here I am adding a new sub-category, sheep, under the animals category

25 5. Post & Category navigation Once I press add category button you can see the new subcategory sheep in the list on the right.

26 5. Post & Category navigation Then I add it to the menu.

27 5. Post & Category navigation And here you can see it has been added to the dropdown menu

28 5. Post & Category navigation So now when I create a post I need to assign it to a category. Here s one about sheep, and I ve checked the category in the dialogue box

29 5. Post & Category navigation So that post now appears in the sheep sub-category, under animals.

30 5. Post & Category navigation You can use any combination of pages and categories to build your navigation. It s best to plan and map it out with pen and paper before you start. Page navigation is simpler, but categories means you can have multiple individual posts in each section.

31 6. Widgets Widgets allow you to add small pieces of content and functionality in certain defined areas of your site. By default a set number of specific widgets are available when you open up your site.

32 6. Widgets On the right hand site are the areas you can place the widgets

33 6. Widgets To activate a widget, just click and drag it into the area you want it to appear. Then fill in the fields as required.

34 6. Widgets It is important to understand how all the different widget areas work. It is often overlooked.

35 6. Widgets Each theme offers different type of widget areas. In this theme I have the main sidebar, three areas in the footer and one that only appears when I use the showcase template in page attributes (see section 4.1)

36 6. Widgets To fully understand how the different areas display, you have to have an active widget in each area.

37 6. Widgets To fully understand how the different areas display, you have to have an active widget in each area. Best to use a simple piece of text with a text widget.

38 6. Widgets When you open your site for the first time, there will be some preinstalled widgets. Click each one and drag it out to the left so the widget areas are empty

39 6. Widgets To fully understand how the different areas display, you have to have an active widget in each area. Best to use a simple piece of text with a text widget. That s what I ve done here. (In this theme, the Showcase Sidebar area is left inactive as it only works with the showcase template.)

40 6. Widgets Here you can see how all these four areas display.

41 6. Widgets So make sure you fully understand your theme by activating all the widget areas with a simple text widget. You will then begin to understand more about how your theme works. You can then add whatever widget/content you wish

42 6. Widgets By installing the Dynamic Widgets plug-in, you can then assign different widgets to specific pages (see plug-ins, section 7) Click the Dynamic link The choose the page(s) where you want the widget to appear

43 7. Custom menus Custom menus allow you to create extra navigation. Some themes offer specific menu positions (look in the customise section) or you can use the Custom Menu Widget to put your menu in a widget area. First you need to create a new menu. Go to Appearance menus and click create new menu. Give it a name.

44 7. Custom menus This one is called Menu Demo

45 7. Custom menus Select the pages you want in your menu from the left hand side and click add to menu and then Save menu.

46 7. Custom menus If you are using posts and categories navigation you can also add them to your menu as well.

47 7. Custom menus To make your categories sub pages of a main category, once they re added to the menu, just grab and drag slightly to the right as shown below.

48 7. Custom menus As long as your theme allows it, this will create a drop down of sub categories.

49 7. Custom menus Go back to your widgets page and drag the Custom Menu widget into one of the widget areas.

50 7. Custom menus Select the menu you would like to appear. Here I ve chosen the menu I ve just created

51 7. Custom menus Now you can see I have a new navigation menu in the sidebar. It can be useful to highlight specific pages on your site, and creates extra interest and navigation.

52 7. Custom menus Now you can see I have a new navigation menu in the sidebar. It can be useful to highlight specific pages on your site, and creates extra interest and navigation.

53 8. Plugins Plugins expand the functionality of the site allowing you to add galleries, maps, sliders, video galleries and many more. There are now almost 40,000 free plugins available through the dashboard, so whatever you want to do, there s probably a plugin for it. There are two plugin types: 1. New widgets to use in your widget areas. Use the word widget in your search if that s what you want. 2. Plugins that work across the site. Finding out how they work can be a bit tricky. You have to do a bit of detective work.

54 8. Plugins After you ve done a search for a plugin, the best place to start is to look at the screenshots. This often helps you understand how they work. Click on more details

55 8. Plugins Then check out the screenshots, which will give you an idea of how the plugin works

56 8. Plugins Another good guide is how many downloads there have been. A plugin with 100,000+ downloads is probably going to do the job better than one with 20. Googling plugins (make sure you include the word WordPress in your search term) will often help you understand them. How to use NextGen WordPress plugin for example will lead to a good video tutorial. Here are some useful plugins and a quick guide to how they work:

57 8. Plugins Here are some plugins you ll probably need and a quick guide to how they work

58 8. Plugins Plugin: Simple Image Widget Search for: Simple Image Widget How does it work: For some reason, most themes don t have a preloaded image widget. You ll probably need one to display images in your sidebar. There are lots of them. I use this one below.

59 8. Plugins Plugin: Dynamic Widgets Search for: Dynamic Widgets How does it work: Gives you an option on each widget to chose the page where you want it to display. Click the Dynamic link The choose the page(s) where you want the widget to appear

60 8. Plugins Plugin: NextGen Gallery Search for: NextGen Gallery How does it work: Allows you to insert galleries into a page. Has options for the type of gallery. Green square in visual editor and gallery button on main menu.

61 8. Plugins Plugin: Meta slider Search for: Meta slider How does it work: Allows you to insert sliders into a page from a simple button. Also on the main menu.

62 8. Plugins Plugin: Meta slider Search for: Meta slider How does it work: Allows you to insert sliders into a page from a simple button. Also on the main menu.

63 8. Plugins Plugin: Page Builder by SiteOrigin Search for: Page Builder by SiteOrigin How does it work: Allows you to add different elements to the page

64 8. Plugins Plugin: Page Builder by SiteOrigin How does it work: Uses simple buttons to allow you to add all types of content. You can add rows and format them. The add widgets or content.

65 8. Plugins Plugin: WP Hide Title How does it work: Allows you to hide page and post titles.

66 8. Plugins Plugin: WP Hide Title How does it work: It adds a new dialogue box on the CMS

67 8. Plugins Plugin: WP Hide Title How does it work: Unchecked it will display the page title

68 8. Plugins Plugin: WP Hide Title How does it work: Check the box and the title disappears

69 8. Plugins Plugin: WP Hide Title How does it work: Bingo! No title.

To upgrade to ifeature Pro visit:

To upgrade to ifeature Pro visit: 1 ifeature Free Documentation for ifeature v1.0.7 (last updated 4/26/2011) TABLE OF CONTENTS: Topic Page(s) Installing ifeature 2 Templates and Widgets 3 imenu 4 ifeature Settings 5 General Settings 6