40+ Awesome Tutorials and Techniques For WordPress Theme Developers

May 19, 2013 · 110 comments

by Lars

wordpress-dev-tuts

WordPress is getting more and more popular and that tons of blogs are powered by it. The community around WordPress is excellent providing free themes and plugings in nearly any form ans shape to meet your specific needs. Further on you can achieve amazing things if you know a few WordPress hacks and have learned some basic programming skills in PHP and SQL. Many programmers have put together solutions that address need on a blog that are not offered out of the box in WordPress and you can easily use these in your own templates. This articles provides a list of some of the most essential WordPress hacks available.

The WordPress Codex is by far the best place to learn about WordPress and its tweaks. The WordPress documentation / Codex is simply excellent taking into account that WordPress is a free software product. If you want to create your own templates or if you’re planning to alter an existing you should get familiar with Codex ASAP. Lets get started with the WordPress tutorials and techniques! You can also choose to get a pre-designed WordPress theme for your business. They are very feature rich, fully customizable and very useful if you are building a professional website. 


ElegantThemes
ThemeForest

Advertisement

Getting Started Guides

Before you go on to the more specialised tutorials and techniques addressing very specific solutions within wordpress and wordpress themes you should consider looking at one of these tutorials taking you through all the steps end to end.

How To Create WordPress Themes From Scratch Part 1 2 3

Tutorial showing you how to create a wordpress theme from scratch in these 3 parts of tutorial series. I will cover from Structuring, designing in Photoshop, slicing, coding into fully css based html, and finally wordpress implementation. While creating from scratch is possible you can also just choose a simple theme for WordPress to get started quicker! A popular type of themes just now is WordPress themes for photographers.

wordpress-dev-tuts

How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial

In only 11 individual lessons this WordPress Theme Tutorial is going to show you how to build a powerful, up-to-date, WordPress Theme from scratch.

Designing for WordPress

Chris Coyier of CSS-Tricks has a three-part video series for downloading and installing WordPress, all the way through everything else involved with designing a custom theme. The example theme that is built through the series is a personalized homepage theme.

wordpress-dev-tuts

How to Create a WordPress Theme from Scratch

This tutorial will look at taking a HTML/CSS template and turning it into a functioning WordPress theme. There is so much you can do when creating your own theme we couldn’t nearly cover it all. So, we’re going to look at how themes are structured, creation of the core files and splitting up that index.html file.

wordpress-dev-tuts

13 Helpful Cheat Sheets for Building WordPress Themes

Choosing a favourite cheat sheet for WordPress is also a good idea. Here you willl fins a good collection.

wordpress-dev-tuts

You can also choose to use a ready made template. You will find some great themes for WordPress in this article.

Options page

Create an Awesome WordPress Theme Options Page

This is a multi-part part tutorial on how to create an options page for your WordPress Theme to give it premium elements. The tutorial is simple and show you how to allow theme users to set site colors. Once you have the technique it is possible to use it for other theme options.

wordpress-dev-tuts

How to Make a Control Panel for Your WordPress Theme

While there are plenty of good tutorials for designing and coding themes, there are very few that touch on the process of creating a control panel. This one from Cats Who Code takes you through the process, as used in the Mimbo theme.

wordpress-dev-tuts

Custom Fields

How To Get Custom Field Outside WordPress Loop

Custom fields are definitely very useful and are used on many WordPress-powered blogs. Ever thought of using post custom fields outside the WordPress loop? It is possible and this “tutorial” will show you how.

wordpress-dev-tuts

The Loop

Only Show Posts With a specific Custom Field Value

Sometimes you only want to show posts that you’ve added a specific custom field to. For instance, lets say you write book and movie reviews and for each you give them a custom field “review_type” with the value set to either “book” or “movie”. So how would you show posts that are only movie reviews? Easily! (may also just use tags and categories but… I guess I would do that in most cases. Knowing that custom fields can be used like this is still quite useful)

wordpress-dev-tuts

Using Multiple WordPress Loops in Your Theme

The Loop is the heart of WordPress. It displays all the posts, categories, tags and archives. Creating multiple loops is the way to go if you want to display posts, categories etc. in different ways on the same page.

wordpress-dev-tuts

Filtering posts

Get The Latest Sticky Posts

Sticky posts was introduced in WP2.7 and still exists. So if you have many sticky posts and you want to display only a subset how would you do it? Its not simple at all but you can learn the trick here.

wordpress-dev-tuts

More tips on sticky posts: Definitive Sticky Posts Guide for WordPress

Get Tags Specific to a Particular Category in WordPress

Wouldn’t it be nice to show tags related to the category of the post instead of showing all the tags and eating up page real estate. Here’s the code that shows only the tags related to a particular category.

wordpress-dev-tuts

Author and User Information

Displaying Author Meta Information in WordPress 2.8

One of the (many) nice updates the comes bundled in WordPress 2.8 is with the_author_meta() template tag. This tag allows a developer to pull and display specific parts of any user’s information within a theme. Even though variations of this have been included in previous releases, this version has simplified it to a much easier syntax.

In this quick overview, we’ll look at some potential uses for the recently overhauled Author Meta template tag.

wordpress-dev-tuts

How to Change the Default Gravatar in WordPress

As much as I love seeing the mystery man appear in WordPress comments across the internet, your blog deserves better. In this tutorial we’ll take a custom image and add it as the default gravatar to give your comment section a more personalized touch.

wordpress-dev-tuts

Image handling

Display Thumbnails For Related Posts in WordPress

In this tutorial you’ll learn how to increase pageviews by adding thumbnails to related posts using the popular YARPP plugin and WordPress custom fields.

wordpress-dev-tuts

How To Use Thumbnails Generated By WordPress In Your Theme

WordPress has built in functionality to generate thumbnails of the images you add to your post. This post shows you how to use thumbnails generated by WordPress in your theme without requiring any third party script, plugin or custom field.

wordpress-dev-tuts

How To Get First Image from post and display it

Most WordPress users are using custom fields to display thumbs on their blog homepage. It is a good idea, but do you know that with a simple php function using regular expressions, you can grab the first image from the post, and display it.

wordpress-dev-tuts

Autoload Attachment From WordPress Post

There is no script to automatically load a thumbnail from a WordPress post by default. However, it is very useful for those who are using WordPress Image Gallery. But you can achieve that by using plugin. Here, I will show you how to do it manually and add into your theme.

wordpress-dev-tuts

Using Custom Fields to Display Post Thumbnails

One of the most interesting features in WordPress is using Custom Fields, which can turn your WordPress blog into a fully customizable CMS website. I use custom fields to create image thumbnail for each post here on Noupe and on Devsnippets as well and display the thumbnails on the home page and the Archive page.

wordpress-dev-tuts

Comments

Styling Your WordPress Comments

A fun part of customizing WordPress themes is designing a comments format which complements the rest of the site. Darrenhoyt has shared his three examples from recent projects, including code samples and downloads to the original .PSDs on ‘Styling Your WordPress Comments’. All of them looks stunning, are you ready to customize your comments template now?

wordpress-dev-tuts

Alternating Colors For Comments

You might want to have alternating row colors for your comments, to make a clearer separation. Alternating rows make it easier to distinguish different comments. Doing this is relatively very easy.

Styling Author Comments

An often-used feature in WordPress blogs is the ability to style comments made by the post’s author differently from the others – helping replies to stand out. Here, are few example of editing the default WordPress to add some subtle styling to author comments.

wordpress-dev-tuts

Numbering Your Comments

If your blog posts receive lots of comments then it can be really useful for both you and your readers to number it. Jean-Baptiste shows a simple solution to count comments easily and efficiently.

wordpress-dev-tuts

Displaying Total Number Of Comments On Your Blog (or trackbacks)

If you have a popular WordPress blog with good number of comments everyday, then wouldn’t it be nice to be able to display the total number of comments published on your WordPress blog since your blog launch? The kind of stuff advertisers totally enjoy.

wordpress-dev-tuts

Feed and Integration

Show Your Latest Tweet In 5 Lines of Code

This will show you how to use WordPress’ built in RSS parser to display your latest tweet in 5 lines of code. It lets you show your latest tweet with no more than 5 lines of code using the twitter search feed. Add this code to functions.php.

wordpress-dev-tuts

Creating user-defined RSS feeds in WordPress

RSS feeds are very useful, and indeed, very popular. WordPress creates RSS feeds by default, which is good in 99% of times. But how to create your own, custom RSS Feed? Just read this post to find out!

wordpress-dev-tuts

Hooks and events

List All Hooked WordPress Functions

Hooks are provided by WordPress to allow your plugin to ‘hook into’ the rest of WordPress; that is, to call functions in your plugin at specific times, and thereby set your plugin in motion. LEarn how to create your own hook listing for debugging purposes.

For a thorough listing of all action and filter hooks in WP see Adam Brown’s WP Hooks Database.

wordpress-dev-tuts

Using Cron to Schedule Events in WordPress

It is so simple to schedule events in wordpress and still very powerful. What could you use it for? It could be creating a daily backup of the database, etc, The snippet you get here is a simple example but it shows you how little it takes.

wordpress-dev-tuts

Login

Create a Login Form Overlay

One of the most important things to a website with any hopes of establishing a user connection is having user accounts. With tutorial you can make the login page a bit more attractive and fast and simple to access.

wordpress-dev-tuts

Widgets

Creating a widget ready footer in WordPress

It is a common site now to see a widget ready footer on a wordpress powered site, it adds some extra areas to add widgets that would maybe look out of place in the sidebar. It is good to have widgets at the bottom of the blog for links to other posts and maybe some details about yourself. This tutorial is going to show you how to create 3 footer widget areas which can be edited from the admin area of your wordpress installation.

wordpress-dev-tuts

Essential WordPress Hacks to BOOST your Blog

This article is an attempt to offer the majority of WordPress users an supplement to Codex, plugins by providing really nice to have WordPress Hacks that anyone can use. Finally this article provides a list of the best resources ever to find hacks for WP. Create widgets with Recent Posts, Popular Posts, Future Posts, Recent Comments etc.

wordpress-dev-tuts

Post and Page Template Elements

How to Make Unique Front Page Teasers for WordPress Posts

Want some distinction between your blog’s front and post pages? Wish your post displayed differently when viewed in a list? With WordPress, it’s easier than you think. In this post we’ll highlight an incredibly useful, but often overlooked WordPress tag.

wordpress-dev-tuts

How to Display Ratings with WordPress Links

Give your links some extra importance using a commonly overlooked feature in WordPress.

wordpress-dev-tuts

Detect Visitor Browser Within WordPress

One of the more frustrating things about coding for the web is the fact that different browsers often render the same code differently than one another. Many people don’t know this, but WordPress provides several global variables that we can use to do browser detection. Here’s a useful function which you can add to your functions.php file that adds browser specific css classes to body tag so that you can control looks for different browsers.

wordpress-dev-tuts+

How to: Create and use WordPress page templates

It is possible to create a template that can be used for pages and this may be used to give some pages a different look and feel.

wordpress-dev-tuts

Quick Tip – Separate Page Templates in WordPress

Display each of your blog’s pages with distinction! Learn how to easily make a variety of page templates from within WordPress.

wordpress-dev-tuts

How To Embed CSS in your posts With Custom Field

Need a different style on a particular post then here’s nice custom field hack from WP-Recipes letting you do just that.

wordpress-dev-tuts

Create an Archives page in WordPress

Have you ever seen Archives pages in WordPress and thought ah I could do with one of them on my blog. In this tutorial you will learn how to do it

wordpress-dev-tuts

Need to Block & Exclude Categories in WordPress? Here is the Solution

Sometimes we need to create a special category to feature posts or other information in the homepage or somewhere else, but don’t want it to appear in the template under the category list or get indexed by Search Engines because of potential duplicate content issues. One alternative is to block that category from being indexed. The other option is to completely remove it from the template to limit any possibilities to be found and indexed. I will explore both techniques in this post.

wordpress-dev-tuts

{ 45 comments… read them below or add one }

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 65 trackbacks }

Previous post:

Next post:


Web Analytics