Follow this WordPress Theme Tutorial Series from the beginning.
This lesson will cover how to set the width for each DIV (or invisible box) and how to arrange them. It’ll also show you some workarounds to get your theme to display right or look the same in both Firefox and Internet Explorer.
Before we start, open the following items: Xampp Control, theme folder, Firefox browser, Internet Explorer browser, index.php, and style.css.
Step 1
The first thing you want to do is decide what’s going to be the overall width of your theme. We’ll use 750px (750 pixels); each 100-pixel is one inch. Your theme depends on the view specs of the majority of your blog’s visitors. What you want to avoid is using a 900px theme for an audience that uses mostly 800px by 600px resolutions, which means your 900px theme would expand 100 pixels beyond their screens. That’s a no-no.
How do you limit the overall width to 750px anyway?
You need everything to sit within a 750px box or DIV. Everything includes header, container, sidebar, and footer.
Add: <div id=”wrapper”> after <body>
Add: </div> before </body>
Type the following in style.css:
#wrapper{
margin: 0 auto 0 auto;
width: 750px;
text-align: left;
}
In CSS, speficially in style.css, the pound sign (#) is how you address a DIV with an id. The period is how you address a DIV with a class. For a class example, if your codes were <div class=”wrapper”> then use .wrapper instead of #wrapper to address the wrapper DIV.
Save both the index.php and style.css files. Refresh the Firefox and Internet Explorer browsers (press F5) to see the change.
Further explanations
- margin: 0 auto 0 auto; means (in exact order) 0 top margin, auto right margin, 0 bottom margin, and left auto margin. For now, just remember that setting right and left margins to auto is centerting.
- width: 750px; is self-explanatory.
- text-align: left; is aligning the text to the left within the wrapper DIV because you will be changing body{ text-align: left;} to text-align: center;
Step 2
Go ahead and change text-align: left; within body{} to text-align: center;
Why? (I’m assuming you’re using Firefox and Internet Explorer 6). Your layout might look right to you, but not to people using earlier versions of Internet Explorer. Remember setting right and left margins to auto is centering? Well, that doesn’t work for all Internet Explorers so body{ text-align: center; } is a fix for older IEs to center the wrapper DIV or box.
(By the way, the text sizes in Firefox and Internet Explorer are different right now. We’ll fix that later.)
Step 3
Make the Header float left with a 750px width:
#header{
float: left;
width: 750px;
}
Step 4
Make the Container float left with a 500px width:
#container{
float: left;
width: 500px;
}
Step 5
Make the Sidebar float left with a 240px width and a gray background: (10px is missing; I know.)
.sidebar{
float: left;
width: 240px;
background: #eeeeee;
}
Notice, you did not use a pound sign to address the Sidebar DIV; you used a period. Also, remember #ffffff is white? background: #eeeeee; is very light gray. You added a background color to the Sidebar just to see the difference when you’ll add the remaining 10 pixels later.
Step 6
Make the Footer float left and clear both with a 750px width:
#footer{
clear: both;
float: left;
width: 750px;
}
What’s the difference between the Header and Footer stylings? The answer is the presense of clear: both; in footer{}. It’s there to make sure the Footer doesn’t attach itself to anything above it, like the Sidebar or Container.
Save the style.css file. Refresh the browsers.
Step 7
Add the remaining 10 pixels to the Sidebar by using a margin. Now your sidebar style codes look like this:
.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
}
Save file and refresh the browsers to see a 10-pixel space added to the left of the Sidebar.
margin: 0 0 0 10px; specifically means 0 top, 0 right, 0 bottom, 10px left. When size is 0, the px suffix isn’t necessary.
Step 8 (Extra step)
This is just in case you’re getting a 20px margin instead of a 10px margin. 20px margin would break your layout and push the sidebar to the bottom of the page because a 20px margin makes the sum of the Container and Sidebar widths equal 760px instead of 750px. This extra step is Internet Explorer’s fault because the bug of doubling the set margin doesn’t exist in Firefox.
To fix this bug, add display: inline; to the Sidebar. Now your Sidebar should be:
.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
display: inline;
}
That’s the end of today’s lesson. If you have any question, feel free to ask me. I’m here to help, not just to show you the ropes.
And here’s what I have in the index and style files.
<div id="wrapper">
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php bloginfo('description'); ?>
</div>
<div id="container">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<div class="entry">
<?php the_content(); ?>
<p class="postmetadata">
<?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?><br/>
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?>
</p>
</div>
</div>
<?php endwhile; ?>
<div class="navigation">
<?php posts_nav_link(); ?>
</div>
<?php else : ?>
<div class="post">
<h2><?php _e('Not Found'); ?></h2>
</div>
<?php endif; ?>
</div>
<div class="sidebar">
<ul>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
<li id="search">
<?php include(TEMPLATEPATH . '/searchform.php'); ?>
</li>
<li id="calendar"><h2><?php _e('Calendar'); ?></h2>
<?php get_calendar(); ?>
</li>
<?php wp_list_pages('depth=3&title_li=<h2>Pages</h2>'); ?>
<li><h2><?php _e('Categories'); ?></h2>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
</li>
<li><h2><?php _e('Archives'); ?></h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<?php get_links_list(); ?>
<li><h2><?php _e('Meta'); ?></h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</li>
<?php endif; ?>
</ul>
</div>
<div id="footer">
<p>
Copyright © 2007 <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
</p>
</div>
</div></body>
</html>
Here is the style file.
/*
Theme Name: Tutorial
Theme URI: https://wpdesigner.com
Description: This is my theme for a tutorial.
Version: 1.0
Author: Small Potato
Author URI: https://wpdesigner.com/
*/
body{
margin: 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align: center;
vertical-align: top;
background: #ffffff;
color: #000000;
}
a:link, a:visited{
text-decoration: underline;
color: #336699;
}
a:hover{
text-decoration: none;
}
#wrapper{
margin: 0 auto 0 auto;
width: 750px;
text-align: left;
}
#header{
float: left;
width: 750px;
}
#container{
float: left;
width: 500px;
}
.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
display: inline;
}
#footer{
clear: both;
float: left;
width: 750px;
}
If you’ve read the first version of this lesson, forget the screenshot that I showed you. When taking the screenshot, I forgot to turn off the widget plugin for the sidebar, which made the sidebar looked a little different than what you should have.
