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 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: How to use “get_sidebar()” in a foreach loop

Today I was working on a one-page WordPress blog template and encountered a situation where I need to put a call to the WordPress function “get_sidebar” within my loop. The sidebar only showed up on the first post result in that loop on the website however.

A bit of online research turned up this solution finally – .

Rather than using the default function “get_sidebar“, I ended up using an “include” for the sidebar.php file in my loop, like so:

<?php include( TEMPLATEPATH . '/sidebar.php'); ?>

And now the sidebar is being displayed in each iteration of my loop. A simple and effective workaround!

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.

How to fade in content on page scroll on a website that uses fullPage.js with CSS and jQuery

I recently used the fullPage.js script on a website that I am working on and ran into a bit of trouble getting the section content to fade in nicely when it was scrolled into view. Here is the way I was able to accomplish that feature.

Following the instructions on how to incorporate fullPage.js into my site, my HTML structure looked like this:

<div id="fullpage">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>

First, I added this declaration to my stylesheet, to start all of the page sections out as invisible:

.section {
	opacity:0;
}

Next I found the onattrchange listener (a jQuery plugin). I downloaded this script – https://raw.github.com/meetselva/attrchange/master/attrchange.js – and uploaded to it to my website, and then added the call to it into my webpage, after my call to the jQuery library:

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/attrchange.js"></script>

*Note: make sure to verify that the path to your script in the code above is correct!

And then, finally I added this bit of jQuery to my webpage:

<script>
$(document).ready(function(){

$(".section").eq(0).animate({"opacity":"1"},1500);  //fade the first div.section in on page load

$(".section").attrchange({
    trackValues: true, // set to true so that the event object is updated with old & new values
    callback: function(evnt) {
        if(evnt.attributeName == "class") { // which attribute you want to watch for changes
            if(evnt.newValue.search(/active/i) == -1) { // "active" is the class name you search for inside "class" attribute
                $(".section.active").animate({"opacity":"1"},1500); //fade in the section with class active
            }
        }
    }
});

}); //end of document ready
</script>

And that did the trick! Now my section content fades in nicely when the new section is scrolled into view.

How to use Google analytics on a parked domain

I have found a way to use Google analytics to track traffic on a parked domain by using a PHP conditional statement to check which domain a visitor is accessing your site with and to render the correct Google analytics javascript code based on the domain.

First, make sure to set up a Google analytics profile for each of your domains – both the domain your site lives on and each of the parked domains that you want to track traffic on.

Then added this PHP statement in your website where you would typically place the analytics code itself:

<?php
$firstUrl = "yourparkeddomain.com";
$secondUrl = "yourwebsitedomain.com";
$currentUrl = $_SERVER['SERVER_NAME'];

if($currentUrl == $firstUrl) { ?>
<script>
  //insert Google analytics script for your parked domain here
</script>

<?php } else { ?>
<script>
  //insert Google analytics script for your main website domain here
</script>  

<?php } ?>

I think this is pretty self-explanatory – the PHP script is checking the current URL that the visitor is accessing your site at against the different URLs you have defined in the PHP script and is loading the correct Google analytics script based off of that information.

I have found that this gives me a way to at least track the data of visitors who are landing on my site through parked domains.