Disable Self-Pings in your WordPress Theme

A well-known tactic for SEO called “interlinking” is when you link to your own posts. In WordPress, pingbacks are the equivalent of interlinking, and are automatically enabled by default. This can start to get annoying after a while when you are referencing other blog posts often… WordPress will automatically create a new comment about the pingback of that post. These pingback comments will appear in the comments section of your posts, and can start clogging up your comment list with something that looks like spam to other potential commenters.

To disable self-pingbacks from your own website, simply add the following lines of code to your functions.php file:

Show Custom Avatar Images in Comments

Gravatar is a great service by Automattic, the folks behind WordPress. In Gravatar, you designate your online profile picture one the one website. Whenever you sign in with this address on another website, it can display your universal Gravatar image.

In the default WordPress Comment system, each comment will be displayed alongside an image from the Gravatar service. If the user has not signed up with the service before or is unknown, then the WordPress page will display a random image. If you want to customize what this random image is, all you need to do is add the following lines of code to your functions.php file:

In the above example, the ‘custom-gravatar.png’ image would be located inside the Theme’s images folder: /yourtheme/images/custom-gravatar.png

When creating your Custom Avatar image, the dimensions should be: 80px x 80px square.

Enable Threaded Comments in your WordPress Theme

Threaded Comments are a great way to visually show direct replies to comments. When a person replies to a comment already on your site, the reply will display indented underneath the original comment. To enable Threaded Comments in your theme, simply add the following lines to your functions.php file:

Now you will be able to see Threaded Comments wherever comments are shown on your theme.

Enable Featured Images in your Theme

When you are first making a WordPress theme from scratch, Featured Images are not enabled by default. To enable Featured Images, simply add the following line to your functions.php file:

add_theme_support('post-thumbnails');

Now you will be able to use Featured Images on blog posts and pages.

Custom Post Types

To enable Featured Images in Custom Post Types, simply add ‘thumbnail’ to the “supports” array item:

'supports' => array('thumbnail')

How To Enable Shortcodes in Widgets, Comments and Excerpts

In WordPress, you can use shortcodes in the content of your pages and posts. Unfortunately, when you attempt to use shortcodes in Widgets, it won’t work properly — the WordPress default behavior is to output the text of the shortcode, instead of processing it:

[my-shortcode]

There is a way to enable shortcodes in widgets, comments, and excerpts in WordPress, by using the “do_shortcode” function. Add the following code to your functions.php file:

Now, when you go to use the shortcode, it will be processed on the page as expected.

Add custom image sizes to your WordPress theme

By default, every time you upload an image in WordPress, it will create several cropped versions of the same image, for various uses across the site. For example, if you are showing a list of blog posts, you can display a very small thumbnail version of the Featured Image next to each post, which will load much faster than the full-size image. You can see the three default image sizes on the Settings > Media page: “Thumbnail”, “Medium” and “Large.” These are all good, but let’s say you have a custom layout that needs a new image size. That’s where the add_image_size() function comes in.

add_image_size()

According to the WordPress codex, the usage of the add_image_size function is as follows:

Using this as a guide, we can add a new custom image size to any theme by adding the following line to functions.php:

This code will add a new image size, cropping at 600px wide by 400px high. Replace “my-new-image-size-name” with something to distinguish this image size from the default names already being used.

Using the New Image

To display the new image in your theme, use the following code inside the post loop:

How to add your own JavaScript file to a WordPress Theme

Sometimes when you are developing a theme, you need to include some custom JavaScript or jQuery scripts, and they can become very lengthy when things start to get complicated. A great way to maintain order with all of your scripts is to load them into your theme as separate files. This also gives you the flexibility to load scripts when certain conditions are met, further extending the functionality and efficiency of the site. Today I’ll show you how to initialize and enqueue your own JavaScript files so they load at runtime.

functions.php

In your theme folder, open functions.php and add the following code:

This will declare a new function called, “add_custom_scripts.” In the function, we use wp_enqueue_script() to add our custom .js file to all of the pages when they are rendered. I use get_stylesheet_directory_uri() to grab the directory of the theme, and append the proper folder location of the file.