SDAC Blog

Check out our blog for WordPress updates, WordPress plugin reviews, and general web development hints.

asterisk SDAC Recommends: WP Plugin: Top Level Categories

hr
hr

If you have ever wondered how to clean up WordPress URLs by removing the /category/ from your URLs, check out the plugin: Top Level Categories. After you activate it, you can access your web pages that were once only reachable by: /category/web-design/ by now using just /web-design/.

separate

asterisk Highlighted Navigation with WordPress

hr
  • Written by: Jennifer Zelazny on July 17th, 2007 at 2:20 pm
  • Tagged: , ,
hr

Ever wonder how to automatically highlight your tabs or navigation depending on the category, page, or post you are on? Wonder no more! To make this work, there are three bits of code you will need:

  • The header code to control the body ID (and to tell us what page we are on)
  • The navigation code
  • The CSS to control the highlight

For this example, I will use this web site as an example.

The header code

PLAIN TEXT
PHP:
<?php
$current_page = $post->ID;
$parent = 1;
while($parent) {
$page_query = $wpdb->get_row("SELECT post_name, post_parent FROM $wpdb->posts WHERE ID = '$current_page'");
$parent = $current_page = $page_query->post_parent;
if(!$parent)
$parent_name = $page_query->post_name;
}
?>

<body id="<?php echo (is_page()) ? "$parent_name" : ((is_home()) ? "blog" : ((is_search()) ? "other" : ((is_single()) ? "blog" : "blog"))); ?>">

The XHTML code (navigation)

PLAIN TEXT
HTML:
<div id="tabs">
<ul>
<li id="nav-home"><a href="/index.php">Home</a></li>
<li id="nav-blog"><a href="/blog/">SDAC Blog</a></li>
<li id="nav-websolutions"><a href="/web_solutions/">Web Solutions</a></li>
<li id="nav-networksolutions"><a href="/network_solutions/">Network Solutions</a></li><li id="nav-userinterfacesolutions"><a href="/user_interface_solutions/">User Interface Solutions</a></li>
<li id="nav-customsolutions"><a href="/custom_solutions/">Custom Solutions</a></li>
<li id="nav-search"><a href="/search/">Search</a></li>
</ul>
</div>

The CSS code

PLAIN TEXT
CSS:
#home #nav-home, #about_us #nav-home, #contactus #nav-home, #faqs #nav-home,
#disclaimer #nav-home, #search #nav-search,
#blog #nav-blog, #web_solutions #nav-websolutions, #network_solutions #nav-networksolutions,
#user_interface_solutions #nav-userinterfacesolutions,
#custom_solutions #nav-customsolutions, #tos #nav-home, #sitemap #nav-home {
      background:url("images/tabs/active_tab_bg.gif") repeat-x;
      border-right:1px solid #676e78;
      }
         
#tabs li:hover, #tabs li:hover a {
    background: url("images/tabs/active_tab_bg.gif") repeat-x;
    color:#212933;
    }

General information
When you view the code for a page, you will notice that the header code will find out if the page viewed is infact a page. If it is a page, it gets the page parent (I use parent and child pages in my web site organization). The tabs are created with unique li IDs. So that a combination of #home (the body ID) and the #nav-home (li ID) will show as a highlighted tab. With this example, this case will only occur when we are on the home page because #home is a page (the home page) so the home tab will be highlighted. When we click on "SDAC Blog", the body ID will then be #blog, so now the #blog #nav-blog combination will force the "SDAC Blog" tab to be highlighted. Take a look at the CSS to see where to define the "cases".

Hopefully this took some of the mystery out of working with WordPress, navigation, and how to put everything together.

separate

asterisk Good CSS Practices

hr
  • Written by: Jennifer Zelazny on November 15th, 2006 at 9:39 pm
  • Tagged:
hr

I was recently asked to recommend and comment on some good CSS practices for a client and I thought I would pass some of them.

  • Use a table of contents. I always start my stylesheet(s) with a table of contents so I can easily locate particular styles in the future. I would recommend breaking your stylesheet into a few main areas like: header, main content, navigation, footer. The more sections you put in, the easier it is to read and edit at a later date.
  • Use a table of contents. If you notice your stylesheet is getting out of control (over 1,000 lines) consider using multiple style sheets. You could have one master style sheet, another for forms, another for specific pages, etc. You would then either link to a stylesheet that would have links to all the styleheets using @import or you could call in the stylesheets on a page by page basis statically or dynamically.
  • Start with a known, debugged code if possible. I have a library of layouts that I use when beginning a new project that I know work in multiple platforms on multiple browsers. I will be publishing these as soon as I have some free time.
  • Do not rely on CSS hacks, unless it is a last resort. Believe it or not, most things can be done with CSS code that will validate. As soon as you rely on hacks, your code becomes unpredictable with new browser releases. Stick to valid code that you know will work with past and future builds of browsers. There are a lot of hacks out there which seem like a quick and easy fix, but you will pay for it down the road.

I hope this helps! CSS is a little tricky and sometimes very frustrating, but in the end...clean code is very rewarding.

separate