Advertisement

WordPress as a CMS: Part 2

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →

In the last tutorial we whipped up a quick, simple layout in photoshop and now we need to turn that into a static HMTL and CSS page.


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.

Once you become more comfortable with HTML and WordPress you can skip this step and just create your WordPress theme, but that would defeat the purpose of this tutorial so we are going to take this extra step.

There are two different types of tutorials that I see out there and the most popular one seems to be here is the full HTML and here is the full CSS and that's the end of the tutorial. I'm not a huge fan of that method so I'm going to walk you through the entire process. For the people who are fans of the other method, you can find the entire HMTL and CSS at the end of this tutorial.


Slice and Dice

We stuck with an extremely simple design, so we really only need to cut up 2 images. These are the logo and our content image.

Take out your cropper tool and cut out both those images.


For the logo, try to keep it as close to each edge as possible.



Save the image for web and then do the same for our content image.



You Need a Solid Foundation

Now that we have all of our images sliced out and saved, we can go ahead and create our HTML file.

Open up your editor and prepare to create some folders and files. In your root folder create these folders and files.

img/

inc/

index.html

Move your newly created images into the img folder and go into your inc folder. Once inside inc we are going to create a new folder as well as 2 new files. Create a new folder called CSS and inside that folder create 2 new files, reset.css and style.css.

Your folder structure should look like our screenshot below.



Reset and Basic Structure

When creating a site, it's always good to start out with a solid CSS reset. This makes sure that you are starting at ground zero and eliminating any browser inconsistency you may have.

The CSS reset that I always use is from http://meyerweb.com/eric/tools/CSS/reset/ so point your browser to that site and copy the CSS reset code he has created.

Before we paste this into our reset.CSS file we are going to quickly compress it into a smaller file.

If you google CSS compressor there are hundreds of scripts that will do this for you, personally I use CSSdrive http://www.CSSdrive.com/index.php/main/CSScompressor/ so again, point your browser to this site.

Paste your CSS reset code into that box, and set the compression mode to super compact. Hit compress it!



You will be redirected to another page with our newly compressed CSS reset code. Copy the code, open up reset.css in your editor and paste in your code. Save reset.css and close this file.

Now that we have our CSS reset all setup, we are going to create the basic HTML structure of our site so we can apply some CSS styles to make sure everything is working properly.


Full Screencast



Building Blocks

Open up index.html and add this HTML for the basic HTML file.

 
	<!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"> 
		<head> 
			<title>WordPress CMS - Part 2</title> 
		</head> 
		 
		</body> 
		 
	</html>

Now that we have the most basic HTML file created we can create the 4 main elements of our page. These elements are Header, Sidebar, Content and Footer. Again, because we are working with a template that is against a completely solid background we don't have to worry about adding padding to our elements, so we can just create 4 container divs and start adding some styling.

Create 4 divs for each element and append _container to each name. We are going to add 1 container that will house each of our elements so that we can center all our content on the page. This will be called container.

 
	<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 -->

You'll notice that each closing div tag has a comment beside it. Our template isn't going to get extremely long, but in the future when you're working with lots of divs and elements on your page it can be hard to keep track of which </div> tag belongs to it's opening <div> tag. Adding comments will let use keep track of which ender belongs to it's opener.

We have our containers all setup, so lets start adding some styling so we can make sure that our sidebar and content containers will float beside each other nicely!

Open up style.css and quickly add some general styles.


This Man's Got Some Style

 
	body{ 
		background: #f5f5f5; 
		font-size: 62.5%; 
		color: #6e6e6e; 
		font-family: Helvetica, Verdana, Sans-Serif; 
	} 
	 
	p{ 
		font-size: 1.4em; 
		line-height: 1.5em; 
		margin: 0 0 15px 0; 
	}

If you've ever used a CSS file, this should look very familiar. If you haven't, what we've done is changed some variables of our body element. This effects our main HTML file. We changed the background color to the color of our PSD file, as well as changed the default color of any text on the page using color.

Next we set the default font stack that we want to use for our site. This tells our browser that we want Helvetica to be the main font used for our page. If Helvetica isn't available then the browser will looks for Verdana, and then finally the next available sans-serif font.

If you open up index.html in your browser you will see a blank beige page. Because we don't have any elements inside our container, we are going to add a default height and some background colors so we can see what we're working with.

 
	div{ 
		height: 200px; 
	} 
	 
	/* -- Structure Elements -- */ 
	 
	#container{ 
		width: 900px; 
		margin: 0 auto;	 
	} 
	 
	#header_container{ 
		width: 100%; 
		background: red; 
	} 
	 
	#sidebar_container{ 
		width: 280px; 
		background: blue; 
	} 
	 
	#content_container{ 
		width: 580px; 
		background: orange; 
	} 
	 
	#footer_container{ 
		width: 100%; 
		background: green; 
	}

Refresh the page and you should have something that looks like the screenshot below.


We set a default height of 200px for all of our divs so that we could see them without any content inside of them. Without the default height our divs would all have a height of 0px and we wouldn't see anything.

Now that we have our divs showing up on the page, we need to make sure that the sidebar and the content containers are sitting beside each other on the page. We are going to use the float property to achieve this.

Note: Unless I tell you to remove all the styles from the current CSS element, please just add the new properties to the already existing properties.

 
	#header_container{ 
		float: left; 
		clear: both; 
	} 
	 
	#sidebar_container{ 
		float: left; 
	} 
	 
	#content_container{ 
		float: right 
	} 
	 
	#footer_container{ 
		float: left; 
		clear: both; 
	}

We float our sidebar div to the left of the page and the content div to the right side of the page. This is one of the easier columned layouts you will come across. We don't want our header and footer containers to have any elements floating beside them so we've added a clear: both; property with the float property. Clear makes sure that no other elements with be on either side of the current container.

Refresh and consult the screenshot!


We now have the basic structure of our page completed so we can start adding our other elements to the page. We are going to start with the header. We know that everything is floated and aligned properly so you can remove the background colors from our container divs.


How About Some Navigation

Inside your header_container div lets add an h1 tag as well as an unordered list that will act as our top navigation.

 
	/* -- header_container -- */ 
 
	<h1 id="logo">Gear'd</h1> 
	 
	<ul class="nav"> 
		<li><a href="">About</a></li> 
		<li class="active"><a href="">Plans & Pricing</a></li> 
		<li><a href="">FAQ</a></li> 
		<li><a href="">Contact</a></li> 
	</ul>

If you refresh the page you'll see the default tags, nothing really much to look at. We are going to use the h1 as our logo. Switch back to style.css and add some properties to our h1#logo tag.

 
	h1#logo{ 
		width: 280px; 
		height: 96px; 
		text-indent: -9999px; 
		background: url(../../img/logo.gif) top left no-repeat; 
		float: left; 
	}

What we've done here is set the height and width of out h1 to the height and width of our logo image. Next we've removed the text by indenting it by -9999px. Lastly, we've set the background of our h1 to our logo tag and floated it left. This will make sure it sits nicely beside out navigation.


The logo looks awesome, but the navigation needs a little CSS love. Lets give it some!

A quick little sidestep from our navigation, we are quickly going to include our Days font that we used for our logo and navigation.

We are going to use @font-face to tell CSS that we want to use the new font for our file. This property isn't available in all browsers, but we are going to use a font stack to make sure that the other browser will still be able to see our styles.

First we need to include our font in our CSS file. Create a new folder called fonts inside our inc folder and drag days.otf inside the new fonts folder.

If you do not have the days font, you can download it, as well as other font-face safe fonts from http://spyrestudios.com/21-awesome-font-face-embedable-typefaces/

Once we have the font we can use @font-face to include it into our CSS script.

 
	@font-face { 
		font-family: Days; 
		src: url("../fonts/days.otf"); 
	}

The first property tells our CSS file what the name of the font is so we can use it in our font-family property with other elements. The second property is where our font is located.

Back to our navigation. It's become the standard to use unordered or ordered lists when it comes to navigation. Styling the navigation can get a tad bit difficult when you're a beginner but once you catch on it can be very powerful.

 
	ul.nav{ 
		float: right; 
		margin: 25px 0 0 0; 
	} 
	 
	ul.nav li{ 
		float: left; 
		margin: 0 0 0 10px; 
	} 
	 
	ul.nav li a{ 
		font-family: Days, Helvetica, Verdana, Sans-Serif; 
		text-decoration: none; 
		padding: 5px 10px; 
		color: #6e6e6e; 
		-moz-border-radius: 5px; 
		-webkit-border-radius: 5px; 
		font-size: 1.4em; 
	} 
	 
	ul.nav li a:hover{ 
		background: #e0e0e0; 
	} 
	 
	ul.nav li.active a{ 
		background: #00b8ff; 
		color: #f5f5f5; 
	}

We reference ul.nav and float it right. This puts it on the far right side of our content div across from our logo.

By default, the li tag(s) of our lists are located on top of each other on a new line for each li. We don't want this, we want our navigation to sit side by side. Float to the rescue! We add a little bit of margin to each li elements to space them out a little bit.

We are going to add some styling to our link elements to make them look like graphic buttons. We are going to use another property that isn't available in all browsers, but i want to keep everything simple for the sake of learning.

This where -moz-border-radius and -webkit-border-radius come into play. These 2 properties add some nice 5 pixel radius to each link element. You will only notice the rounding when the link is active or is being hovered on because those are the only 2 events where we are changing the background color.

Refresh and bask in the glory of your new navigation!


With our new knowledge of lists we are going to move over to the sidebar and add another unordered list for some sidebar navigation. The method of creating the sidebar navigation is almost identical to our top navigation so if you are looking for a challenge try to make the sidebar yourself and style it before you look at the actual code!

Below you will find the HTML and CSS code for our sidebar navigation. I'm not going to walk you through it because like I said before, it's pretty much identical to our header navigation except we are setting a width to our link elements because we want them to be the full size of the sidebar.

 
	<ul> 
		<li class="active"><a href="">Free Plan</a></li> 
		<li><a href="">Not So Free Plan</a></li> 
		<li><a href="">Trump Plan</a></li> 
	</ul>
 
	#sidebar_container ul, 
	#sidebar_container ul li{ 
		float: left; 
		clear: both; 
		width: 280px; 
	} 
	 
	#sidebar_container ul li{ 
		margin: 0 0 10px 0; 
	} 
	 
	#sidebar_container ul li a{ 
		-moz-border-radius: 5px; 
		-webkit-border-radius: 5px; 
		padding: 7px 10px; 
		text-decoration: none; 
		color: #6e6e6e; 
		float: left; 
		clear: both; 
		width: 260px; 
		font-size: 1.5em; 
		text-transform: uppercase; 
		font-family: Days, Helvetica, Verdana, Sans-Serif; 
	} 
	 
	#sidebar_container ul li a:hover{ 
		background: #e0e0e0; 
	} 
	 
	#sidebar_container ul li.active a{ 
		background: #00b8ff; 
		color: #f5f5f5; 
	}

By now you should be a unordered list pro and I hate to do this to you, but we are going to rock one more list I promise. We are going to use another list for our footer.

Again, I'm going to give you both the HTML and CSS code with one little bit of explanation because it's almost identical except we are floating some elements differently this time around.

 
	<ul> 
		<li class="copyright">Copyright Gear'd &copy; 2009</li> 
		<li><a href="">Terms & Conditions</a></li> 
		<li><a href="">Developers</a></li> 
		<li><a href="">FAQ</a></li> 
	</ul>
 
	#footer_container{ 
		color: #bebebe; 
	} 
	 
	#footer_container a{ 
		color: #6e6e6e; 
		text-decoration: none; 
		font-size: 1.4em; 
	} 
	 
	#footer_container ul li{ 
		float: right; 
		border-left: 1px solid #bebebe; 
		padding: 0 10px; 
	} 
	 
	#footer_container ul li.copyright{ 
		float: left; 
		padding: 0; 
		border: 0; 
	} 
	 
	#footer_container ul li p{ 
		margin: 0; 
	}

We have our footer list and each of our li elements are floated right but we want out li.copyright to sit on the left side of our page away from the actual footer list. To do this we give it a class of copyright and float it left instead of right. We've also added some borders to the left of each li element except for our copyright li for a little bit of spice.

Are you sick of lists yet? If the answer is yes you're in luck, we are done with lists for this tutorial. Thanks for sticking by for so long :P

We are near the finish line, we just have to add some content elements and add some last minute touchups.


Fill It Up With Content

 
	<h2>Plans & Pricing</h2> 
	 
	<hr/ ><h2>Free Plan</h2> 
	 
	<div class="header_image"><img 
		<div class="tutorial_image"><img src="img/banner.gif" height="145px" width="560px" alt="" /> 
	</div> <!-- header_image --> 
 
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit. Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.</p> 
 
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit. Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.</p> 
	 
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit. Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.</p>

All of our content elements are mainly default elements on the page except for our header_image div. This is good because it means a minimal amount of CSS to make our page look awesome.

 
	 
	/* -- Header Elements -- */ 
	 
	h1,h2,h3{ 
		font-family: Days, Helvetica, Verdana, Sans-Serif; 
	} 
	 
	h2{ 
		font-size: 4em; 
		color: #00b8ff; 
	} 
	 
	h3{ 
		font-size: 2em; 
		color: #6e6e6e; 
		line-height: 2em; 
	} 
	 
	/* -- Post Elements -- */ 
	 
	.header_image{ 
		float: left; 
		clear: both; 
		margin: 10px 0; 
		background: #00b8ff; 
		padding: 10px; 
		-moz-border-radius: 5px; 
		-webkit-border-radius: 5px; 
	}

Headers are styled, header image is looking great. Everything seems to be coming together. Refresh the page and bask in the glory of your new page! The header looks a little off though being sucked right up to the top of the page.


We are going to add a little bit of top and bottom margin to our header container to space everything out.

Add the margin property to our header_container element.

margin: 20px 0;

This adds 20 pixels of margin to the top and bottom of header_container. It's very simple!

The final touchup we are going to add is a little bit of padding and border to our footer_container.

 
	border-top: 1px solid #d0d0d0; 
	padding: 10px 0;

We are all coded up and everything is looking great so that is the end of this tutorial. Move onto the next tutorial where we are going to take this file and make WordPress generate content for each page!

Advertisement