How to use WordPress to create a website STEP-BY-STEP INSTRUCTIONS

Transcription

1 How to use WordPress to create a website STEP-BY-STEP INSTRUCTIONS

2 STEP 1:Preparing your WordPress site Go to the Dashboard for your new site Select Appearance > Themes. Make sure you have Activated the Theme that you have selected for your web site Select Posts. If it is there, delete the post called Hello World by clicking the checkbox and selecting Trash Select Pages. Delete the About page (or any other page you find there) by clicking the checkbox and selecting Trash NOW CREATE YOUR SITE

3 STEP 2: Adding your home page plus your other 5 pages 1. Go to Dashboard >Pages > Add New 2. In the Title box, add the name of your first page In my example BT Media (my Home page) 3. Under Page Attributes > Template (on the RH side of the page) select the layout that you want for the page (sidebars etc) 4. Scroll down and remove the checkmarks from the Discussion area to prevent comments (if you don t have this box on your Theme, see the next slide) 5. Remove the social sharing buttons if you don t want them 6. Publish your page by clicking the Publish button Add your other 5 pages in the same way (following Steps 1-5 above), giving each the relevant title from your plan (you can, if you wish, have a different layout for your home page and your secondary pages) Don t add any content to your pages at this point just concentrate on establishing the skeleton for your site. You should have 6 pages.

4 STEP 3: These elements make your website look like a blog and need to be removed the next 2 slides show you how Remove Comments Box Remove Sidebar contents

5 Removing the comments box from your pages (if you haven t already done so) 1. Go to Pages > All Pages 2. Select your home page again and go to Quick Edit. 3. Remove the check mark from the Allow Comments box 4. Click Update 5. Repeat for each of your Pages

6 Removing unwanted widgets from the page sidebar From the LH sidebar menu of the Dashboard go to Appearance > Widgets Remove all the widgets from the right-hand sidebar by dragging and dropping them to the left into the main area of the page You may want to add Widgets later, but for now your objective is a blank canvas! View your page to make sure the sidebars are empty Sometimes widgets show up on your page that aren t listed under the sidebar on the Appearance -> Widgets screen If you can still see content in the sidebar when you view your page try dragging a blank Text Widget into the right-hand sidebar For more help on this look at

7 STEP 4: Set your homepage for the navigation bar From the LH sidebar menu of the Dashboard go to Settings > Reading Settings Click on Front Page Displays >Static Page then select the name of your home page (BT Media in my example) Save your changes (button is at the bottom of the page)

8 STEP 5: Customize your settings Go to Settings > General Change the Site Title to the name of your organization. Either delete the Tagline, or add one that is appropriate for your site Save your changes You can also change the header image (depending on your theme), but we will get to that later View your pages by clicking on the name of your site at the top of the screen

9 STEP 6: Navigation bar and Menus View your site (using the link in the top menu bar) Your navigation bar items (the same as the titles you entered earlier) will appear in alphabetical order, rather than the order that you showed in your plan From the LH sidebar menu of the Dashboard go to Appearance > Menus and use the tool there to create a custom menu with the items in the order that you wish. You can also change the wording here (see next slide for details) NOTE if you have an additional Home link on your navigation bar, make sure you have followed STEP 4

10 Step 1: Create a new menu and save it with a descriptive name Step 3: Rearrange your navigation bar elements here by dragging them into place Step 4: Select Primary Menu Step 2: Select the pages for your navigatio n menu and click Add to Menu Step 5: Click Save Menu

11 Adding child pages to your navigation bar (if applicable) On my site map, I have shown that the page Software Review is accessible only from the Social Listening page If you have a page like this then you will want it to appear in a drop-down menu on the navigation bar Edit your page In the Page Attributes, select the parent page Click Update Your page navigation will now show the child page in drop-down menu Note you can also do this via the custom menu tool by indenting the page name (see previous slide)

12 STEP 7: Adding a header image or a featured image Some themes allow only one header image so it may be the same on all your pages. Investigate the options for your theme. From the LH sidebar menu of the Dashboard go to Appearance > Header Upload the image you have prepared (you will need to check the size for your particular theme) You can crop the image to fit using WordPress, but it is better if you have prepared it earlier, along with your other images You can also add/remove Header Text to/from the image if you wish Featured images (used by some themes) are added at the individual page level

13 Checkpoint: before you add any content make sure your site has: 1. 6 pages including your homepage (no content at this point) 2. A custom navigation bar showing the navigation links in the same order as on your plan 3. A blank sidebar (no comments, meta, etc) 4. Custom header or featured images 5. A custom tag line (or none at all)

14 STEP 8: Adding content to each page Click on Pages and you will see a list of all the pages in your site Select the page you want and click Edit You can edit a page as many times as you want to, so there is no need to worry about getting it perfect on the first try Add your text, images, links, and video Click Update and Preview Changes You can edit using either / both the Visual and Text toolbars (see next slide for illustration)

15 Add images so that the text wraps around them Create embedded links to your sources Add video

16 Adding images to your pages 1. Resize all your images so they match your plan (use a tool like Canva Photo Editor or the image editor of your choice) 2. In WordPress, open the page you want to Edit 3. Place your cursor where you want the image to go. 4. Click on the Add Media button (camera icon) and upload your file 5. Add the Alt Text (from your plan) 6. Use the align controls to position the image on the page 7. In the Size options select Full Size 8. Click Insert into Post See illustration on next slide

17 Alignment on page Alt text

18 Adding content Add all of your content remember you can edit your pages at any time Use the Text Widget to add text or images to the sidebar (you can use html to add these) If you want to remove the Like and Share buttons from your pages scroll down in edit mode and uncheck the relevant boxes See the next section for information on making text into clickable links, adding a YouTube video, and embedding a Google Docs form

19 MAKE TEXT INTO A CLICKABLE LINK EMBED A VIDEO FROM YOUTUBE EMBED A GOOGLE DOCS FORM

20 Making text into a clickable link Step 1: Write the text in the usual way

21 Step 2: Highlight the phrase you want to make into a link. Make it as descriptive as possible so people know what to expect when they click. Making text into a clickable link Step 3: Click the link icon on the toolbar and a dialog box will appear

22 Step 4: Copy and paste the URL into the dialog box, or link to other pages in your site Making text into a clickable link Step 5: If you want the page to open in a new window or tab, then check this box Step 6: Whatever you write in the Title box will appear when someone mouses over the link on your page Step 7: Click Add Link and that s it!

23 Embedding a video from Get the URL for sharing the video from YouTube Edit the page you want the video to appear on. Place your cursor where the video will go Select Add Media Select Insert from URL (This is easier than using the Insert YouTube function) YouTube

24 Embedding a Google Docs form Once you have finished designing and testing your Google Docs form you need to embed it into the relevant page of your web site Google creates the embed code that you need, so you simply have to paste it into your page

25 When you have created your form, click Send Form to get the embed code from Google Docs

26 In WordPress edit your page in Text view and paste in the embed code where you want it to appear. You will have to preview the page to see the embedded media