• 10 hours
  • Easy

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 2/7/20

Mock up your site structure

The time has come to build out your site structure. For new websites that you're building from scratch, it's often a good idea to start your building process with a content-first approach. It's all too easy to get lost in design decisions before you actually have any content to work with; while you might end up with a beautiful site template, things can go south when you realize the content you add later doesn't fit everything you've just worked on! It also means that you'll make concessions to your content to fit the design, when it should be the other way around.

"Designing 'Content First' is about gathering your client’s assets and laying them out within the design in order of importance, optimizing the content for a web audience and ensuring that the message(s) and/or features that the client wants to get across to their users is consistent across all devices."

Source: Everyday Designer, "Change your focus and design 'Content First'"

For this reason, while building a WordPress site from scratch, you'll want to map out your site structure and populate your content with either sample or real entries before you start going wild with visual aesthetics.

In the course example project, my local band Cat Avalanche asked me to build them a site. Luckily, they already gave a list of the pages they want present: Home, About, Tour, Blog, and Contact. Here are some initial thoughts you might have, knowing these content needs:

  • There will be 5 total pages;

  • Each of these pages has different content types (home = general intro, blog = a lot of text, contact = social networks and possibly a form, etc.);

  • Each page should be accessible from the other pages.

The final product is much more imaginable just by knowing the site structure. Already we can picture a navigation bar including these items, how long each page might be, and more. Make sure you get answers to these questions early in your building process so you can design for your content every step of the way.

Add pages

Let's add pages to our WordPress site.

On the left of the Dashboard, hover over Pages and select All Pages. Feel free to delete the sample page Themecloud added for you by hovering and clicking Trash. Click the "Add Page" button to go to the page editor. Build entire pages using this simple form!

Pages menu
Pages menu
Page editor
Page editor

Title

The title of your page will be added to the site's navigation automatically and will also be the basis of its permalink. Each page title should be unique (makes sense)!

Editor
The page's big blank box is where you'll populate the page's content, including text formatting, images, etc.

Administrative options
The options on the right hand side give you control over the page status (published or not), its visibility, and its associated "parent" pages. 

For Cat Avalanche, I'll use the titles the band gave me and create 5 new pages to start. For each page I'll add the filler content that the band gave me, for example the Tour page:

Tour page filled out
Filled-out tour page

Publishing each page means it's immediately live online with its own URL, which you can get on the Edit page ("Permalink: ....").

Easy peasy!

Set a homepage

Navigate back to your site landing page. Notice how the home page of the WordPress site still isn't your Home page, despite your having created a page called "Home." :(

WordPress makes a list of posts the primary home page, which works well for blog platforms but less well for other uses!

Non-blog sites (or sites that want post content to be elsewhere) will need to change this default homepage. To make the Home page you just created the main landing page, navigate to Settings > Reading.

Reading settings
Reading settings

Under Front page displays, check the box that says A static page. You can then set a page as the home screen and move the notion of posts somewhere else, like a dedicated blog page.

For my local band Cat Avalanche, I made the front page my "Home" page and moved the posts to my "Blog" page.

Once you map out your site structure and add the necessary pages to WordPress, you'll find you've done a big chunk of work that leaves you free for the next step: choosing a visual theme.

Example of certificate of achievement
Example of certificate of achievement