Prelude
Part 1: Setting Up
Part 2: Set the Bare Bones
Part 3: The Header
Part 4: The Main Menu
Part 5: The Rest of the Header

Because the ET-Starter theme is set so that the user can choose between one, two, or no sidebars (in whichever relative position to the main content), there exists various CSS classes for each type of sidebar and it location. For the purposes of this theme, the CSS classes we will be working with are .primary-sidebar and .primary-sidebar.content-two-columncontent-right.

WordPress sidebars are relatively simple to style provided that you do not make any crazy changes to the structure of the theme. Each sidebar heading is set to h2, and each item below that is usually listed via the use of HTML lists (ie, ul and li).

As such, this is how my sidebar is styled (please note that rounded corners do not show on Internet Explorer browsers older than IE9):

.primary-sidebar {
margin: 270px 0 60px -12px;
padding: 0;
overflow: hidden;
font-family: Verdana, sans-serif;
font-size: 11px;
line-height: 1.72em;
}

.primary-sidebar.content-two-columncontent-right {
float: left;
width: 240px;
}

.primary-sidebar h2 {
margin: 30px 0 6px 0;
padding: 0 0 0 6px;
overflow: hidden;
background: #F9F9F9;
border: 1px solid #DDDDDD;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', Tahoma, sans-serif;
font-size: 18px;
font-weight: bold;
line-height: 1.8em;
color: #A09CA1;
-moz-border-radius: 6px;
-khtml-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}

.primary-sidebar p,
.primary-sidebar img,
.primary-sidebar ul,
.primary-sidebar ul ul ul {
margin: 0;
padding: 0;
}

.primary-sidebar ul li {
margin: 0;
padding: 0;
line-height: 20px;
list-style-type: none;
}

.primary-sidebar ul ul {
margin: 6px 0 40px 0 !important;
padding: 0 0 0 7px;
}

.primary-sidebar ul ul li { list-style-type: none; }

.primary-sidebar ul ul ul li {
padding: 0;
margin: 0 0 0 14px !important;
list-style-type: square;
list-style-position: inside;
color: #898989;
}

.primary-sidebar ul ul a:link,
.primary-sidebar ul ul a:visited,
.primary-sidebar ul ul a:active {
color: #336699;
text-decoration: underline; }

.primary-sidebar ul ul a:hover { color: #6699CC; }

Replace the current sidebar and primary-sidebar CSS in your style.css file with the above, and you get this:

Now, let’s customize the sidebar so that it looks a bit more like my current blog.

Right now the “Search,” “Pages,” and “Meta” sections in the sidebar are the default sidebar content that comes with every WordPress installation. And if you add any widgets to the sidebar of your theme, these three sections will disappear.

Luckily, because the ET-Starter theme is widgets-ready, all you need to do to add or take away sections in your sidebar is to drag and drop the various widgets (to the Primary Sidebar, in this case).

Log into your WordPress admin, and navigate to the “Widgets” menu under the “Appearance” section.

If you look at my sidebar right now, you will see that I have the following sections:

• Connect (list of links)
• Chirp, Chirp (my latest Twitter update)
• Explore (list of categories)
• Recent Posts
• Recent Comments
• Popular Content

And these are the widgets I used for each section:

(The last post in this series will list all my favorite plugins, so stay tuned if you’re curious as to which plugins in addition to the two listed above I use for this blog!)

And for each widget, if anything didn’t look the way I wanted or I wanted additional styling, I just turned to Chrome’s “Inspect Element” feature again to find the appropriate CSS class/ID to make the changes. For example, the pink dots at the left of each “Recent Posts” entry? After discovering that WordPress’ Recent Posts widget uses the CSS class .widget_recent_entries I just added the following to my style.css file:

.widget_recent_entries ul li {
margin: 6px 0 6px -5px;
padding-left: 15px;
background: url('/images/pink_bullet.png') no-repeat 0 2px;
}

Be warned though, that both the Twitter widget and the Recent Comments widget required extra CSS formatting in addition to my actually going into the plugin’s PHP file to re-organize the structure so that I could get them to look exactly the way I wanted. I will not get into them in this post, but if anyone’s really curious, please let me know and I’ll show you what I did.

Once again, I kept going back and forth and experimenting until I got my desired effect:

Next: styling the date of each entry!

Prelude
Part 1: Setting Up
Part 2: Set the Bare Bones
Part 3: The Header
Part 4: The Main Menu

In this post I will discuss how to complete the rest of the header elements in my blog theme.

First up: the searchbar.

In WordPress, adding a searchbar is relatively simple. All you need to do is insert the line <?php get_search_form(); ?> into wherever you want the searchbar to be.

So in this case, since I want the searchbar to be included in the header section, I opened up the header.php file and created a new div called “searchbar” like so:

<div id="searchbar">
<?php get_search_form(); ?>
</div>

I just added that to the very end of the header.php file, then saved. Here is what I ended up with:

Right. Not exactly how I want it.

The good news is that from here on, all I need to do is use some CSS to modify the position and size of the “searchbar” element:

#searchbar {
position: absolute;
margin: -15px 0 0 632px;
overflow: visible;
width: 230px;
z-index: 1;
}

Keep playing around with the position and size until you get your desired effect. At this point, you can leave the searchbar the way it is (without an actual “search” button), but if you’re anal and like to make things difficult (like me!), you may choose to add a button next to the search field. Here is the CSS I used (this replaces the searchform CSS in the original style.css file):

#searchform {
margin: 0;
padding: 14px 0 20px;
}

#searchform input#s {
margin: 0;
padding: 4px 8px;
width: 150px;
border: 1px solid #FFFFFF;
color: #828282;
-moz-border-radius: 6px;
-khtml-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}

#searchsubmit {
margin-top: -2px;
padding: 0;
width: 50px !important;
height: 24px;
background: url('/images/search_button.png');
border: none;
line-height: 1px;
font-size: 1px !important;
vertical-align: top;
cursor: pointer;
}

#searchform label {
display: none;
}

Lastly, you need to delete the searchform.php file within the theme’s file folder since this file is what makes the search button disappear in the ET-Starter theme. (The presence of this file dictates how a search should work, but WordPress search works just fine without it.)

Your theme should now look like this:

Now, onto the left portion of the header.

In order to do this, all I did was create another div called “headerleft” and added it to the end of my header.php file. I then filled in the content within the div and saved the header.php file. Here is exactly what I added to the end of header.php:

<div id="headerleft">

<a href="https://www.geekinheels.com/"><img src="/images/title.png" border=0 width="262" height="45"></a>

<div id="profileblurb">

I like books, gadgets, spicy food, and<br />
art. I dislike shopping, hot weather,<br />
and the laws of entropy. Although I<br />
am a self-proclaimed computer nerd,<br />
I still have a love for handbags and<br />
makeup... and I am always teetering<br />
on high heels. To learn more about<br />
me, visit the "About" page.

</div>

<div id="feedlinks">

<ul class="feed-list-inline">

<li><a href="http://feeds.feedburner.com/geekinheels/blog" class="feed-link">Blog RSS</a></li>

<li><a href="http://feeds.feedburner.com/geekinheels/comments" class="feed-link">Blog Comments RSS</a></li>

</ul>

</div>

</div>

As you can see in the HTML, I added a bunch of CSS IDs and classes. This will come in handy in the next step, because leaving the file as is will leave you with this mess:

So in order to play around with the positioning and formatting, you will need to return to your style.css file. Here is what I added:

#headerleft {
position: absolute;
overflow: visible;
top: 9px;
margin-left: -30px;
width: 220px;
}

#profileblurb {
position: absolute;
overflow: visible;
top: 84px;
margin-left: 40px;
width: 220px;
color: #FFFFFF;
font-family: Verdana, sans-serif;
font-size: 11px;
line-height: 1.72em;
text-align: right;
}

#feedlinks {
margin-left: 2px;
padding: 0;
position: absolute;
overflow: visible;
top: 256px;
line-height: 1.7em;
}

#feedlinks a:link, #feedlinks a:visited, #feedlinks a:active {
color: #66CC66;
text-decoration: underline;
}

#feedlinks a:hover {
color: #66FF66;
}

.feed-list-inline li {
margin: 0;
padding-left: 20px;
background: url('/images/feed-icon-16x16-orange.png') no-repeat center left;
list-style: none;
}

And that should do it! Your theme should now look like this:

Stay tuned for the next post in this series: the sidebar!

Prelude
Part 1: Setting Up
Part 2: Set the Bare Bones
Part 3: The Header

It’s been over a month since the last post in this series, and for that I apologize. This is what we had when we left off:

First, let’s work on the main menu.

As you can see from my header image, I have incorporated the outline of the menu into the header image itself. You can choose to create a separate menu background image and lay it on top of the header image, but I find that option to add an extra step (at least with this design) so why bother?

Since the outline of the menu is already taken care of, all you need to do is to format the text, background, colors, etc of the menu items using CSS.

Once again, use Chrome’s “Inspect Element” feature (or if you’re using Firefox, use Firebug) to find out what the CSS elements are for each item you’d like to change. ET-Starter’s CSS for its menu is a bit convoluted, but once you examine it you will see that it is a series of nested lists. So while the menu in its entirety uses the #menu element, each menu item is #menu ul li a and each submenu item is #menu ul li ul a.

If you are not sure which element goes with what, just experiment, changing up different elements until you get your desired effect. And for your convenience, here is my theme’s menu CSS:

#menu {
margin-left: 270px;
padding-top: 21px;
font-family: 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
font-size: 15px;
color: #FFFFFF;
}

#menu ul {
position: relative;
z-index: 300;
margin: 0;
padding: 0;
}

#menu ul li a {
margin: 0;
padding-right: 14px;
display: block;
border-bottom: none;
color: #FFFFFF;
}

#menu ul li a:hover {
color: #C0E0FF;
text-decoration: none;
}

#menu ul li {
float: left;
position: relative;
margin: 0 10px 0 0;
padding: 0 0 9px 0;
list-style-type: none;
}

#menu ul ul {
position: absolute;
display: none;
width: 8em;
margin: 9px 0 0 0;
padding: 10px;
background: #505050;
border: 1px solid #666666;
z-index: 99999;
}

#menu ul li ul {
display: none;
width: 10em;
padding: 0;
position: absolute;
z-index: 999;
line-height: 20px;
}

#menu ul li ul li { padding:0; }

#menu ul li ul a {
float: left;
width: 8em;
height: auto;
padding: 4px 10px;
color: #FFFFFF;
font-size: 12px;
}

#menu ul li ul a:hover {
height: auto;
border: none;
border-radius: none !important;
text-decoration: none;
color: #B3A6BB;
}

#menu ul ul ul {
top: auto;
padding: 0;
}

#menu ul li ul ul {
width: 10em;
left: 8em;
top: auto;
margin: 0 0 0 20px;
}

#menu ul li:hover ul ul,
#dropmenu li:hover ul ul ul,
#dropmenu li:hover ul ul ul ul {
display: none;
border: none;
}

#menu ul li:hover ul,
#dropmenu li li:hover ul,
#dropmenu li li li:hover ul,
#dropmenu li li li li:hover ul {
display: block;
}

#menu ul li.current_page_item a { color: #FFFFFF; }

#menu ul li.current_page_item li a { color: #FFFFFF; }

#menu ul li li a { color: #FFFFFF; }

#menu ul li li a:hover { color: #B3A6BB; }

#menu ul li.current_page_item li a:hover { color: #FFFFFF; }

#menu ul li ul li.current_page_item a { background: none !important; }

With the new styling in place, your menu should now look like this (what you won’t see in this screenshot are the hover effects):

But what about the menu items? How would you change those?

Right now the theme is set up so that whatever Pages you create, they will show up in the menu. If you want to exclude any Pages from the menu, you can use one of the many plugins that are available which allows you to do exactly that, or you can follow the instructions in the WordPress Codex.

That being said, I decided to go with a more labor-intensive method which allows me complete control over what is in the menu. This method is especially useful for instances where you would prefer a top-level menu item for not be to be linked to a Page but only open up a sub-menu, as is the case for the “Links” menu item.

In order to do this, I opened up my header.php file again. All the way down below, you will see a div container called “menu”:

<div id="menu">

<?php if ( function_exists('wp_nav_menu') ) { wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary-menu', 'depth' => '4', 'show_home' => 'true' ) ); }

else {?>

<ul>

<li class="<?php if (is_home()) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php bloginfo('url'); ?>" title="Home">Home</a></li>

<?php wp_list_pages('title_li=&sort_column=menu_order&depth=4'); ?>

</ul>

<?php } ?>

</div>

Since this code calls for all the Pages to be listed in the menu, you want to delete everything between <div id="menu"> and the very last </div> and replace it with an HTML list of your desired menu items. So in this case, the following is what I did:

<div id="menu">

<ul>

<li><a href="https://www.geekinheels.com/about">About</a></li>

<li><a href="https://www.geekinheels.com/archives">Archives</a></li>

<li><a style="cursor: pointer;">Links</a>

<ul>

<li><a href="https://www.geekinheels.com/friends">Friends</a></li>

<li><a href="https://www.geekinheels.com/bee-friends">Bee Friends</a></li>

<li><a href="https://www.geekinheels.com/favorite-sites">Favorite Sites</a></li>

</ul>

</li>

<li><a href="https://www.geekinheels.com/contact">Contact</a></li>

</ul>

</div>

Your menu should now look more like this (and when you hover over “Links” a sub-menu should slide out):

As always, if you have any questions, please don’t hesitate to let me know!

Up next: let’s finish the rest of the header section!