Blog

Read our latest blog posts, learn something new, find answers, and stay up to date.

Highlighted Navigation with WordPress

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

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

The XHTML code (navigation)

<div>
<ul>
<li><a href="/index.php">Home</a></li>
<li><a href="/blog/">SDAC Blog</a></li>
<li><a href="/web_solutions/">Web Solutions</a></li>
<li><a href="/network_solutions/">Network Solutions</a></li><li><a href="/user_interface_solutions/">User Interface Solutions</a></li>
<li><a href="/custom_solutions/">Custom Solutions</a></li>
<li><a href="/search/">Search</a></li>
</ul>
</div>

The CSS code

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

Common WordPress Problems and Their Solutions

Ever since we have been listed on the WordPress Consultants list, I have received a number of phone calls from panicked blog/web site owners regarding WordPress errors. Since I have seen a trend in the past month, I thought I would document some of the problems and their solutions.

Error establishing a database connection

Solution: The most common solution is to look and make sure you have typed in the correct user name/password/database name in your wp-config.php file. How can you check? Log into cPanel or Plesk, or directly to mysqladmin. Make sure that the user has the correct privileges to the database and that the password is correct. If you are unsure about the password, you can always delete the user and re-add them (remember to give the newly created user the correct privileges). If you are still having an issue, and you have a high traffic blog/web site, call your web host and see if you are maxing out the server connections – you/they might need to adjust their Apache/MySQL settings or you might need to start using WP-Cache to help control the connection issues. More than likely – you just entered in your user name/password/database incorrectly. This is by far the most common issue I have seen so far.

The default theme appears instead of your chosen custom theme when making CSS changes.

Solution: This is a known issue and hopefully will be addressed soon. If this happens, log into the WordPress Admin and choose your custom theme under “Presentation”.

You are not able to edit your widgets’ content using Safari

Solution: Grab the widget content that you want and drop it below or above another widget content box in the Widgets area in the WordPress Admin. Once you move it, the edit option will appear. Edit the content, and drag it back to it’s original location.

WordPress Update: 2.2

WordPress 2.2 has officially been released. The new version includes more than 200 bugs fixed as well as offers some new UI features, and speed optimizations. For more information on WordPress version 2.2, read the official WordPress version 2.2 documentation.
Download the latest versions of WordPress:WordPress 2.2

SDAC Recommends: WordPress Plugin: Cool Player

After looking for a media player for WordPress sites and blogs, I have finally come to the conclusion that Cool Player is a great plugin to take a look at. A number of my clients need the ability to play a number of media files, and with an impressive list of supported media types, I recommend looking at Cool Player:

This version supports those types of files: rm, rmvb, ra, rv, ram, smil, smi, rtsp, rpm, asf, wm, wma, wmv, wax, wvx, ogg, ape, avi, mid, midi, wav, mms, m3u, asx, mov, qt, mqv, m4v, m4a, m4b, mpeg, mpg, m1s, m1v, m1a, m75, m15, mp2, mpm, mpv, mpa, flc, fli, cel, aiff, aif, aifc, cdda, bwf, rts, 3gp, 3gpp, 3g2, 3gp2, au, snd, ulw, smf, kar, qcp, sdv, gsm, amr, caf, amc, mp4, sdp, pdf, fdf, xfdf, xdp, xfd, gif, jpg, jpeg, bmp, png, xpm, dir, dxr, dcr, cst, cct, cxt, w3d, fgd, swa, swf, spl, mp3, flv, rtmp, rbs, xml, rss, xspf, atom.

My Page Order WordPress Plugin Modifcation

I have been working with a client recently that was using the My Page Order plugin for the WordPress CMS I set up. They had several “draft” pages they used for templates and did not want them to show up in the My Page Order Admin interface. After looking at the SQL code, I added in a piece that would only show published (live) pages.
To make the same change in your code, open up the plugin file (mypageorder.php), go to line 47 and change the following line:

$results=$wpdb-&gt;get_results("SELECT * FROM $wpdb-&gt;posts WHERE post_parent = $parentID and post_type = 'page' ORDER BY menu_order ASC");

to:

$results=$wpdb-&gt;get_results("SELECT * FROM $wpdb-&gt;posts WHERE post_parent = $parentID and post_type = 'page' and post_status='publish' ORDER BY menu_order ASC");

Now, only the pages you really want to order will appear in the menu.

SDAC Recommends: WP Plugin: Permalink Redirect Plugin

If you ever want to change your permalink structure in WordPress, but still want to have all your old URLs to work, download Permalink Redirect Plugin. This plugin will make sure that all your posts will get redirected to the new permalink structure you moved to without any hassle whatsoever. Not only will your readers be thankful, your SEO rank will not suffer with any URL reorganization.

WordPress Update: 2.0.10 and 2.1.3

WordPress 2.0.10 and 2.1.3 have officially been released. The new versions of WordPress has several security fixes for publicly known issues. Please update your WordPress installations immediately.
Download the latest versions of WordPress: WordPress 2.0.10 and WordPress 2.1.3

SDAC Recommends: WordPress Plugin: My Page Order

If you need to display pages dynamically within WordPress, and want to order them (and their sub pages), check out the My Page Order WordPress plugin. This plugins allows the WordPress administrator to manage the page order from within the WordPress admin area without hard coding anything in your template.