< Back to Course

INF 270: WordPress — Week 4: Prepping for E-Commerce

Get your site up to speed

By the end of class, everyone's site should have roughly the following features:

  • A proper site title (not just "inf270_3")
  • A static homepage that users see when they visit your base URL.
  • An "About" page that tells visitors about you or your business.
  • A "News" or "Updates" page that shows your latest posts.
  • A navigation menu that links to all your content.

Set your active theme to "twentytwentyfive"

To simplify potential issues, make sure you deactivate the child theme we previously made.

  1. Go to Appearance -> Themes
  2. Find the theme called "Twenty Twenty-Five"
  3. Click "Activate" to set it as your active theme.

Set your page title

  1. Go to Settings -> General
  2. Find the field for "Site Title" and give it a name.
  3. Even if you have no idea what you'll be selling, put in a title that you can always change later.

Create your Home page

If you don't already have a page called "Home", follow these steps:

  1. Go to Pages -> Add Page
  2. In the "Title" space at the top, call it "Home"
  3. Enter a simple paragraph for now that says something like "This is the home page!" We will be adding more content to this later.
  4. Publish your page (big blue button in the top right)

Create your News page

This will be the page that is used to display your latest posts. If you don't already have one, follow these steps:

  1. Go to Pages -> Add Page
  2. In the "Title" space at the top, call it "News" or "Updates"
  3. You don't need to add any content to this page; WordPress will automatically fill it with your latest posts.
  4. Publish your page (big blue button in the top right)

Set your Front Page and Posts page

Even though we created these pages and titled them "Home" and "News", WordPress doesn't automatically know to use them as your front page and posts page. You need to tell it explicitly.

Remember that by default, WordPress shows your latest posts on the homepage.
  1. Go to Settings -> Reading
  2. Under "Your homepage displays", select "A static page"
  3. For "Homepage", select the page you created called "Home"
  4. For "Posts page", select the page you created called "News" or "Updates"
  5. Click "Save Changes" at the bottom of the page

Clean up the footer

Right now the page footer has links and text that we don't want. Let's clean it up by editing the "Footer" template part.

  1. Go to Appearance -> Editor
  2. Click "Patterns" and then "Footer"
  3. Click the middle "Footer" block, this is the default block that twentytwentyfive uses.
  4. Using the "List" view, delete all the blocks.
  5. Add a new "Group" block.
  6. Click the "+" in the Group block and add the "Site Title" block. This automatically shows the text that you entered under Settings -> General.
  7. Give your group some padding. With the "Group" block selected in the list view, look at the right sidebar and click the half-black half-white circle to edit the styles.
  8. Scroll all the way down the the "Dimensions" tab and increase the padding values as desired.
  9. Scroll up a bit and give the group a background color. You can pick one of the theme colors or select your own.
  10. Now add a "Navigation" block below the Site Title to display your page links.

Adjust your header template part

Let's make sure your site has a proper header with a navigation menu.

  1. Go back to the "Template Part" screen in Appearance -> Editor and select the default "Header" template part.
  2. If you don't have the "Navigation" block present, go ahead and add it so your site links show up. Note that it may be nested under several groups, so use your List view to look for it.
  3. Match the background color of the outermost group to the background color you set for the footer.

Spruce up the Home page

Now that your site is starting to look more complete, let's add some more content to the Home page using Patterns.

  1. Go to the Home page in the Pages section of the WordPress admin.
  2. Delete the placeholder paragraph we entered.
  3. Click the "Add New Block" button and select the "Patterns" tab.
  4. Under "Banners", select the third option from the top.
  5. Edit the placeholder content as needed.

Make the Home page template hide the page title

Right now our design is looking fine, but that big "Home" text is a bit distracting. Let's hide it by creating a custom template for the home page.

  1. Go back to the Site Editor and click "Templates"
  2. Right now our Home page is using he generic "Pages" template that is shared by all static pages. We need to make a unique template just for the homepage.
  3. Click the blue "Add Template" button.
  4. Select "Front Page" to apply this template to whatever page we have set as our front page. Remember doing that in Settings -> Reading?
  5. Now we have a blank template. Let's add the "Content" block, which will pull in whatever content was entered on the page. We should expect it to now show the Pattern that we previously published.
  6. Looks like the header and footer are missing! We need to add those to the template.
  7. Add the "Header" and "Footer" template parts to complete the template.
Important! Understand that templates define the layout of a page. They are not where you should enter individual pieces of content. That's what the Page editor is for.

Change the title of our Posts page

Right now if you click "News" it takes us to the posts page, but it says "Blog" instead of "News." Let's change that.

  1. In the Site Editor, select the "Blog Home" template part. This is the template applied to the page we assigned as the "Latest Posts" page in Settings -> Reading.
  2. Notice that the "Blog" text is hard-coded in this template. Change it so it says "News"
  3. Save the template and check your site. It should now say "News" on the News page.

Add a post

Let's add a real post to see how it displays.

  1. Go to Posts and delete the generic WordPress post.
  2. Create a new post announcing a new product. Use the featured image setting on the sidebar (make sure you have the "Post" tab selected and not "Block.")
  3. Add some text and a button. We'll link the button to an actual product page later.

Add an "About" page

Let's make a simple About page to tell visitors more about our site.

  1. Go to Pages -> Add New Page and title it "About"
  2. Add a simple paragraph for now. You can come back and expand it later.

Adjust the navigation menu

Notice how the "About" page is now listed first in our menu? Usually the home page is first. Let's fix it.

  1. Go to Appearance -> Editor and click "Navigation."
  2. Drag the pages around so the Home page is listed first.
  3. Save and confirm your changes by looking at the frontend.

Continue to refine

Use the rest of class to expand your content - add new blocks and text, try adding a "Contact" page, make some more posts, etc.