Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Code
  2. WordPress

WordPress as a CMS: Part 3

Read Time:19 minsLanguages:

We've designed our site and converted it into a static HTML file in the previous two tutorials. The last part of this series we will setup WordPress as a CMS and convert our HTML file to a WordPress compatible template.

Also available in this series:

  1. WordPress as a CMS: Part 1
  2. WordPress as a CMS: Part 2
  3. WordPress as a CMS: Part 3

This tutorial includes a screencast available to Tuts+ Premium members.

Let's Install WordPress

Head over to WordPress.org and download the latest version of WordPress.

Unzip the archive and move all the files inside the WordPress folder onto your local or web server.

Create a blank MySQL database and remember all your login information, you'll need it in about 3 seconds.

Open up your browser and head over to the folder that holds all your WordPress file. You will be prompted to create a configuration file. Click Create Configuration File

Now we need enter in our MySQL database information and run the install.

If everything went fine with the install you will be presented with your new login. Copy your new password and login into the WordPress backend. Once you login to the backend you will be suggested to change your password. Do this now!

Now that we are setup with our new user we can begin to setup WordPress to be used as a CMS. First we are going to enable permalinks to make our paths good looking. Hover over Settings and click the arrow on the right to drop down some more options and click on Permalinks.

We are going to use the Day and name options, so select that option and hit Save Changes.

WordPress provides us with a dummy post as well as a dummy page so we are going to delete those and add any pages that we need.

Hover on Posts and click on the arrow to drop down the options. Click on Edit. If you hover over Hello World! some more post options will appear, just click on Delete and then confirm the action.

Note: This step isn't necessary, I just like to keep everything neat and tidy.

Expand the Pages options and click edit then delete the About page.

In the Pages left sidebar click on Add New so we can add our pages.

Fill in the title and whatever content you want on your page and then once you are done hit Publish over on the right side of the page.

If you don't want the page to be visible you can hit Save Draft to work on it later.

We want to create some child pages of Pricing & Signup, so when you get to making the pages for that we need to change one option in the page editor page.

In the screenshot above I've highlighted the option that needs to be changed. We want Cheap Plan to be a child page of Prices & Signup so we are going to tell WordPress that Prices & Signup is the parent of Cheap Plan. This will allow us to create specific navigation for our theme.

Once you have all your pages created your Edit section of Pages should look like the screenshot below.

Everything we need to setup for right now has been setup, so we can now move onto converting our HTML file to a WordPress template.

Open up your editor and navigate to your WordPress root folder.

We want to navigate to wp-content > themes.

We are going to delete the classic theme. Again, this is just to keep all our folders neat and tidy. So delete classic and duplicate default. Rename default to wordpress_cms.

Go into the wordpress_cms folder and delete rtl.css and the images folder.

Next, open up style.css and delete everything but the main comment section at the top of the file.

We have created our own style.css file that lives inside some folder. This style.css file tells WordPress some information about our template so even though we have our own style.css file, we still need to keep this one.

Edit the style.css file to look something similar to the code below. Change my information to fit your information!

Save this file and go back to your browser. Expand the Appearance sidebar and click on Themes. You should see our WordPress CMS theme as an option. Click activate to make WordPress use our new theme.

WordPress is now ready to accept our pre-coded site!

If you navigate to the WordPress root in your browser, you should see the main WordPress page with no styles applied to it.

Full Screencast

Creating The Theme

Copy the inc and img folders and all it's content into WordPress_cms.

We need to tell WordPress that we want to use our stylesheets instead of it's old ones so open up header.php

We are going to delete some unnecessary code. I've commented out the areas you need to delete so please refer to the code below.

You can also delete from the body tag. We should have a pretty simple header file now, so lets add our 2 css files into our theme.

Right below the title tag we are going to use the normal link tag.

You'll notice that we are using a function called bloginfo(). This function is used to grab information about your current blog. We may move servers or switch up folder structure in the future so we don't want to put in hard paths to our stylesheets so we pass a value of template_url which returns the path of our current template. This is very powerful if you plan on creating template that other people will use because you don't know how their WordPress is setup.

If you load up the site, you should see that some of our default styles from our stylesheet are be applied to the site.

Next, open up footer.php and delete everything in between the comments and wp_footer().

Also, open up sidebar.php and delete everything after the comments. We are now ready to copy over our HTML containers to our WordPress files.

Open up the index.html file from our previous tutorial and copy everything in between the

tags. Paste this code into header.php.

To make things easier, lets delete all the tags and content inside each of the containers so that only the container divs are left.

This is where it can get a little bit tricky. We need to span this code between 4 files. I've commented out where each piece needs to go, so go ahead and copy and paste each section into the file it belongs in.

Alright, just to make sure everything is working the way it should, lets double check that each file is filled with the proper content. Your files should look like the examples below.



If your pages are looking good, lets move on. If they don't, make them look like the examples above.

If you go back to your browser and add about to the end of the address and hit enter. This should take you to your about page.

We are going to start with creating our header and navigation elements, so if you don't already have it open, open up header.php

Inside header_container we need to add our h1#logo tag.

We are using the bloginfo() function again, but this time we are grabbing our blog's name.

If you refresh you should see our awesome logo! Now we need to add our navigation.

Instead of hard coding in our navigation items, we are going to use a built in WordPress function called wp_list_pages(). This will allow us to control which page items we want to show as well as creating links to each of those pages.

We are passing some options to the function so that we can have WordPress list out the pages exactly how we want it to.

The first option we are sending is title_li. By default WordPress generates a title li that displays Pages. We don't want this, so we just send a blank value with it.

The second option is depth. Again, by default WordPress will render out a list of every page that is being included, this includes child pages. We don't want this to happen, so we pass it a variable of 1 so WordPress will only display top level pages.

The final value is include. We don't want to show every page we have created, we only want to show About, Pricing & Signup and Contact. We are passing the ID's of each page we want to display. The ID's from the example will not match your page ID's so MAKE SURE YOU CHANGE THEM TO YOUR ID'S

To get the ID of the pages navigate to the edit page section. When you hover over the page link the ID can be found in the link. i.e.: wp-admin/page.php?action=edit&post=15

All the available options can be found at http://codex.WordPress.org/Template_Tags/wp_list_pages

If you refresh the page, we should have some good looking navigation.

We are lucky, we can use this exact function to take care of our sidebar as well as our footer navigation. We only have to make a few tweaks to the options we are sending it to suit each need.

Open up sidebar.php and write a little bit of code inside our sidebar_container.

We only want to show our sidebar navigation if the current page is a child page. We do this by checking to see if the current page has a value assigned to post_parent. If the page isn't a child, this value will be 0.

Information about both posts and pages is housed in the $post variable. If you print_r($post) you will be able to see all information about the post that is available to you.

Now that we are checking for a post parent, we need to list out all the children of our parent. To do that we pass a variable of child_of and pass the current post_parent ID.

If our parent ID is 5 we are telling wp_list_pages() to list out every page that has a post_parent ID of 5. It's very useful when dealing with multi-level navigation.

Next we are going to quickly put together our footer and then we will move onto displaying some content onto our pages. This will pull the entire site together and we can begin putting the final touches on our new WordPress driven site.

Open up footer.php and for the last time add the wp_list_pages() function.

This function is exactly the same as our header navigation but instead of using include we are using exclude to remove all the current main navigation items from our footer navigation.

The ID's from the example will not match your page ID's so MAKE SURE YOU CHANGE THEM TO YOUR ID'S

One last template file to tweak before we are finished. Open up post.php and delete everything in between get_header() and get_sidebar().

This is where we are going to add our content_container

When it comes to displaying your post and page content WordPress uses a special function set called The Loop. In a nutshell, it takes your content and formats it, preparing it to be shown to the end user.

Inside our content container we are going to add an if statement and a while loop.

First we check to see if we have any posts, if we do we loop through each post and setup various function that we can use to display the content.

Inside our while loop we are going to add all of our remaining content.

We are using a few new functions to display the content of our page. The nice thing about WordPress is many of the functions use plain english for the naming conventions.

We needed the title of the page so we use the_title() to display it. We can also grab the title of any post or page by using get_the_title($post_id) and passing the post ID as it's only variable.

We only want to show the second heading if we are on a child page, so we use the if($post->post_parent) again to check if we are on a child page, and if we are we get the title of that post parent using get_the_title().

Last but not least, we use the_content() to display any content that the page has.

Wait, our sidebar seems to be in the wrong spot on the page, so take get_sidebar() and move it underneath get_header(). Now our sidebar comes before our content.

Tying Up Loose Ends

If you load up root of your WordPress install in your browser you should be greeted with a Not Found error.

This is because by default WordPress' main page is a list of all your posts. We aren't using WordPress for blogging, so we need to tell WordPress to use one of our pages instead.

Go back to your WordPress backend and load up the Reading page in Settings. The first option is Front Page displays and the selected option should be Your Latest Posts. We want to select A static page and use the drop down to change our front page to whichever post you want. For this example I'm going to point it to our About page.

Save the changes and reload the root page our your WordPress install. It should redirect you to the About page.

The next thing you'll notice is that our navigation is not longer showing an active state even though we are on the proper page. This is because for our static page we were using a class of active. wp_list_pages() assigns a different value for active states so we just need to add some classes to our stylesheets. The 2 classes we are going to be adding are .current_page_item and .current_page_parent.

Go ahead and use the code above to add the classes to both our top navigation and side navigation. Refresh the page and you should have an active state for whatever page you are currently on.

Two more changes and we can wrap this up.

Our Pricing & Signup page is really just a title for it's child pages but WordPress treats it as it's own page. We want to redirect the user to the Free Plan page when they click on Pricing & Signup.

One of the many great things about WordPress is it's plugin capability. There are 1000 of plugins that are written for WordPress that add endless functionality that isn't available out of the box. We are going to install a redirect plugin that we can use to redirect the user.

The plugin we are going to be using can be downloaded here: http://WordPress.org/extend/plugins/redirect/. Download the plugin and move the redirect folder into wp-content/plugins.

Now we have to activate the plugin in the WordPress backend so we can use it. In your backend click on Plugins and you should be redirected to a page with all the available plugins.

Find our redirect plugin and hit Activate. Our plugin is now activated.

Each plugin works differently so make sure you read the instructions for each before you start using them. Our redirect plugin uses custom fields to tell WordPress which post we want redirected and where. Goto Pages and click edit underneath our Pricing & Signup page.

Right underneath the editor textarea is the Custom Fields section. The first input we are going to give a value of redirect so WordPress knows that we want to redirect and the second input is going to be the address to our Free Plan page. Once you are done hit Add Custom Field and be sure to Update Page at the top right.

If you go back to your browser and click Pricing & Signup you will be redirected to the Free Plan page.

Sorting Everyone Out

Our Pricing & Signup navigation seems a little bit out of order. Our free plan is located last when it should be at the top. We can set the post order right in the backed so load up your main Pages section and hover over Free Plan and click on Quick Edit.

The field we want to update is Order. Change the value from 0 to 1 and hit Update Page. Do the same for Cheap (order 2) and Expensive (order 3) plans updating the order accordingly.

Refresh our browser to see the new updates.

This also applies to our header and footer navigation so if you do not like the order they are in feel free to change them.

I Like Custom Things

Custom fields are awesome. They let us pass specific information for each post. We can add images to our post using the Media Uploader, but for this example we are going to use custom fields to pass information to our page.php file.

Open up your About page in the WordPress Page editor.

We are going to use the Media Uploader to upload an image to use for our header so right beside Upload/Insert click on the picture icon.

I'm going to upload the banner.gif we had used before so click Select Files and find it on your computer.

Once you file has uploaded you should be presented with some information about your image. Near the bottom of this modal window you should see an input named Link URL and the path to your image. We want to copy this url. If this input is blank you can click the File URL button right below and it will update the input.

Once you have this path copied we can close this window and head over to the Custom Fields section. The first input we are going to use is header_image and the second value is the path to our file.

Add your custom field by pressing Add Custom Field and Update Page in the top right hand corner.

Open up page.php and find the header_image div.

We want to check to see if there is any image that needs to be shown and if there is we will grab the path and display the image.

First we use get_post_meta() to assign the path of our image to the variable $image.

The first argument we send to get_post_meta() is the ID of the page we are on. The second value is the name of the custom field which in our case is header_image. The last argument tells WordPress that we only want to return 1 custom field.

Then we check to see if $image is empty. If there is no custom field named header_image we don't display the image, other wise we display the header_image div as well as the image inside of it.

We echo out the value of $image as the image source to display our image.

Refresh you browser and view the Contact page. You shouldn't see any images. If you load up the About page you should see our image as well as the blue rounded box that holds it.

That is it. We've done it! Take a moment to congratulate yourself for making through the entire tutorial and dealing with my hopefully decent teaching style.

We've only barely scrapped the surface of WordPress but I've given you a solid foundation to start going deeper into WordPress.

If you want to continue learning what kind of functions WordPress has to offer I suggest you take a look at the WordPress Codex.

When you run into problems or are trying to accomplish something that WordPress doesn't offer give the internet a quick search. Chances are someone has come across the same problem and 99% of the time there is a plugin to fix it!

Again, thank you for reading the tutorial! I hope you've learned a lot and can now start offering your clients a solid CMS to make both your life and theirs easier.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.