Three sliders, one option, and a few tears later

Yes, sliders have a special place in my heart. Granted a super tiny place in my theme reviewer’s heart. Now, I’ve created a few tutorials, guides, resources, links, what you will on this site in order to share some of my insights into WordPress theme development and perhaps some WordPress theme reviews along the way.

There are a lot of things I have learned and a lot of things I had to learn. I think the biggest takeaway from this post will be that integrating a slider plugin to a theme is fairly easy to do but a pain in the butt to fully integrate.

So, let’s get the show on the road!

First steps

Okay, we need to figure out first what slider we would like to play nice with, right? I chose sort of at random three different plugins that all create sliders.

I was going to use Meta Slider but they actually have a fairly extensive documentation section on theme integration. So major kudos for them on providing those code snippets!

As you can see we have our three sliders to choose from and now we need to determine if they are active or not. I know some will want to use is_plugin_active() but I will tell you not to. The reason for not doing so is so that you don’t load an extra file. So instead we will use some basic PHP functions to check.

function jc_get_sliders(){
	$sliders = array();
	
	if ( class_exists( 'Soliloquy_Lite' ) ){
		$sliders['soliloquy'] = 'Soliloquy';
	}
	
	if ( function_exists( 'huge_it_slider_activate' ) ){
		$sliders['huge_it_slider'] = 'Huge IT Slider';
	}
	
	if ( function_exists( 'wd_slider' ) ){
		$sliders['wds'] = 'Slider WD';
	}
	
	return $sliders;
}

I know some of you are wondering why I chose to use the class and functions I chose to check for. Those are the classes and functions those respective plugins use when they are activated. If those plugins are not active they will not exist.

Now that we have our options for plugins we can create our theme customizer options.

add_action( 'customize_register', function( $wp_customize ){
	// Set up the section
	$wp_customize->add_section( 'slider-section',
		array(
		'title' => __( 'Select a slider', 'jc-domain' ),
		'priority' => 30,
		) );
	// register the setting
	$wp_customize->add_setting( 'slider-type',
		array(
		'default' => '',
		'sanitize_callback' => 'jc_valid_slider',
		) );
	// register the setting's control but only output if those sliders exist
	$wp_customize->add_control( 'slider-type-input',
		array(
		'label' => __( 'Select the slider to use', 'jc-domain' ),
		'settings' => 'slider-type',
		'section' => 'slider-section',
		'type' => 'select',
		'choices' => jc_get_sliders(),
		'active_callback' => 'jc_sliders_exist'
		) );
	// register the setting
	$wp_customize->add_setting( 'slider-id',
		array(
		'default' => '',
		'sanitize_callback' => 'absint',
		) );
	// register the setting's control but only output if those sliders exist
	$wp_customize->add_control( 'slider-id-input',
		array(
		'label' => __( 'Input the ID of the slider you would like to use', 'jc-domain' ),
		'settings' => 'slider-id',
		'section' => 'slider-section',
		'type' => 'number',
		'active_callback' => 'jc_sliders_exist'
		) );
	
});

Great! Now you can see that I am using an active_callback for the controls. This is so that the section will not show if there are no active plugins to choose from. That means we have to create that callback. Fairly simple:

function jc_sliders_exist(){
	if ( !empty( jc_get_sliders() ) )
		return true;
	return false;
}

As you see we can utilize the first function we created that gets the sliders to our advantage. If the array is not empty we return true, otherwise we return false. Straight-forward. Now, you may notice one function we may need to create and that is jc_valid_slider. This is what will check if the option is a valid option and return it. So, let’s create that shall we:

function jc_valid_slider( $value, $control ){
	return ( array_key_exists( $value, jc_get_sliders() ) ) ? $value : $control->default;
}

Yes, you can see we are still using jc_get_sliders() to get our values. No need to create another wheel when we already have one, right?

The output

I know you are now wondering, “But Jose, how will you display the slider?” Well, let me show you how! We use get_theme_mod() and do_shortcode() with a quick check to output our slider.

add_action( 'jc_slider_area', 'jc_create_slider' );
function jc_create_slider(){
	// get the setting for the type of slider
	$type = get_theme_mod( 'slider-type' );
	// get the setting for the ID of the slider to use
	$id = get_theme_mod( 'slider-id' );
	
	// Check if we have chosen a slider
	if( !$type ){
		return;
	}
	
	echo do_shortcode( "[$type id='$id']" );
}

Great! But I know you are probably wondering why I’m using an action hook rather than creating a function and calling it. What’s super cool about using a hook is that this can be extended or removed with a child theme or functionality plugin. Super great way of making your theme extendable and child theme friendly. So, in the last step all we need to do is create that action hook.

<?php do_action( 'jc_slider_area' ); ?>

By adding that to where you want the slider to show, you can create a great hook for any theme developer to utilize.

Minor note

If you hadn’t noticed, I registered the customizer settings using an anonymous function. This will work on PHP versions 5.3 and higher so please make sure you are aware of what your environment you are developing for. So go, explore and try to break things along the way!

Using the_post_thumbnail

For some time I’ve noticed one thing that many people like doing. Recreating core functions. One being the_post_thumbnail(). The reason it drives me crazy is because it means maintaining more code in your theme. Why would you do that to yourself? One of the common things is to wrap it in a conditional check and then use the function if there is a thumbnail. Great! Looks like:

if ( has_post_thumbnail() ){
	the_post_thumbnail();
} else {
	custom_post_thumbnail();
}

The problem

Rewriting a core template tag to suit the theme’s design. Yes, it drives me insane when I know that there is a filter or a hook that can be applied to core functions. Yes. Core has a lot of hook and filters to modify. I’m not saying learn them all but merely suggesting look at the core code when you want to see what and how things are done.

Core file

In order to create our little function let us look at the actual core code, shall we? All the workings are actually placed in the wp-includes/post-thumbnail-template.php file. A little crazy, right? Let’s take a look at the code:

function the_post_thumbnail( $size = 'post-thumbnail', $attr = '' ) {
	echo get_the_post_thumbnail( null, $size, $attr );
}

There it is. So what does it do? It creates a default size ( post-thumbnail ) and passes a null argument to get_the_post_thumbnail. A little weird but makes sense, right? So let’s look at the actual function that gets us the image, yeah?

function get_the_post_thumbnail( $post_id = null, $size = 'post-thumbnail', $attr = '' ) {
	$post_id = ( null === $post_id ) ? get_the_ID() : $post_id;
	$post_thumbnail_id = get_post_thumbnail_id( $post_id );

	$size = apply_filters( 'post_thumbnail_size', $size );

	if ( $post_thumbnail_id ) {

		do_action( 'begin_fetch_post_thumbnail_html', $post_id, $post_thumbnail_id, $size );
		if ( in_the_loop() )
			update_post_thumbnail_cache();
		$html = wp_get_attachment_image( $post_thumbnail_id, $size, false, $attr );

		do_action( 'end_fetch_post_thumbnail_html', $post_id, $post_thumbnail_id, $size );

	} else {
		$html = '';
	}

	return apply_filters( 'post_thumbnail_html', $html, $post_id, $post_thumbnail_id, $size, $attr );
}

As you can see it looks like quite a bit. So we will break it down a little bit more. Go down the lines and explain a little more.

Breakdown: the arguments

The first thing you will see is that it asks for a $post_id, then an image size and an attribute. Cool. Still with me? Good. Now let’s move on to the next line of code:

$post_id = ( null === $post_id ) ? get_the_ID() : $post_id;

It tests if the $post_id is identical to null and if it is, we get the post’s ID by using get_the_ID(). Pretty neat if you ask me.

Next, it passes that ID to get_post_thumbnail_id in order to get the image’s attachment ID. You read it right.

The next line is where we come across our first filter. Yay! And it is post_thumbnail_size. What this means is that if you wanted to use

the_post_thumbnail( 'my-theme-image' );

You can add a filter and make it a conditional setting as well. You can use:

add_filter( 'post_thumbnail_size', 'my_new_sizes' );
function my_new_sizes( $size ){
	if ( is_front_page() || is_home() ){
		return 'my-large-front-image';
	}
	return 'my-theme-image';
}

Awesome, right? I like to think so. The next several lines are what create the actual code.

First it checks if it is a true value and if it is we can continue with our code. Then we see an interesting line:

do_action( 'begin_fetch_post_thumbnail_html', $post_id, $post_thumbnail_id, $size );

Kind of a neat little hook. You can print things just before the image tag. From there it updates the thumbnail cache, and then finally it gets the image’s markup by using wp_get_attachment_image( $post_thumbnail_id, $size, false, $attr ). Cool, right? Right. But we are not done just yet.

We have another hook:

do_action( 'end_fetch_post_thumbnail_html', $post_id, $post_thumbnail_id, $size );

With this particular one you can also print things out before the image’s markup. For example:

add_action( 'end_fetch_post_thumbnail_html', 'demo_before_image' );
function demo_before_image(){
	_e( 'I appear before the image', 'textdomain' );
}

The end result will be:

I appear before the image<img width="522" height="270" src="http://sample.dev/wp-content/uploads/2013/03/featured-image-horizontal.jpg">;

Super cool, right?

The next and final steps in the function is the setting of $html. You’ll see that if the $post_thumbnail_id isn’t set then it returns an empty string. From there the last line of code is:

return apply_filters( 'post_thumbnail_html', $html, $post_id, $post_thumbnail_id, $size, $attr );

So, it returns the HTML. Great. As you can see you can filter this.

New filter

Yes, we will use a filter because that is what all good developers like to use and should use.

add_filter( 'post_thumbnail_html', 'theme_slug_post_thumbnail', 10, 2 );
function theme_slug_post_thumbnail( $html, $size ) {
	// get featured image based on $post->ID
	$post_thumbnail_id = get_post_thumbnail_id( get_the_ID() );

	// set size
	$size = (string) apply_filters( 'post_thumbnail_size', 'my-theme-image' );

	//do your magic here
	if ( $post_thumbnail_id ) {
		if ( in_the_loop() ) {
			update_post_thumbnail_cache();
		}
		$html = wp_get_attachment_image( $post_thumbnail_id, $size );
	} else {
		$html = '<img class="featured-image" src="' . get_template_directory_uri() . '/img/custom-thumb.jpg" alt="Image">';
	}

	return '<div class="feature-image-wrapper">' . $html . '</div>';
}

As you can see it is a simplified filter because we aren’t changing every variable the function has to offer. You can, of course, explore more and create your own version. You will see that the one filter I kept was the post_thumbnail_size and that is because if a child theme is created, the child theme can change that with a simple filter.

Using a post as a menu item

Truly a neat little find for many people. I know when I saw this for the first I was beyond astounded.

It does seem a little odd to use one but there are some random cases when it can be useful. Rather than having to use a page you can use a post. Granted it will show up with all the other posts but it is a cool thing to know.

There are a few steps required:

  1. Create the post.
  2. Create a menu
  3. Create the menu item

The first thing is, of course, to create the post. Could be anything you want about whatever you want. A cat, a dog or even a random turtle you saw the other day.

Next, you want to create a menu. In order to do so you want to go to the Appearance section and select Menus. That will bring up the Menus screen. If you don’t already have a menu created, name it whatever you want and press the create button.

Finally, we create the menu item. This is where it can be a little tricky. Why, you ask? Well, by default WordPress shows three options. You can actually have more. You just have to look in the right place.

screen-options

When you click on the Screen Options tab you get a nice little selection of things that you can now edit. As you can see from the following image you now can choose tags, categories and even posts as menu items.

new-options
Options galore!

From there you will choose what you want. In our case we will check off all the options because we like to live dangerously and love options.

Now we see that have a few more things in our roster of options.

new-menu-options

From there we can now choose posts as menu items. Awesome, right?

Playing nice with plugins

Yep, you read that right. Playing nice. With plugins. I know what you’re thinking and are probably wondering what I mean by that.

Don’t lie

You know you want to ask. What do you mean by that?

What I mean is that as a themer you shouldn’t be adding frivolous things to your theme. What I mean by this is things that add content or completely alter, and manipulate, content. Things like sharing buttons, meta boxes or things that a user may end up losing once the choose a different theme. That is what I mean.

Background

What really brought this up is a change in guidelines to the theme review. It has been around but up until recently has been more enforced than before. At least from what I’ve noticed.

jetpack-sharing

Recently, I did a review where the developer used plugin functionality in the theme. Mainly the sharing buttons. I know, I know. Everybody loves to share their content. But the thing is when I switch a theme I want those buttons to stay where they are and not move around on me. A good portion of the time they reside towards the bottom of the post. As noted by the quick screenshot. That is using the Jetpack plugin’s sharing module, for demonstration purposes of course.

social-sharingJetpack is a great plugin and does the job for me and a few others. But what about those that append their sharing options to the content. It can look a little funky. A great example is the image on the left because it shows simple content but it showcases the issue I’m more concerned about fixing.

What is the issue?

The issue is that when you have content that is paginated the sharing icons get right in the middle of it all. As you can see the real content of the post ends with “Post Page 1” but can continue to page 2 and then three. It creates a separation that can ruin almost any design.

Now, I know what you’re probably going to say. But Jose, that’s a plugin. My theme handles it better. Of course it does. The theme developer chose the placing of the elements and how to display it. But what if you are a new user and are using a plugin? Looking at the second image you can see what can happen. To me it does look a little odd having sharing icons in between.

A better example is the default theme Twenty Fourteen. I wanted to use it because I do like the way it looks but when it came to displaying the post pagination it didn’t look right to me.

default-sharing

As you can see it almost feels like the content gets cut off. Yeah, I know it does seem a little picky but when you want to share a theme with many people you have to think about who the end-user really will be. It reminds me of a talk Nikolay did in WordCamp SF. Made me think about who will really be looking at the code.

How to solve it

What’s really funny about how I managed to resolve this issue, at least for me, was by thinking about when that social bar gets added. Now, do keep in mind I do use Jetpack on this site and try to test with it on a local setup. This is where the playing nice with plugins comes into play.

Notice I install the plugin and add styling and functionality to it rather than create my own? That is the way any theme developer should be creating any and all themes. Whether personal, for fun or commercial.

Currently I’m trying to redesign my site, of course, and have at least one post that is split up into more than one page. While that is sort of an edge case it does represent a bit of an issue that I would like to discuss.

The first thing I did of course was turn to the code. The first file I looked at was the Jetpack PHP file to see what things were being loaded. I noticed that Jetpack uses modules so I went ahead and skipped straight to the sharedaddy module. Started looking at the sharedaddy PHP file and it led me to the sharing file. Then the sharing service file.

You’re sort of wondering where this is going right? Thankfully that was the last file I really needed to see because towards the end of the file there was a line of code that was music to my eyes.

add_filter( 'the_content', 'sharing_display', 19 );

What that meant was that I could add a filter to the content and add a priority greater than 19.

Enter the code

So in order to add to the content I needed to filter the content and add to it. What is nice is that we can easily do that with a simple call. By using

add_filter( 'filter_name', 'function_callback' );

I managed to get the result I wanted and was so desperately looking for. The code I used is actually quite simple. I think that is part of the reason I’m shocked it worked the way it did.

// Append linked_pages if any are available
add_filter( 'the_content', 'my_theme_add_pages' );
function my_theme_add_pages( $content ){
    // Get the markup
    $linked = wp_link_pages(
        array(
            'before' => '<div class="page-links">Pages: ',
            'after' => '</div>',
            'echo' => false,
            ) );
    // If there is any markup append it
    if ( $linked ){
        $content .= $linked;
    } // otherwise we just return the regular content
    return $content;
}

Simple right? What really makes this work is the last key in the array. The echo key and setting it to false so that it won’t output any code and stores it to the $linked variable. Then a quick check to see if there is anything and if there is concactinate to the $content. The next step is styling it to give it some room.

personal-adjustment

As you can tell I still have some styling to do but now my post/page navigation links don’t appear after my sharing icons.

Uploading and updating your theme

It’s no secret I love doing theme reviews. When I get a chance. The past couple of weeks though I’ve only been able to do one a week if I’m lucky. I do read the theme-reviewers emails when I open my inbox but of course that just isn’t enough.

Background

If you didn’t already know for the last year I’ve been stating that I am working on a theme to submit. Yes and no. The biggest thing I’ve actually been working on is a personal theme. for this site. I’ve looked at many themes and have even thought about purchasing a theme from an established, and reputable theme foundry. As you can tell I chose to use the Displace theme.

For the time being I like and it does the job. I’ve thought about modifying it but want to create my own. Maybe down the road. We’ll see. I’m getting a little sidetracked so we’ll talk about the issue at hand. Updates and the review process.

Uploading a new theme

themes-directory

The process is actually quite simple. One of the first things you want to do is go to the themes directory. As you can see from the image on the right hand side the welcome screen showcases a few featured themes and on the right hand column there are three sub-sections: Popular, Newest and Recently updated.

You will want to login with your WordPress.org username and password. After you have done that you have, and I mean have to, read more about having your theme hosted in the repository. I cannot emphasize that part enough, either. In particular the guidelines to getting your theme accepted.

That little about page is very crucial and does look a little like:

themes-directory-2
Read! And I mean read this page.

Yeah, it does seem a little daunting but it is fairly simple and straight-forward. Some information about theme-tags, guidelines and why you would want your theme in the repository.

So, you’ve signed in and want to upload your theme. You go to the upload section by clicking the Theme Authors link and you are taken to the upload screen. This is the crucial one you will want to store not only in your bookmarks but in your head as well. This page is what will create a new Trac ticket with your theme so that an actual human being will go over your code and give you feedback and hopefully approve your theme.

A ticket?

You read that right. A ticket. You will receive an email confirmation with that ticket number. If that doesn’t happen you may want to contact the theme-reviewers list and I’m pretty sure at least one person will be able to help you out.

themes-trac-intro

The next stage is the review process. When I started doing reviews it was a little tedious, to say the least, only because so much of the process wasn’t as automated as it is now.

What a reviewer would do is login to the Trac for WordPress themes, go to the report, as demonstrated in the next image, and see if there were any other tickets that have been submitted using the same username/theme and close the tickets. The reviewer would then conduct the review with the most current version of the theme.

trac-ticket-queues

What next?

The next thing you will be getting is feedback. Good, bad and maybe even some ugly. We don’t always like to hear the truth but let’s face it. We don’t always do our best the first time around. I know I don’t.

previously-approvedFrom here on out it will be a human being, an actual living, breathing, eating, human being that will read over your lines of code. That person will read every character and see every image you used to create that WordPress theme. And hopefully, just hopefully it will pass inspection. The key here is communication. Get a dialogue between both you and the reviewer. A great example is a review I did a few weeks ago to the Customizer theme as seen on the image to the left.

Now, I know you’re wondering why such a long list of tickets that developer has. At least those that looked at the image. That was because some of those are updates. If you’re not asking how you update your theme then I’m not sure we can keep talking. In real life. I kid of course.

In order to update not only your theme in the repository, but in the theme trac you will want to visit the upload page once more.

upload-signedAfter you have signed in, naturally, you will head back to the upload page, make sure you bump the version of your theme in your stylesheet and you will be on your way to sharing with the WordPress community.

 Final thoughts

As I said the key is communication. Talk to the person conducting the review and the developer. You would be amazed about what both parties can learn and you also may make a new connection in the end.

All about my Child – Theme that is

Frequenting the WordPress support forum always makes wonder a lot of things. The biggest one, I hate to admit, is do people read. I know it does come off a little mean, rude but the truth is a lot of the threads that are in the forums could easily be avoided. The number one being how to modify a specific theme.

The forums are filled with a few of these but the biggest mistakes is that people don’t really read. I want to say part of that reason is the welcome page to the forums. Don’t get me wrong I can find my way quite easily since first starting over a year ago but for a first timer you will want to look elsewhere.

The thing that people want to be able to do is modify a theme or alter it to make it their own. The best way to do this is by creating a child theme. The codex has a good quick and simple tutorial and then gets a little more detailed about how child themes function.

I’ll break things down into steps. Why? Because that’s how most of us read and follow directions, right?

  1. Create empty folder
  2. Create style.css
  3. Active

Create an empty folder

One of the first things to do is create a folder. It really doesn’t matter what you name the folder. 

Create a new folder
Create a new folder

I chose twentysumchild for demonstration purposes but it really could be anything you want. In that folder we will then create a new file. It will be the main file for our child theme. Can you guess the name? Yep,

style.css

will be the newly created file.

Create style.css

Pick any text editor and you will add the needed format so WordPress knows what to do and how to interact with our newly created theme. In our randomly named folder we will now have a single file called: style.css

In this file we will add the CSS header information so that WordPress will show it on our Themes selection page.

Sample information for style.css
Sample information for style.css

As you can see I chose to name my child theme ‘My Randmoizer’ but really it can be anything you want it to be. The key to making the child theme is actually the keyword “Template.” It sounds a little odd but it is true. If you for some reason get a message that there is a template file missing it may be due to that missing line of code.

Now all that is left is to activate the theme.

Activate

Child theme activated
Child theme activated

I didn’t use a screenshot only because I didn’t have much time and I got a little lazy towards the end. A good size for one is 600 pixels by 450 pixels.

As you can see I chose to base my child theme on Twenty-Thirteen but you can create a child theme from just about any theme. Just don’t forget that the key word is: Template

So go, explore, tweak and hack away to your heart’s content. Make as many changes as you want knowing that you will not lose any changes when that theme gets updated.

Understanding arrays

Backstory

For the last month I have read about JavaScript ( ECMAScript ) and how it works. To say the least I am one step closer to not being as bald as I thought I would be. JavaScript is a great language to learn and has so much potential behind it and for it.

What caught me a little off guard was the term object-oriented. For the longest time I hadn’t the slightest idea what that meant. I finally reached that pivotal moment when it hit me. That little moment of: that makes total sense.

What are arrays?

Arrays, simply put, are lists. Yes, it does sound sort of strange but it is true. Arrays are lists. In just about any programming language arrays are used to store not only information but information about that information. Yes, more information within information.

A great way of thinking what arrays are is to think of them as lists; which is kind of what they are. A good example is the little JavaSvript snippet:

var groceries = new Array( 'tomato', 'cucumber', 'squash', 'zucchini' );

Simple right? Now, what if we want to deal with and store more information? For that we introduce associative arrays.

Associative Arrays

Not the suit wearing type but the mathematical type. At least for me it makes sense. Not sure if it will help anybody else but here goes. An associative array is an array within an array.

Inception much?

A really great way to look at this is by not only looking at the code but thinking about lists. Yes, lists. Again. A great example of this is a restaurant’s menu.

$menu = array(
    'pizza' => array( 'cheese', 'pepperoni', 'sausage' ),
    'potato' => array( 'fried', 'baked', 'chopped', 'chip' ),
    'drink' => array(
        'soda' => array( 'diet', 'regular' ),
        'alcohol' => array( 'beer', 'wine' )
        ),
    'salad' => array( 'house', 'caesar' )
    );

Wow! That is quite a bit of code to show my point but I will run through it pretty quickly.

We start with the basic menu items: pizza, potato, drink and salad. Each one of those items then has its own bit of information attached to it. Pizza has the toppings, potato shows how it is cooked, the drink one is a little tricky in that it has two different arrays for soda and alcohol.

Get it? Got it?

And there we have a small glimpse of how I am capable of understanding arrays and associative arrays. Very dumbed down but it is a very clear way of looking at it.

Creating a custom comment list

What?

Comments. That is the topic. As some may know I’m in the middle of creating a WordPress theme to submit to the repository. I want this theme to not only pass but to pass with flying colors. I followed about as close to how the default themes are but have also integrated some from themes I have reviewed and added a bit of my own style, of course.

What started this?

What really initiated this was the default theme for WordPress 3.6: Twenty Thirteen. Previous default versions all passed a certain set of arguments and made a callback function in order to display the comments rather than have WordPress handle it. Wait? You mean to tell me that I can let WordPress do the coding for me? Yes. If you don’t like having control of how to structure your code. Twenty thirteen lets WordPress handle the coding of the comment list.

Callback?

Yes, a callback function. Simple and you have more control of how the code is structured and displayed. The function that handles this is:

wp_list_comments()

All that is needed now is some arguments:

$defaults = array(
    'walker'            => null,
    'max_depth'         => '',
    'style'             => 'ul',
    'callback'          => null,
    'end-callback'      => null,
    'type'              => 'all',
    'page'              => '',
    'per_page'          => '',
    'avatar_size'       => 32,
    'reverse_top_level' => null,
    'reverse_children'  => '',
    'format'            => 'xhtml', /* or html5 added in 3.6  */
    'short_ping'        => false, /* Added in 3.6 */
);
wp_list_comments ( $defaults );

Now, the thing that creates the comments is the callback. It tells WordPress to run the default code if no argument is passed. If there is one, then WordPress will look for that function and use that instead. In Twenty Twelve it was:

wp_list_comments( array(
    'callback' => 'twentytwelve_comment',
    'style' => 'ol'
     ) );

In the Twenty Thirteen theme it actually uses the default HTML5 markup by not setting a callback function and using the new argument:

'format' => 'html5'

This tells WordPress to use the HTML5 markup for the comment which is:

<article class="comment-body">
 <footer class="comment-meta">
 <div class="comment-author vcard"></div><!-- .comment-author -->
 
 <div class="comment-metadata">
 <a href="">
 <time></time>
 </a>
 <span class="edit-link">Edit</span>
 </div><!-- .comment-metadata -->

 <p class="comment-awaiting-moderation"></p>

 </footer><!-- .comment-meta -->

 <div class="comment-content"></div><!-- .comment-content -->

 <div class="reply"></div><!-- .reply -->

</article><!-- .comment-body -->

Keep in mind that is the very simplified version without any WordPress comment template tags. Just straight HTML5 markup. Some people don’t mind using that while others like to have more control and would like to style in a different way. In order to do that we have to pass an argument to the callback function argument.

Enter the callback

This is why you want to use a callback function to create and style the comment. In order to do this we pass the argument

'callback' => 'my_theme_comment'

in our array of arguments much like Twenty Twelve does. Next we have to create the actual function that will house our newly created and customized comment with custom markup. Where that function resides is entirely up to you.

Once we have created the function we can start with all the markup and comment template tags we so desire. I personally like to keep things fairly simple and just have the comment author, date and text. Often my code looks like:

function custom_comments( $comment, $args, $depth ) {
    $GLOBALS['comment'] = $comment;
    switch( $comment->comment_type ) :
        case 'pingback' :
        case 'trackback' : ?>
            <li <?php comment_class(); ?> id="comment<?php comment_ID(); ?>">
            <div class="back-link">< ?php comment_author_link(); ?></div>
        <?php break;
        default : ?>
            <li <?php comment_class(); ?> id="comment-<?php comment_ID(); ?>">
            <article <?php comment_class(); ?> class="comment">

            <div class="comment-body">
            <div class="author vcard">
            <?php echo get_avatar( $comment, 100 ); ?>
            <span class="author-name"><?php comment_author(); ?></span>
            <?php comment_text(); ?>
            </div><!-- .vcard -->
            </div><!-- comment-body -->

            <footer class="comment-footer">
            <time <?php comment_time( 'c' ); ?> class="comment-time">
            <span class="date">
            <?php comment_date(); ?>
            </span>
            <span class="time">
            <?php comment_time(); ?>
            </span>
            </time>
            <div class="reply"><?php 
            comment_reply_link( array_merge( $args, array( 
            'reply_text' => 'Reply',
            'after' => ' <span>&amp;amp;darr;</span>', 
            'depth' => $depth,
            'max_depth' => $args['max_depth'] 
            ) ) ); ?>
            </div><!-- .reply -->
            </footer><!-- .comment-footer -->

            </article><!-- #comment-<?php comment_ID(); ?> -->
        <?php // End the default styling of comment
        break;
    endswitch;
}

And there we have a custom comment that will be used instead of the default WordPress one.

Creating a sticky post slider

Brief background

Creating a slider is simple. For some. In WordPress there are a lot of ways to creating a post slider, image slider, category slider and just about any type of slider you could possibly imagine. The one I wanted to share is creating one with sticky posts. You know the ones that you have to pick from the slightly hidden options.

Make post sticky

Yeah. That little guy. The way WordPress handles sticky post is by putting them on the front page and keeping them on top regardless of when it was posted. A good example is the quick image I created to help illustrate.

The requirements

WordPress has plenty functions and plenty of ways of getting the required posts. One way of getting posts is using get_posts() but that isn’t the method I’ll be using. I’ll be using the WP_Query and alter it just a little bit. No, not with query_posts because that will just cause the world to implode. Okay, not really but there are several other reasons not to use that function.

The steps

In order to have a good functional featured post slider we first need to layout the steps needed. What I did initially was make a quick list of the steps.

  1. Get the posts
  2. Check if there are any ‘sticky’ posts
  3. If there are then run our code
  4. Ignore sticky posts in regular feed
  5. Drink up

The code

Now that we have our logic we can get started.

The first thing we have to do is get all the posts that are set to be sticky. We create and array to hold these.

$stickies = get_option( 'sticky_posts' );

We need to count how many posts there are and we’ll store that as a variable so we can use it later on.

$count = count( $stickies );

Now that we have an array and the total we can start a new query for only those posts. The way we do this is by creating a new WP_Query and passing some arguments. So we’ll create these arguments and name our newly created object of posts $featured. It can be whatever you want it to be. If you are submitting to the WordPress repo then prefix it with your theme or equivalent.

$args = array(
	'post__in'       => $stickies,
	'posts_per_page' => 3,
	'post_type'      => 'post',
	'nopaging'       => true
	);
$featured = new WP_Query( $args );

Now that we have our new object filled with posts we can run our code with the newly created query. But wait! When WordPress is first installed there are no sticky posts so then how do we check for that? Simple. Remember that we stored the value into a variable called $count? We’ll use that. We’ll use an if statement to run our code. If there are no posts then we’ll begin the newly created WordPress loop.

if ( $count > 0 ) {
  // run WordPress loop using $featured
}

Sounds simple now that we have it all together, right? Now we can create the loop and fill it with all the goodies and information we want using template tags. Don’t forget to use wp_reset_postdata() to reset our post data. There is one last thing we must do to get it all working right and that is hooking to pre_get_posts.

What?!

One more thing?

Yes, one last thing. I know a bit of a curveball but this is what will prevent the doubling of sticky posts. What we have to do is add just a few lines of code to our functions file of our theme.

add_action( 'pre_get_posts', 'my_awesome_theme_pre_posts' );
function my_awesome_theme_pre_posts( $query ){
    if ( is_home() ){
        $query->set( 'post__not_in', get_option( 'sticky_posts' ) );
    }

    return $query;
}

Now that we have that done we have our final code snippet:

// Create array of all the sticky_posts
$stickies = get_option( 'sticky_posts' );

// Count how many there are, if any
$count = count( $stickies );

// Create a set of arguments to pass
$args = array(
	'post__in'       => $stickies,
	'posts_per_page' => 3,
	'post_type'      => 'post',
	'nopaging'       => true
	);

$featured = new WP_Query( $args );

// If there is one or more sticky post we create our new slider
if ( $count > 0 ) : ?>
<section class="featured" id="featured-slider">
    <?php while( $featured->have_posts() ) : $featured->the_post(); ?>
    <article <?php post_class( 'featured' ); ?> id="post-< ?php the_ID(); ?>">
        <h1 class="featured-title"><?php the_title(); ?></h1>
        <div class="content"><?php the_content(); ?></div>
        <div class="content"><?php wp_link_pages(); ?></div>
        <footer class="meta">Posted: <?php the_time( get_option( 'date_format' ) ); ?></footer>
    </article>
    <?php endwhile; wp_reset_postdata(); ?>
</section><!-- end of our featured article slider -->
<?php endif; // end the featured posts ?>

Enjoy

And done! For the most part since we need to add interaction but I’ll let you pick out what to use since there are plenty of jQuery slider plugins to help with that.