Creating Pages: Free WordPress Tutorial

Topics Covered in This WordPress Tutorial:

Creating the Page Template, Adding the Title, Adding New Pages, Changing the Site’s Front Page, Inserting Images

Exercise Preview

Exercise Overview

Now that the blog section of the site is done, we can make a page template. Pages in WordPress contain a single post of info, like a normal, simple webpage. Just like single.php, WordPress has a reserved name for the page template, called page.php. If the theme contains a file called page.php, WordPress will automatically use it as the page template.

Making Page.php

We want page.php to be very similar to the single.php page, so it will be best to make a duplicate.

1. In a code editor, open single.php from the mrpTheme folder, if it isn’t already open.

2. Save the file as page.php into the mrpTheme folder located here:
   • Mac: Hard Drive > Applications > MAMP > htdocs > mrp > wp-content > themes
   • Windows: C: > xampp > htdocs > mrp > wp-content > themes

3. This page doesn’t need all the comments and post info, so delete the <h2> title, time & tags paragraph, and the comments div, leaving only the_content() in the Loop as shown below:

   <?php get_header(); ?>
      <div id="primary">
         <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <?php the_content(); ?>
         <?php endwhile; ?>
         <?php endif; ?>
      </div><!—end primary—>
      <?php get_sidebar(); ?>
   <?php get_footer(); ?>

4. Above the Loop, we want an <h1> showing the page title. Add the following <h1> and function on line 2:

   <?php get_header(); ?>
      <h1><?php the_title(); ?></h1>
      <div id="primary">

5. Save the file.

6. Let’s test these out. Open up a browser and go to:
   • Mac: localhost:8888/mrp
   • Windows: localhost/mrp

7. Click the Sample Page link to see the page.php file in action.

Creating New Pages

Now that we have our page template set up, we can make new pages through the Dashboard. Right now, we just have the default Sample Page page that every WordPress install starts with.

1. In the browser, go to:
   • Mac: localhost:8888/mrp/wp-admin
   • Windows: localhost/mrp/wp-admin

2. Log in if needed.

3. We want to delete the default page. On the left, click Pages.

4. Mouse over Sample Page to see its options, then click Trash.

5. Now we can add our pages. At the top, click Add New.

6. In the top-right corner of the post section, click the Text tab.

7. For the title, type: Welcome to MRP

8. The content we want is in the theme folder. Switch back to your code editor.

9. Open content-index.html from the mrpTheme folder.

10. Select all (Cmd–A (Mac) or CTRL–A (Windows)) the code.

11. Copy it (Cmd–C (Mac) or CTRL–C (Windows)).

12. Close it.

13. Switch back to the Add New Page window in the browser.

14. Paste (Cmd–V (Mac) or CTRL–V (Windows)) the code into the main text area.

15. Click Publish.

16. At the top, click Add New.

17. For the title, enter: Contact

18. Switch to your code editor.

19. Open content-contact.html from the mrpTheme folder.

20. Select all the code.

21. Copy it.

22. Close content-contact.html.

23. Switch back to the Add New Page window in the browser.

24. In the content section, paste (Cmd–V (Mac) or CTRL–V (Windows)) the code.

25. Click Publish.

26. At the top, click Add New.

27. For the title, type: Latest News

28. We’re leaving this one blank because the blog will go here, so just click Publish.

Changing the Site’s Front Page

We’d like the front page of the website to show the Welcome to MRP page by default. Right now it shows the posts, which we want on the Latest News page. There’s a setting in the Dashboard that controls this.

1. On the left, mouse over Settings and click Reading.

2. For Front page displays, check A static page and choose:

   Front page:	Welcome to MRP
   Post page:	Latest News

3. Click Save Changes.

4. At the top of the page, click on the Monteith Restoration & Performance title to test out the changes to the site.

5. Notice that you see the Welcome page first. Click Latest News to see the blog posts. Whoops, the blog page title is wrong.

6. The blog page is controlled by the index.php file. Switch back to your code editor.

7. Switch to index.php. (If it isn’t open, open it from the mrpTheme folder.)

8. Replace the static <h1> title (around line 2) with a dynamic PHP title:

   <?php get_header(); ?>
      <h1><?php the_title(); ?></h1>
      <div id="primary">

9. Save the file.

10. Let’s test these out. In the browser, go to:
    • Mac: localhost:8888/mrp
    • Windows: localhost/mrp

11. Click Latest News to see the blog posts. Hmm, now the blog page is showing the title of the most recent post. That’s not right—we will need to use a different WordPress function that pulls in the page title.

12. Switch back to your code editor.

13. Make the following changes to the PHP title (that’s a pair of single quotes inside the parentheses):

    <?php get_header(); ?>
       <h1><?php wp_ title(''); ?></h1>
       <div id="primary">

    NOTE: The wp_title() function will work in this case, but by default it will put >> in front. The ('') that we’re feeding it says to not put anything in front.

14. Save the file.

15. Let’s test these out. In the browser, go to:
    • Mac: localhost:8888/mrp
    • Windows: localhost/mrp

16. Click Latest News to see the blog posts. That’s better.

Inserting Images

1. Let’s add an image to the Welcome page. In the browser, go to:
   • Mac: localhost:8888/mrp/wp-admin
   • Windows: localhost/mrp/wp-admin

2. Log in if asked.

3. On the left, click Pages.

4. Click the Welcome to MRP page.

5. Click the Visual tab.

6. Click at the beginning of the first heading, About Us.

7. As shown below, click the Add Media button to upload an image.

   

8. In the Upload Files tab, click the Select Files button and navigate to:
   • Mac: Hard Drive > Applications > MAMP > htdocs > mrp > wp-content > themes > mrpTheme > img
   • Windows: C: > xampp > htdocs > mrp > wp-content > themes > mrpTheme > img

9. Double–click get-to-know-us.jpg.

10. After the image appears, on the right next to ALT Text, type: Get to know us

11. Choose the following options for the image:

    Alignment:	Right
    Link To:	None
    Size:	Full Size

12. Click the Insert into page button.

13. Click the Update button.

14. At the top, click the Monteith Restoration & Performance title to see the site.

    The image is in the heading, but not floating to the right. We set right alignment on the image, so why didn’t it work? When you set align left or right, all WordPress does is apply a class to those images. In this case, it applied the .alignright class. We need to style those classes in our CSS file.

15. Switch back to your code editor.

16. Switch to style.css. (If it’s not open, open it from the mrpTheme folder.)

17. Our static HTML file had classes for this, but they were named imgRight and imgLeft. Locate .imgRight and .imgLeft starting around line 426. They are above the comments and #postsNavLink styles.

18. Change their names to .alignright and .alignleft to match WordPress’s classes.

19. Save the file.

20. In the browser, reload:
    • Mac: localhost:8888/mrp
    • Windows: localhost/mrp

    Now the image should be properly floated right.

Bonus: Finishing the Rest of the Pages

There are three more pages to add. Their content is stored in HTML files in the mrpTheme folder.

1. Open a browser and go to:
   • Mac: localhost:8888/mrp/wp-admin
   • Windows: localhost/mrp/wp-admin

2. Log in if asked.

3. On the left, mouse over Pages and click Add New.

4. For the title, enter: About Us

5. Switch to your code editor.

6. Open content-about.html from the mrpTheme folder.

7. Select all (Cmd–A (Mac) or CTRL–A (Windows)) of the code.

8. Copy it (Cmd–C (Mac) or CTRL–C (Windows)).

9. Close the file.

10. Switch back to the Dashboard browser window.

11. In the top-right corner of the post section, click the Text tab.

12. Click into the main text area and paste (Cmd–V (Mac) or CTRL–V (Windows)) the code in.

13. Click Publish.

14. At the top, click Add New.

15. For the title, enter: Facilities

16. Switch to your code editor.

17. Open content-facilities.html from the mrpTheme folder.

18. Select all (Cmd–A (Mac) or CTRL–A (Windows)) of the code.

19. Copy it (Cmd–C (Mac) or CTRL–C (Windows)).

20. Close the file.

21. Switch back to the Dashboard browser window.

22. In the content section, paste (Cmd–V (Mac) or CTRL–V (Windows)) the code in.

23. Click Publish.

24. At the top, click Add New.

25. For the title, enter: Services

26. Switch to your code editor.

27. Open content-services.html from the mrpTheme folder.

28. Select all (Cmd–A (Mac) or CTRL–A (Windows)) of the code.

29. Copy it (Cmd–C (Mac) or CTRL–C (Windows)).

30. Close the file.

31. Switch back to the Dashboard browser window.

32. In the content section, paste (Cmd–V (Mac) or CTRL–V (Windows)) the code in.

33. Click Publish.

34. At the top, click the Monteith Restoration & Performance title to see the site.

35. Click the navbar links to test out all the pages.