Static Homepage Navigation

This is a great little bit of code. What it does is create static home page link in your navigation that you could place before your wp_list_pages code, to have an active state on your home page link. This way you can use css to style the “current_page_item” class like for any other page. Here’s the code:

[sourcecode language=’php’]

<li class="page_item “><a href="”>Home

[/sourcecode]

Suckerfish Drop Down Menus with WordPress

Today we are going to answer a common question regarding WordPress navigation. How to create simple drop down menus that work across browsers. If you are at all familiar with the web standards approach, then you have probably heard of Suckerfish Drop Downs.

http://htmldog.com/articles/suckerfish/dropdowns/

Integrating this is mostly CSS, but here is the WordPress code to get us started:

[sourcecode language=’php’]

[/sourcecode]

That code gets our menu started in the standard WordPress way. We just added in the sort by menu order code so that you can control your page order. Also the depth of 3 is set because that is as far out as we are taking our CSS, so it wouldn’t make sense to let our HTML break it.

Now to get the basic CSS in place:

[sourcecode language=’css’]

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}

#nav a {
display: block;
width: 10em;
}

#nav li { /* all list items */
float: left;
width: 10em; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
position: absolute;
background: orange;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn’t read by screen readers */
}

#nav li ul ul { /* third-and-above-level lists */
margin: -1em 0 0 10em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

#content {
clear: left;
color: #ccc;
}
[/sourcecode]

Now we have it working in all browsers except IE6 (which doesn’t properly support :hover). To support IE6 We need to add a few lines of JavaScript:

[sourcecode language=’JavaScript’]

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}

}
if (window.attachEvent) window.attachEvent("onload", sfHover);

[/sourcecode]

That’s it!

Archives, Comments, Jabs, and Theme Design

  1. Beautiful Website Archiveshttp://www.sitepoint.com/article/beautiful-web-site-archives/
    A great article by Apple designer and CSS guru Jina Bolton on some innovative and great archive pages. Too often WordPress theme designers don’t pay attention to the details of the theme like archives, so this should serve as some inspiration to rethink your archives pages. Leaving it to default styling is for beginners.
  2. Hack Together a User Submitted Comments Feedhttp://nettuts.com/working-with-cmss/hack-together-a-user-contributed-link-feed-with-wordpress-comments/
    Here at WP Limits we are always looking for innovative ways to push the limits of WordPress. Well, Collis over at Envato has done exactly that. Take a look!
  3. Woo Themes Takes a Jab at WP Designerhttp://mixedbrains.typepad.com/photos/new/woo.jpg
    You won’t find a great tip or tutorial here, but if you have been following the WordPress community you are no doubt familiar with the untimely death of wpdesigner.com. This ad from Woo Themes is taking advantage of that.
  4. Creating a WordPress Theme from Scratchhttp://nettuts.com/site-builds/how-to-create-a-wordpress-theme-from-scratch/
    NetTuts shows us how to create a very basic WordPress theme. It is probably the fastest introduction I have ever read.
  5. Designing for WordPress: Complete Serieshttp://css-tricks.com/designing-for-wordpress-complete-series-downloads/
    Looking for something more in depth then the last link? Well, then this is for you. There is a lot of content there (so much that I am going to end my weekly list right here), so take some time and really learn how to create a theme.

Friday Tip: WordPress Cheat Sheet

Hello all, welcome to our first Friday Tip.

Today we have a wonderfully put together WordPress reference or cheat sheet. In the three days since I have discovered it, it has already proved to be a very valuable resource. Spend some time just reading through it and you will learn more about specific tags and hopefully think of new ways to use them to push the limits!

http://www.dbswebsite.com/design/wordpress-reference/

Let us know what you think!

Posting Code in Your WordPress Blog

Posting code in a WordPress blog was a pain for a long time. Everyone had a different way to format their code with CSS, and no solution was really that good. At least not compared to what I am about to show you.

The Syntax Highlighter plugin allows for code to easily be displayed in an appealing, easy to use format. All you have to do is install the plugin. Download it here:

http://wordpress.org/extend/plugins/syntaxhighlighter-plus/

After installing the plugin you will want to wrap your code in tags like this: [sourcecode language=’css’]..[/sourcecode] You can view other examples of the plugin in use on our other posts.

Now this works with many other languages besides CSS.The other supported languages are:

  • cpp
  • csharp
  • css
  • delphi
  • html
  • java
  • jscript
  • php
  • python
  • ruby
  • sql
  • vb
  • xml

For more detail on how to add use this functionality in your blog read this post:

http://faq.wordpress.com/2007/09/03/how-do-i-post-source-code/

Enjoy!

Sliding Posts with WordPress

1. The Concept

Goal: To make a tabbed slider that displays WordPress posts from a specific category in an easy to use format. Making it simple to edit/delete posts, from the WordPress back-end, and still have a great, unique front-end result.

To start we are using the Coda-Slider from Niall Doherty.

http://www.ndoherty.com/demos/coda-slider/1.1.1/#1

Start by downloading and unzipping the files.

2. Making it Work With WordPress

We need to use the WordPress loop to make each page of the slider a tab. To do this we will start out with a post query for our category.

Create a new category to house our project (I called mine Portfolio), make sure to note the category ID as we will need it later. Based on the WordPress Template Hierarchy we know that any theme file named category-3.php (where 3 is your category ID) will be used to display posts from that category. So all code featured here will be inside that PHP file.

Place this in your header to link to the javascript files and to start the slider
[sourcecode language=’html’]

jQuery(window).bind(“load”, function() {

jQuery(“div#slider1″).codaSlider()

// jQuery(“div#slider2″).codaSlider()

// etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page.

});

[/sourcecode]

To start with we want to analyze the code, and see where our loop should start. Remember that the loop is repeating code for each post, so we want it inside the containing DIVs. This slider code has three containing DIVs:

[sourcecode language=’html’]


[/sourcecode]

To start our loop we want to retrieve all posts in category with ID of 3 (make sure to replace 3 with your actual ID).

[sourcecode language=’html’]

For the next step we want to make sure the post title appears on the tab. To do this we need to add in the title section of the div.panel. As shown below.

<div class="panel" title="”>

[/sourcecode]
Then we will want to add our title and content within the wrapper div. Easy with the simple WordPress tags <?php the_title(); ?> and <?php the_content(); ?>.

Then everything needs to be closed off with three closing DIVs at the end.
[sourcecode language=’html’]

        

Here is our ending HTML:

<div class="panel" title="”>