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]

jQuery Tip: Scroll to the top of active accordion items whenever a new item is expanded (with the option to account for a fixed header)

Here is a really handy tip on how to add functionality for a user to be scrolled to the top of the currently active accordion item whenever a new accordion item is expanded. The key here, and the one that I have spent more hours than I care to remember trying to figure out, is to calculate in the the height of the already-open-but-now-closing accordion item.

Let’s assume your HTML markup looks something like this:

<div class="accordionWrapper">
<div class="accordionButton" id="id1">Accordion #1 Title</div>
<div class="accordionContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan erat eleifend ipsum hendrerit mattis. Pellentesque in urna non eros fringilla suscipit et quis velit. Pellentesque pulvinar hendrerit interdum. Morbi scelerisque est rutrum, porttitor odio sed, interdum velit. Sed lobortis, nulla vitae tincidunt varius, diam metus malesuada odio, at commodo nunc sem vitae justo. Sed eu eros a lorem feugiat blandit eu id arcu. Curabitur ultrices massa vitae tempor lacinia. Integer ac ligula elit. Aenean vel porta nisl. Aliquam ac justo erat.
</div>
</div>
<div class="accordionButton" id="id2">Accordion #2 Title</div>
<div class="accordionContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan erat eleifend ipsum hendrerit mattis. Pellentesque in urna non eros fringilla suscipit et quis velit. Pellentesque pulvinar hendrerit interdum. Morbi scelerisque est rutrum, porttitor odio sed, interdum velit. Sed lobortis, nulla vitae tincidunt varius, diam metus malesuada odio, at commodo nunc sem vitae justo. Sed eu eros a lorem feugiat blandit eu id arcu. Curabitur ultrices massa vitae tempor lacinia. Integer ac ligula elit. Aenean vel porta nisl. Aliquam ac justo erat.
</div>
</div>
</div>

Here is the jQuery you can take and recycle as you see fit:

$(document).ready(function() {
$('.accordionButton').click(function() {
  	var thisParent = $(this).parent();
  	var trigger = $(this);  
  	var openAccordionHeight = $(thisParent).prevAll('.active').children().eq(1).outerHeight();
       if ($(thisParent).hasClass('active')) {
	        $(this).next().slideUp('normal');
	        $(thisParent).removeClass('active');
	        return;
       } 
       $('.accordionContent').slideUp('slow');
       $('.active').removeClass('active');
       $(thisParent).addClass('active');
       $('html,body').animate({scrollTop: $(trigger).offset().top-openAccordionHeight}, 500);
       $(trigger).next().slideDown(500);
   });

});

And here is the code to use if you have a fixed header and need to calculate that in as well:

$(document).ready(function() {
$('.accordionButton').click(function() {
   	var headerHeight = $('.header').outerHeight();
  	var thisParent = $(this).parent();
  	var trigger = $(this);  
  	var openAccordionHeight = $(thisParent).prevAll('.active').children().eq(1).outerHeight();
       if ($(thisParent).hasClass('active')) {
	        $(this).next().slideUp('normal');
	        $(thisParent).removeClass('active');
	        return;
       } 
       $('.accordionContent').slideUp('slow');
       $('.active').removeClass('active');
       $(thisParent).addClass('active');
       $('html,body').animate({scrollTop: $(trigger).offset().top-openAccordionHeight-headerHeight}, 500);
       $(trigger).next().slideDown(500);
   });

});

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]

WooCommerce Tips: Customizing the Credit Card Image for the WooCommerce Paypal Pro Plugin

Here is the code I used in my theme’s functions.php file to customize the images displayed on the Checkout page on a website using the WooCommerce Paypal Pro plugin:

function custom_paypal_pro_icon() {
    return get_stylesheet_directory_uri().'/images/credit_card_logos_9.gif'; // use "get_stylesheet_directory_uri()" so the path works when child themes are active
}
add_filter( 'woocommerce_paypal_pro_icon', 'custom_paypal_pro_icon' );

I imagine you can use this snippet for other payment gateways as well, since I actually customized this code based off an article I found which explained how to change the default Paypal icon.

The tag that clarifies which payment gateway’s icon you are changing is: woocommerce_paypal_pro_icon

I found the correct tag to use for the Paypal Pro plugin in wp-content > plugins > woocommerce-gateway-paypal-pro > includes > class-wc-gateway-paypal-pro.php on line 16:

$this->icon = apply_filters('woocommerce_paypal_pro_icon', WP_PLUGIN_URL . "/" . plugin_basename( dirname( dirname( __FILE__ ) ) ) . '/assets/images/cards.png' );

WordPress: How to Truncate the Length of Titles in Previous / Next Post Links

Here is the code I use to truncate the length of post titles in previous post / next post links on WordPress sites:

<?php
$prev_post = get_previous_post();
if($prev_post) {
   $prev_title = strip_tags(str_replace('"', '', $prev_post->post_title));
   $getlength = strlen($prev_title);
   $thelength = 25;
   echo '<a href="' . get_permalink($prev_post->ID) . '" title="' . $prev_title. '">&lsaquo;&nbsp;';
   echo substr($prev_title, 0, $thelength);
   if ($getlength > $thelength) echo "...";
   echo '</a>&nbsp;';
}

echo '&nbsp;|&nbsp;';

$next_post = get_next_post();
if($next_post) {
   $next_title = strip_tags(str_replace('"', '', $next_post->post_title));
   $getlength = strlen($next_title);
   $thelength = 25;
   echo '<a href="' . get_permalink($next_post->ID) . '" title="' . $next_title. '">';
   echo substr($next_title, 0, $thelength);
   if ($getlength > $thelength) echo "...";
   echo '</a>&nbsp;&rsaquo;';
}
?>

The result looks something like this:

« This is the title of th… | This is the title of th… »

Royal Slider: Play video when clicking anywhere in the preview image

Here is the code I use to play a YouTube or Vimeo video in a Royal Slider gallery when a visitor clicks anywhere in the preview image, and not just when they click the Play button itself:

<script>
jQuery(document).ready(function($) {
    $('.royalSlider').each(function() {
      var slider = $(this);
      $('.rsContainer').click(function() {
        slider.royalSlider('playVideo');
      });
    });
});
</script>

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>

How to preserve anchor tags in links shared using a social media sharing plugin on a one-page website

I ran into an issue today on a one-page scrolling website that is built using fullPage.js and therefore uses anchor links in the page URL to get people to the right place on the website. It is a WordPress website and on the blog, I naturally wanted to incorporate a social media sharing plugin.

The issue I ran into is that when you clicked a link to share the post to, say, Twitter, the link that was getting shared had the hashtag and everything following it – therefore, the anchor link -stripped out. Obviously this was not going to work – I need people to be able to share direct links to the specific post they are referencing, not to the entire website in general.

After some extensive online perusing, I finally found this extremely useful article – https://dev.twitter.com/discussions/512 – which contained exactly what I needed.

According to comment author @benward, “you need to URLEncode” the hashtag in the links, using %23.

Here is the solution that ended up working for me.

I used this line of Javascript to update the links in the social media sharing section of the page:

$(document).ready(function(){
    $('.social-media-links a').each(function(){
        this.href = this.href.replace('#', '%23');
    });
});

Voila! Now when people click the social media share buttons, my anchor links are preserved.