Blog

So here is another quick WordPress tutorial that will help deal with ‘post categories’. WordPress posts can be broken into categories so that if you have some posts marked as ‘pet related’ and some posts as ‘human related’ you could mark them as such. Usually most theme will have something like a ‘category xxx’ beneath each post so you knew what that post was related to.

Now If you want to filter your posts by category without using a widget or built-in-menu you can add your own custom menu anywhere you want. There are two important features built into the WordPress API that will help you with this. The first one is a function you could find from the wordpress api wp_list_categories and the custom css class built into wordpress current-cat (look at my css to see my implementation).

What you want to do if you want this on particular pages is to use a custom template where you use the function like I did below, or do what I did and add this code directly to your index.php file then check your URL with PHP to see if you want to display or not. In this case I only want to display on the page cavanaugh.pro/sean/news (my main blog page) and cavanaugh.pro/sean/category/”anything can be here”. I want it displayed on every category page. I used the php function substr to cut my url down to just the first 10 characters. I.E. www.cavanaugh.pro/sean/category/blahblahblah is shortened to www.cavanaugh.pro/sean/category/. The cavanaugh.pro/sean part is never used here. If you want the whole URL check my post here. Please comment below so I know how to improve this how-to.

<?php 

$sean_url=$_SERVER['REQUEST_URI'];
$sean_url=substr($sean_url, 0, 10); 
if($sean_url=='/news/')
{
 echo "<div id='custom_category_menu'>
 Categories: <u>All</u>"; 
 wp_list_categories('orderby=name&title_li=');
 echo "</div>";
}

else if ($sean_url=='/category/')
{
 echo "<div id='custom_category_menu'>
 Categories: <a href='/news/'>All</a>"; 
 wp_list_categories('orderby=name&title_li=');
 echo "</div>";
}
else
{
 //not a category or blog page
}
?>

and here is the css

#custom_category_menu{
text-transform:uppercase;
background-color:#777777;
background-image:-moz-linear-gradient(center bottom , #666666, #7F7F7F);
-moz-linear-gradient(bottom,#666,#7F7F7F);
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
padding:6px;
margin: 5px 0 5px 0;
font: 11px Arial,Verdana,sans-serif

}

#custom_category_menu li{
border-right: 1px solid #686868;
border-left: 1px solid gray;
display:inline;
list-style:none outside none;
padding:0 4px 0 4px;

}

#custom_category_menu li.current-cat a {
color:#ffffff;
text-decoration:underline;
}

Sometimes you want to grab your url from the web browser to do some thinking (maybe I want to display flowers on a random page, or want to display a lock if https is enabled). Here is some code that I have seen used over and over, and I have taken parts of it and used it for many a web project.

<?php
function curPageURL() {
 $pageURL = 'http';
 if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
 $pageURL .= "://";
 if ($_SERVER["SERVER_PORT"] != "80") {
  $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
 } else {
  $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
 }
 return $pageURL;
}
?>

now you can use the function

<?php
  echo curPageURL();
?>

I am assuming if you found this post you were using google!

ANYWAYS! The problem I was having on one of my sites was that the css implementation with my theme was no longer working.  Specifically I was using custom templates for certain pages and when I was on one of those pages the link to that page in the navigation menu would not be highlighted.  So usually wordpress takes care of this functionality with a css class called-> ‘.current_page_item’

A lot of times in themes you will see an implementation like this!

This would make the current page item white, so in my case when you click the ‘About’ Page you would get all your links as red except the current page, ‘About’ which would be in white.  This is awesome for user experience because not only do they see the title usually in h1 or h2 format as ‘ABOUT!’ they will see the about link formatted the way you want (in this case bright white!)

My problem was that if you use custom templates this can easily upset the normal wordpress functions.  I solved this problem by using a simple php that grabbed the address bar to see what page you were on since the function is_page(), is_home() and is_front_page() also do not work when using custom templates (not always, i see it work sometimes, but it is easier to fix it this way then dive into every theme and implementation.

When I grab the address bar I do a ‘if’ statement to check what page I am in, then throw a div tag so I can format the link appropriately.  In my case my code looks like this->

<?php if($_SERVER['REQUEST_URI']==”/2.0/blog/”) echo “<div id=’sean_override2?>”; ?>
<?php if($_SERVER['REQUEST_URI']==”/2.0/videos/”) echo “<div id=’sean_override_videos’>”; ?>
<?php wp_list_pages(‘title_li=&sort_column=menu_order&exclude=’.get_option(‘tbf2_exclude_pages’)); ?>
<?php if($_SERVER['REQUEST_URI']==”/2.0/blog/”) echo “</div>”; ?>
<?php if($_SERVER['REQUEST_URI']==”/2.0/videos/”) echo “</div>”; ?>

My css is as follows, but obviously this will be very different depending on what you are doing.

So I threw a div id tag when I was on my video page (which has id-24) so then I can over-ride any problems with the div tags and force it to white despite the is_wordpress functions failing.  YAY!  You can check out my implementation on http://www.capsoffplease.com/2.0

The video page on that page is throwing out some custom code to only grab the posts with the category tag ‘videos’ and this messed up the built in ‘current_page_item’.  My implementation does not only work awesomely, but does not slow my server down at all because it is only adding one conditional statement.  YAY!  If you found this post drop me a line, I like seeing where people come from!