WordPress: Wrap the published day, month, and year in span tags

Here is a quick and easy way to wrap the individual elements of your WordPress template’s published date output in tags:

<?php the_time('F <\s\p\a\n>jS</\s\p\a\n>, Y') ?>

Note: the key is to escape the each letter of the tag declaration with a back slash.

WordPress Tricks: How to create a WYSIWYG page template for an archive page

Recently, I was working on a WordPress site and needed the ability to have editable page content at the top of the archive page for a custom post type.

It took me a bit to figure out how to accomplish it but once I did, I am happy to report the solution was quite simple!

First, clone whichever page template in your theme that you want to use as the base template for your archive page. For example, let’s say you clone page.php and name your new file template-customposttype.php.

Make sure to change or add the template name at the very top of your cloned file:

<?php
/* Template Name: Custom Post Type Landing Page */
 get_header();
?>

Now, under the portion of the template which calls in the page content, let’s add a query for the custom post type we want to display on this page:

<?php query_posts(array('post_type' => 'customposttype')); ?>

Make sure you change ‘customposttype‘ to the actual name of the post type you want to display on this page!

Now, open your theme’s archive.php template file and copy the section between get_header() and get_footer(). Paste this into your template-customposttype.php file, just under the query_posts() statement.

Save your new template.

Now, in the WordPress dashboard, create a new page called My Custom Posts Archive Landing Page. In Page Attributes, make sure to select your new template (“Custom Post Type Landing Page”) to this page.

Add whatever content you want in the visual editor, then publish your new page and view it on your site.

You will now see your custom content at the top of the page and the list of blog posts for your custom post type underneath! Voila!

WordPress Tricks: A simple shortcode which will output the site title

Here is a very simple way to create a shortcode that will output your WordPress site’s title.

Copy and paste this snippet into your active theme’s functions.php file:

function site_title_shortcode() {
	 $blog_title = get_bloginfo('name');
	return $blog_title;
}
add_shortcode('site_title', 'site_title_shortcode');

Now you can easily output the current site title anywhere in your content using the shortcode [site_title]

WordPress Tricks: Allowing the use of shortcodes within custom shortcodes

I was recently working on a site where I needed to add custom shortcodes and also allow the use of shortcodes within my custom shortcodes and here is how I did it.

I started by adding the standard code for creating custom shortcodes to my functions.php file:

function my_custom_shortcode( $atts, $content = null ) {
    return '<div class="customText">'.$content .'</div>';
}
add_shortcode("customText", "my_custom_shortcode");

And then wrapped $content in the do_shortcode() function, like this:

function my_custom_shortcode( $atts, $content = null ) {
    return '<div class="customText">'. do_shortcode($content) .'</div>';
}
add_shortcode("customText", "my_custom_shortcode");

Now I am able to use standard WordPress shortcodes within my custom shortcode, like so:

[customText] This is my custom text with a shortcode.[button value="Read More..."] [/customText]

WordPress SimplePress Theme Customization: Adding custom thumbnails to home page slider

I recently worked on a project where I needed the ability to have the navigation thumbnails on the home page slider of the SimplePress WordPress theme to be customizable, not automatically generated off of the featured image as they are by default. Here are the steps I took to accomplish that:

First, install and activate the Multiple Post Thumbnails plugin.

Next, copy and paste this code into your theme’s functions file (be sure to create a child theme of the SimplePress theme before making these customizaations!):

if (class_exists('MultiPostThumbnails')) {
	new MultiPostThumbnails(array(
	'label' => 'Secondary Image',
	'id' => 'secondary-image',
	'post_type' => 'post'
 ) );
 }

Third, open the “includes/featured.php” file of your child theme, and replace this code on lines 109-118:

<?php
	print_thumbnail( array(
	'thumbnail' 	=> $arr[$i]["thumb_small"],
	'use_timthumb' 	=> $arr[$i]["thumbnail"]["use_timthumb"],
	'alttext'		=> $arr[$i]["fulltitle"],
	'width'			=> (int) $width_small,
	'height'		=> (int) $height_small,
	'et_post_id'	=> $arr[$i]['post_id'],
) );
?>

With this:

<?php
if (class_exists('MultiPostThumbnails')) {                              
$t=0;
      while ($t<1) {
          $image_name = 'secondary-image';
          if (MultiPostThumbnails::has_post_thumbnail('post', $image_name)) { 
              $image_id = MultiPostThumbnails::get_post_thumbnail_id( 'post', $image_name, $arr[$i]['post_id'] ); 
          }   
          if ($image_id == "") {
              $image_id = get_post_thumbnail_id( $arr[$i]['post_id'] ); 
          }
              $image_attributes = wp_get_attachment_image_src( $image_id );  ?>
              <img src="<?php echo $image_attributes[0]; ?>" alt="<?php echo $arr[$i]["fulltitle"]; ?>" width="<?php echo $width_small; ?>" height="<?php echo $height_small; ?>">
          <?php
                $t++;
      }                                     
}; 
?>

And there you have it – now you have the ability to choose a secondary featured image for your posts which will be used for the navigation thumbnail in the home page slider when available, otherwise the thumbnail will default to the featured image as usual.

WordPress Tips: Adding keyboard navigation between posts

I used the tips in this helpful post today to add keyboard navigation between posts on a WordPress website.

The jQuery script is:

(function($){
   $(document).ready(function () {
      $(document).keydown(function(e) {
         var url = false;
         if (e.which == 37) {  // Left arrow key code
            url = $('.prev a').attr('href');    }
         else if (e.which == 39) {  // Right arrow key code
            url = $('.next a').attr('href');    }
         if (url) { window.location = url;   }
     });
   });
})(jQuery);

Then, just make sure your previous and next post links have the appropriate classes:

<div class="prev-next">
<div class="alignleft prev"><?php previous_post('&laquo; %', '', 'yes'); ?></div>
<div class="alignright next"><?php next_post('% &raquo; ', '', 'yes'); ?></div>
</div>

WordPress: Conditional PHP code to check if page is set as the website home page

Here is the code I use in my WordPress template files to add a conditional statement which checks to see if a page is set in the dashboard as the site home page:

<?php 
$front_page = get_option('page_on_front');
if (!is_page($front_page) ) { ?>
Show this text on the front page of the website.
<?php } ?>

How to add an incrementing number counter inside the WordPress “while” loop

This morning I spent some time figuring out how to add an incrementing number counter inside a WordPress “while” loop and here is how I finally accomplished it:

I defined the first number (in this case, the variable $postnum) before the “while” loop started, like so:

<?php $the_query = new WP_Query( $query_string.'showposts=4' ); ?>
<?php $postnum = 0; ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>

Then I added my div with the incrementing number class within the “while” loop, like so:

 
<?php $postnum++;
	echo "<div class='homepagepost-";
	echo $postnum;
	echo "'></div>";
?>

Now my output for each post includes my custom-numbered div:

<div class="homepagepost-1"></div>
<div class="homepagepost-2"></div>
<div class="homepagepost-3"></div>