ThinkSoJoE's Thoughts

It took me a while to find something that works.  I tried to use SimplePie, but it didn’t work too well for digg.  So I took a look through the WordPress plugins directory and found the KB Advanced RSS Widget.  It’s a fully functioning RSS Parser, and allowed me to customize the feed to the point of getting it to look EXACTLY like I had it looking on my local test version of ThinkSoJoE’s thoughts.  It’s perfect.  Now if only Twitter would work…

As you can see, I’ve been trying to get my XHTML-standards-compliant Digg feed going, without much luck.  I’m researching how to parse RSS feeds, because that’s what the plugin I thought was going to work was doing, and while it worked on my local test version of this site, it didn’t here on the main page.

Right now, of course, I can’t work on it because I’ve got BoredWrestlingFan’s Real-Time SmackDown results.

I’ll probably start working right after the show tonight.  Later guys!

Apparently the Digg sidebar that I was running causes my page to not validate, so for the moment, it’s gone.  Obviously I’m going to work to try and get it back up but I pride myself on my pages being valid XHTML.  BTW, check out the new AJAXed comment form!

Well, I think the most obvious tweak you’ll notice is in the nav bar - it’s got rollover buttons now.  I’ve also added my recent diggs in the sidebar.  I had some design issues with the digg widget, but I managed to figure out how to mix and match the widget themes and came up with something I like - for now.  If I can figure out how to further style it, I will, but for now it looks pretty decent.

I’ve got an idea for a project, but I haven’t gotten around to getting to work on it.  I think the person I’d be doing the project for would like it, and it’s for charity.  I’ll keep you guys posted on what I’m working on.

I’m pretty decent at web design, but up until today, I didn’t really know how to do current page highlighting in the correct manner.  I was using an extremely convoluted method that used a buttload of PHP if() and elseif() tags.  Today I finally learned how to use WordPress’s built in functionality to achieve the same effect with a lot less work.

I know a few people that have seen this page are learning CSS, as they’ve found this site on the CSS-Tricks website, where I frequent the message boards.  Therefore, I present to you this WordPress/CSS/PHP tutorial.

Click the “Read More” link to check it out! 

For the purposes of this tutorial (and also because I’m not too experienced at writing tutorials), I’m going to assume a working knowledge of CSS.  Some PHP knowledge will help, but for this tutorial I think I’ve got you covered.  If you don’t know CSS, W3schools has a section devoted to teaching it.  If you’re trying to build a WordPress theme from scratch, there’s a good tutorial e-book that you can download at the bottom of this link.  We’re going to jump right in with displaying the links.

To display the page links, you need this code:

<ul>
<?php wp_list_pages(); ?>
</ul>

That will display your links in an unordered list.  When you view the source, you’ll see that the list elements have classes of “page_item page-item-#”.  The current page you’re viewing will have an additional class of “current_page_item”.  That’s what we’re going to use in our style.css file to create the current page highlighting.

In your CSS file, the following will cause your page links to be white with over and underlines when hovered (just like the links on this site), and will cause them to be yellow when you’re currently viewing that page.

 /* non-current page links */
.page_item a {
color: #ffffff;
text-decoration: none;
}
.page_item a:hover, .page_item a:active {
text-decoration: overline underline;
/* current page links */
.current_page_item a {
color: #fff000;
text-decoration: none;
}
.current_page_item a:hover, .current_page_item a:active {
text-decoration: overline underline;
}

In your page_item element, you can define the style and look of your links as you see fit, but we’re not going to get into that right now.

I know what you’re thinking though - “but JoE, that’s all well and good for my page links, but what if I want a home link in the same navigation section?”

Fine.  I’m going to show you some PHP code here, which will allow you to add a “home” link that works with the link styling shown above - just like on my site!

You’ll recall that when we put the tag to get the links, we enclosed it in some <ul> tags. To illustrate this properly, I will show those tags again in the following example. Here goes:

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

So what in the hell is going on here? We start our unordered list in line one. In line two, we use the PHP if() call to find out if we’re on the homepage, using WordPress’ is_home() function as our argument. On this line, if it’s true that you’re looking at the home page, we’re going to give our list element a class of “page_item current_page_item.” That will trigger the “.current_page_item a” element from our stylesheet, rendering the “Home” link yellow, setting it apart from the other links. On line three, we use the “else” statement to say say that the case in line two isn’t true. This will only give our list element a class of “page_item,” leaving it to render in the same manner as the other site links other than the current page. At the end of the line, we use “}” to close the PHP “else” statement. On line four, we continue as normal with our list of pages - though we’ve added in “title= ‘” into that statement, which gets rid of the “PAGES” title. You can put that above your home link by using <li>PAGES</li>.

Hope this helps!