Category: Wordpress

Get template name in WordPress

Generating the template name isn’t really a big deal, globally it’s available via echo get_option('current_page_template'). But in this case, when I was generating a slideshow of multiple pages, I needed to pass the slideshow query to it. So I had to write up my own for functions.php.


function get_template_name($query1) { 
	$template_name = get_post_meta( $query1->post->ID, '_wp_page_template', true ); 
	$length = strlen($template_name) - 4;
	if (strpos($template_name, '.php')) { 
		$template_name = substr($template_name, 0, $length);
		return $template_name;
	} else { 
		return $template_name;
	}
};

Call it after the while condition and it will generate the template name for each post (ie: echo get_template_name($query1)) The template name is stored like a simple meta value and includes the .php extension. So this will check for that to strip it out, otherwise will return ‘default.’

Why is this necessary for my slideshow? Well, some pages are to be laid out differently, this allows the CSS to make multiple slides of differing layouts.

Header Image via Featured Thumbnail

A lot of sites employ a header splash, notably photographer websites.  It is a highly requested feature of clients.  Fortunately WordPress has an easy hook with its featured image (thumbnail) setting that will allow an admin to set whatever image they wish for each post or page.  First, in functions.php, activate thumbnail support.

add_theme_support( ‘post-thumbnails’ );

Then in your theme file, such as header.php, call it forth.

<?php if (has_post_thumbnail( $post->ID ) ) : // is thumbnail set?
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘single-post-thumbnail’ ); // grab image attr array ?>
<header class=”main-header” style=”background-image: url(‘<?php echo $image[0]; // the first array item is the src ?>’)”>
<?php else : ?>
<header class=”main-header” style=”background-image: url(‘<?php bloginfo(‘template_url’); // define a default in your theme folder ?>/images/defaultbg.jpg’)”>
<?php endif; ?>

Then CSS3’s background-size will do you well.   Alternatively you could have it echo into an img tag and set width, height 100% auto.

 

List Sub Categories of Parent Category

I just spent a good Friday resolving something that should be very simple. Of course it’s snowing like crazy so I’m not minding. On the Wake Magazine site I’ve been working on, we have a Blogs category that contains multiple sub categories. It’s a very newspaper-like site with multiple writers and thus multiple voices needing their own blog section. I wanted to list out all those sub categories anywhere in the blog area. I already addressed the magic (or insanity) of wp_list_categories so I won’t go there but my question was basically how do I call forth the parent category in a child category page? The solution was pieced together with some searching of the forums and uses a rare function cat_is_ancestor_of that I had no idea existed. Probably most WordPress run websites do not utilize the category terminology very deeply and so those issues are not often touched on. This solution also conditionally display only if you are on sub category page.

<?php
 foreach((get_the_category()) as $childcat) {
   $parentcat = $childcat->category_parent;
   if (cat_is_ancestor_of($parentcat, $childcat)) : ?>
     <div id="subnav">
     <h4>Insert a title or have it pulled from the parent cat</h4>
     <ul>
     <?php wp_list_categories('orderby=id&show_count=0&title_li=&child_of='.$parentcat); ?>
     </ul>
     </div>
   <?php endif; 
   } ?>

Super Simple Random Image

This super simple piece of PHP code will randomly pull images from a folder that are numbered (ie: 1 through 9).  Technically it’s just any folder with numbered image names.   For TCS I created a folder called gallery in my theme folder and placed images in it 1.jpg, 2.jpg and so forth.

<?php
// Change this to the total number of images in the folder
$total = "9";
// Change to the type of files to use eg. .jpg or .gif
$file_type = ".jpg";
// Change to the location of the folder containing the images
$image_folder = "gallery";
// You do not need to edit below this line
$start = "1";
$random = mt_rand($start, $total);
$image_name = $random . $file_type; ?>

Next this echo will call forth the two locations.

<?php echo "$image_folder/$image_name"; ?>

I actually integrated this into the background CSS to produce a cool random background image effect for the header.

<div id="header" style="background: url('<?php bloginfo('template_directory'); ?>/<?php echo "$image_folder/$image_name"; ?>') center top no-repeat">

Exclude Categories from Post Categories List

The exclude variable in the stand-alone wp_list_categories doesn’t exist for get_the_category when your blog is listing the categories related to that post. So you have to create a custom function to define the categories which output. I found the solution at Technokinetics and adapted it here. Another blog also covers the topic (of course you can define cat_ID instead of cat_name).

Put in your theme. Btw the (‘, ‘) is a separator you can change that will go between the categories.

<span><?php custom_cat_list(', '); ?></span>

Put in functions.php, note the function below uses an && AND operator.

function custom_cat_list($separator) {
      $first_time = 1;
      foreach((get_the_category()) as $category) {
        if ($category->cat_name != 'Music' && $category->cat_name != 'Hipsters') {
          if ($first_time == 1) {
            echo '<a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>'  . $category->name.'</a>';
            $first_time = 0;
          } else {
            echo ' I don't like music or hipsters or you could just leave this blank. ';
          }
        }
      }
    }

Super Simple Featured Box

I’m using this function because I recently created a featured box for TwinCityScene and would like control over its structure.  While the built-in sticky option could suffice for simple CSS sizing, it doesn’t really let me do much with say thumbnails.  I also prefer not to use a heavy plug-in which then we get into the arena of ranking featured posts when honestly I want to keep this site automated.

To do this box, I create a new category called “Featured.” This is an administrative category being merely functional. However I still want to list the post categories that the featured post belongs to (ie: “Music,” “Art”).  So in my index.php (or applicable theme file) I called the loop twice.  In the first I told query_posts to show only 1 post from category 684 which happens to be the new Featured cat.  then the second loop query_posts omits 684 with a negative – sign.   I’m sure there are other ways to customize the loop but I found this to be the most efficient and natural for WordPress instead of a litany of if else statements.

<?php query_posts("showposts=1&cat=684"); ?>
<?php while ( have_posts() ) : the_post() ?>
My structure for the featured box where I used <?php custom_cat_list(', '); ?> to omit the Featured Category from showing up.
<?php endwhile ?>

<?php query_posts("cat=-684"); ?>
<?php while ( have_posts() ) : the_post() ?>
My structure for regular posts where get_the_category lists normally.
<?php endwhile ?>

Integrate Links Into Navigation

If you are using wp_list_categories sometimes you want to manually add HTML/links before and after the categories that are generated in order to preserve the ul list. Similarly, you’d want to bundle the ul tags within an if else statement. Most PHP gurus know this but basically you can use an echo output to generate the needed HTML. I used this for TwinCityScene in adding a home link to the front and social networking buttons to the end. Why would you want to go to the hassle to do this? Accessibility! Special browsers will love you for logically grouping all your links into one ul nav.

<?php 
global $post; 
echo '<ul class="catnav"><li class="cat-item homelink"><a href="/">Home</a>'; 
wp_list_categories('orderby=name&amp;title_li='); 
echo '</li> 
<li class="socnet iconrss"><a title="RSS Feed" href="rss.xml">RSS Feed</a></li> 
<li class="socnet icontw"><a title="Twitter@TwinCityScene" href="https://www.twitter.com/twincityscene">Twitter</a></li> 
<li class="socnet iconfb"><a title="Facebook Fan Page" href="https://www.facebook.com/twincityscene">Facebook</a></li> 
'; } 
else { }; 
?>

The attached CSS follows. Of course it’s a bit gussied up but the main elements are there.

.catnav { background: #000 url('images/bgnav.png') center top no-repeat; clear: both; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid #111; border-top: 1px solid #111; width: 100%; display: block; height: 35px; text-align: center;}
.catnav li.cat-item { color: #555; display: inline; text-align: left; margin: 0 5px 0 0; padding: 10px 0 10px 2px;}
.catnav li.cat-item a { text-shadow: 1px 1px #333; text-transform: uppercase; padding: 0 7px 0 7px; height: 35px; color: #ccc; border-right: 1px solid #333; font: 300 1.3em Helvetica, Arial, sans-serif; letter-spacing: -0.5px; line-height: 1.9em; }
.catnav li:hover a, .catnav li a:hover { text-shadow: 1px 1px #333; color: #fff; text-decoration: underline;}
.catnav li:hover { color: #fff; background: transparent url('images/bghover.png') center top no-repeat;}
.catnav li.homelink { color: #000;}
.catnav li.homelink a { padding-left: 5px; border-left: none; }
.catnav li.homelink:hover a { color: #fff;}

.catnav li.socnet { border: none; float: right; margin: 0 10px 0 10px; padding: 0;}
.catnav li.socnet a { margin: 2px 0 0 0; width: 30px; height: 30px; display: block; text-indent: -999em;}
.catnav li.icontw a { background: transparent url('images/twitter.png') center center no-repeat; }
.catnav li.iconfb a { background: transparent url('images/facebook.png') center center no-repeat; }
.catnav li.iconrss a { background: transparent url('images/rss.png') center center no-repeat; }