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.

How to make your own custom Shortcodes in WordPress

Shortcodes in WordPress are awesome, because they give you the ability to output large amounts of code by using a simple tag in the content of your site. This can free up your users from having to write code, and let them focus on creating good content. You can save time spent on website maintenance by creating shortcodes that output content that is commonly used or heavy on code. You can even have shortcodes that have configurable options, using parameters that you specify. I’ll show you how to make your own simple shortcodes.

You can create shortcodes in 3 ways:

Simple
[button]

With Parameters
[button cssclass="blue"]

Content Inside Shortcode
[button cssclass="blue"]Click Here[/button]


Creating a Simple Shortcode

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

This code first declares a function called “sc_button.” Inside the function, we declare a variable called “$ret_content” which will store all the HTML code we want to output. After we assign the $ret_content variable, we return it.

Now, once you save the file you’ll be able to use the [button] shortcode in your content, and it will output the HTML string we set above in our function:

<a href="#" class="btn">Click Here</a>


Creating a Shortcode with Parameters

Now we’re going to expand on the simple shortcode, and enable users to add additional CSS classes to the button. To enable parameters in shortcodes, we need to add “$atts” to the function as an argument, and extract those arguments as an array. Then we can use it in the output variable:

Notice at the beginning of the function we set the default ‘cssclass’ to be empty, in case this parameter isn’t passed with the shortcode.

Now, when a user enters the shortcode and adds a new CSS class name:

[button cssclass="blue"]

it will be appended to the class of the button:

<a href="#" class="btn blue">Click Here</a>


Content inside the Shortcode

We can extend the shortcode even further, so users can enter what they want the button text to say. To make it so shortcodes can encapsulate content, we need to add “$content” to the function arguments and the output variable:

Now, when a user enters the shortcode, they can specify what text will be shown on the button:

[button cssclass="blue"]My Custom Button Text[/button]

But! We need to use a closing tag for the shortcode —   [/button] — this will end the $content variable.

Now the button shows with the custom text applied:

<a href="#" class="btn blue">My Custom Button Text</a>

 

This is just the tip of the iceberg for what you can do with WordPress shortcodes. Have fun and happy coding!

How to add a Custom Widget to a Theme

One thing I love about WordPress is the ability to use Widgets. Widgets are designated places in a website template where users can add and arrange any content they want. Because the user doesn’t need to know any code, it is a very flexible way to have control over areas of a site. A widget could simply show a Search form now, but a few months later it could also contain a Newsletter Signup, a list of Recent Posts, and any number of other items.

Sometimes when using a theme, the widgets that are built-in are not the best fit for what is needed on the site. Fortunately, you can create your own WordPress widgets and add them to any theme very easily with just a few lines of code.

functions.php

First, we’ll need to setup a new widget. In your theme files, open functions.php and paste the following code at the bottom:

The function called “add_my_widgets” will set up a new widget. I called it “My New Widget” and gave it an ID of “my-new-widget” — now we can reference the widget’s ID later on. We declare the function and then use add_action to run it during the “widgets_init” hook (this is when WordPress loads all the widgets on page load).

page.php

Now that the widget is setup, let’s place it into the template. Open up page.php (or whatever template file) from your theme and find where you’d like the widget content to appear. Once you’ve found a good spot for your new widget, paste in the code:

This conditional code checks to see if the widget is registered and being used. If the widget is active, it will output all the contents here. This is important to do the check first, because if we say “output everything from the widget here” when the widget is not being used, WordPress will show an error message to the user.

Appearance > Widgets

Now that we’ve setup the new widget and placed it in our theme, all that’s left is to add content to it via the WP-admin backend. Go to Appearance > Widgets to see the new widget we’ve created. Add content to the widget and save it. Refresh the page that is using your modified template and you should see the content of the widget appear.