Advertisement

WordPress as a CMS: Part 3

by

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!

 
 
	/* 
	 
	Theme Name: WordPress CMS 
	Theme URI: http://your-site.com 
	Description: Using WordPress as a CMS. NetTuts+ Tutorial! 
	Version: 1 
	Author: Matt Vickers 
	Author URI: http://envexlabs.com/ 
	 
	*/

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.

 
 
	<?php 
	/** 
	 * @package WordPress 
	 * @subpackage Default_Theme 
	 */ 
	?> 
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
	<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> 
	 
	<head profile="http://gmpg.org/xfn/11"> 
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> 
	 
	<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title> 
	 
	<!-- START DELETING --> 
	 
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> 
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> 
	 
	<style type="text/css" media="screen"> 
	 
	<?php 
	// Checks to see whether it needs a sidebar or not 
	if ( empty($withcomments) && !is_single() ) { 
	?> 
		#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-<?php bloginfo('text_direction'); ?>.jpg") repeat-y top; border: none; } 
	<?php } else { // No sidebar ?> 
		#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; } 
	<?php } ?> 
	 
	</style> 
	 
	<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?> 
	 
	<!-- STOP DELETING --> 
	 
	<?php wp_head(); ?> 
	 
	</head> 
	 
	<body <?php body_class(); ?>> 
	 
	<!-- START DELETING --> 
	 
	<div id="page"> 
	 
	 
	<div id="header" role="banner"> 
		<div id="headerimg"> 
			<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1> 
			<div class="description"><?php bloginfo('description'); ?></div> 
		</div> 
	</div> 
	<hr /> 
	 
	<!-- STOP DELETING -->

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.

 
 
	<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/inc/css/reset.css" type="text/css" media="screen" /> 
	<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/inc/css/style.css" type="text/css" media="screen" />

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().

 
 
	<?php 
	/** 
	 * @package WordPress 
	 * @subpackage Default_Theme 
	 */ 
	?> 
	 
			<?php wp_footer(); ?> 
	</body> 
	</html>

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.

 
 
	<div id="container"> 
	 
		<div id="header_container"> 
		 
		</div> <!-- header_container --> 
		 
		<div id="sidebar_container"> 
		 
		</div> <!-- sidebar_container --> 
		 
		<div id="content_container"> 
		 
		</div> <!-- content_container --> 
		 
		<div id="footer_container"> 
		 
		</div> <!-- footer_container --> 
	 
	</div> <!-- container -->

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.

header.php

 
 
	<?php 
	/** 
	 * @package WordPress 
	 * @subpackage WordPress_CMS 
	 */ 
	?> 
	 
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
	<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> 
	 
	<head profile="http://gmpg.org/xfn/11"> 
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> 
	 
	<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title> 
	 
	<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/inc/css/reset.css" type="text/css" media="screen" /> 
	<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/inc/css/style.css" type="text/css" media="screen" /> 
	 
	<?php wp_head(); ?> 
	 
	</head> 
	 
	<body> 
	 
		<div id="container"> 
		 
			<div id="header_container"> 
			 
			</div> <!-- header_container -->

sidebar.php

 
	 
	<?php 
	/** 
	 * @package WordPress 
	 * @subpackage WordPress_CMS 
	 */ 
	?> 
	 
		<div id="sidebar_container"> 
		 
		</div> <!-- sidebar_container --> 
 
</pre> 
 
<p><strong>footer.php</strong></p>

 
 
	<?php 
	/** 
	 * @package WordPress 
	 * @subpackage WordPress_CMS 
	 */ 
	?> 
	 
			<div id="footer_container"> 
			 
			</div> <!-- footer_container --> 
		 
		</div> <!-- container --> 
	 
		<?php wp_footer(); ?> 
	 
	</body> 
	 
	</html>

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.

 
 
	<h1 id="logo"><?php bloginfo('name'); ?></h1>

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.

 
 
	<ul class="nav"> 
		<?php 
		wp_list_pages('title_li=&depth=1&include=2,3,13'); ?> 
	</ul>

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.

 
 
	<ul> 
 
		<?php 
		if($post->post_parent){ 
			wp_list_pages('title_li=&child_of='.$post->post_parent); 
		} 
		?> 
	 
	</ul>

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.

 
 
	<ul> 
		<li class="copyright"><p>Copyright Gear'd &copy; 2009</p></li> 
		<?php 
		wp_list_pages('title_li=&depth=1&exclude=2,3,13'); ?> 
	</ul>

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

 
 
	<div id="content_container"> 
	 
	</div> <!-- 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.

 
 
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
	 
	<?php endwhile; endif; ?>

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.

 
 
	<h2><?php the_title(); ?></h2> 
			 
	<?php 
	if($post->post_parent): ?> 
	 
		<h2> <?php echo get_the_title($post->post_parent); ?></h2> 
	 
	<?php 
	endif; ?> 
	 
	<div class="header_image"> 
		<img src="img/header.gif" height="145px" width="560px" alt="" /> 
	</div> <!-- header_image --> 
	 
	<?php the_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.

 
 
	ul.nav li.active a, 
	ul.nav li.current_page_item a, 
	ul.nav li.current_page_parent a{ 
	 
	} 
	 
	#sidebar_container ul li.active a, 
	#sidebar_container ul li.current_page_item a{ 
	 
	}

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.

 
 
	<?php 
	$image = get_post_meta($post->ID, 'header_image', true); 
	 
	if($image): ?> 
	 
		<div class="header_image"> 
			<img src="<?php echo $image; ?>" height="145px" width="560px" alt="" /> 
		</div> <!-- header_image --> 
 
	<?php 
	endif; ?>

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.

Advertisement
Related Posts
  • Code
    WordPress
    Eight Hidden Gems in the WordPress Function ReferenceHidden gems preview
    WordPress is like a big ocean to me. It has a big set of great APIs, it has some awesome functionality and you can make almost any kind of websites you can imagine. But in this grand ocean as a content management system, there are some tiny bits of code that are being overlooked. In this tutorial, we're going to have a quick look at eight interesting WordPress functions.Read More…
  • Code
    Widgets
    Building a Recent Post Widget Powered by SimplePieRecent post widget simplepie
    In today's world, website speed is very important. most internet users are impatient and tend to leave a website that take too long to load. One great way to improving the performance of WordPress site is by reducing the number of plugins that queries the database such as a Recent Post widget plugin.Read More…
  • Code
    Theme Development
    Custom Controls in the Theme CustomizerTheme customizer custom control 400
    In the last article, we explored the advanced controls available in the Theme Customizer, and how to implement them. We’re going to look at how to create our own custom control, allowing you to choose which Category of Posts are displayed on the home page. To get started, download version 0.6.0 of our Theme Customizer Example.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Creating a Page TemplateCreating wordpress theme from html 400
    So far in this series, I've shown you how to create a fully functioning WordPress theme from static HTML. We've covered the following steps: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file. At the moment, your theme only has one template file for displaying content—the index.php file. A powerful feature of WordPress is the ability to use template files for different kinds of content.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: The Footer FileCreating wordpress theme from html 400
    In this series, you've been learning how to create a WordPress theme form static HTML. Up to this point, you have: prepared your markup for WordPress converted your HTML to PHP and split your file into template files edited the stylesheet and uploaded your theme to WordPress added a loop to your index file added meta tags, the wp_head hook and the site title and description to your header file added a navigation menu added widget areas to the header and sidebar. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Adding WidgetsCreating wordpress theme from html 400
    In this series, you've learned how to convert a static HTML file to a WordPress theme and edit the header file. So far you've: prepared your markup for WordPress converted your HTML to PHP and split your file into template files edited the stylesheet and uploaded your theme to WordPress added a loop to your index file added meta tags, the wp_head hook and the site title and description to your header file added a navigation menu. Read More…