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 }

Desain web November 26, 2012 at 2:01 am

This is great list and information. Thanks fo your post, it’s help me.

Reply

Heryadi Mulyana May 19, 2012 at 12:19 pm

it’s nice themes … i like it

Reply

dedearif December 24, 2011 at 2:36 pm

It’s a very good article.
I like it.

Reply

ilovesouthdevon July 22, 2011 at 11:11 pm

Great post!! Thanks for sharing. I’m looking forward to trying some of these.

Reply

Mike at Computer Lagging June 10, 2011 at 5:39 pm

I have been messing around with integrating Twitter into my theme and this gave me an idea. Just got it working! Thanks, Mike

Reply

cheap custom jerseys May 19, 2011 at 9:30 am

Awesome Tutorials and Techniques For WordPress Theme Developers

Reply

Latini@gmail.com April 14, 2011 at 5:02 pm

great work

Reply

FBML March 9, 2011 at 11:16 am

In our company’s training manual we have recommended to study CSS Tricks for the beginners and intermediate developers. its a great resource an takes the visitor from scratch to an expert.

Reply

Carson Stoa December 5, 2010 at 11:14 pm

Thx for sharing this article. You got a link from my site.

Reply

Brett Widmann October 24, 2010 at 4:37 am

Great tutorial collection. Thanks for sharing.

Reply

transmitter August 13, 2010 at 9:41 am

This is a really good read for me, Must admit that you are one of the best bloggers , I ever saw.Thanks for posting this informative article.

Reply

prepaid handys June 26, 2010 at 8:39 am

With this great tutorial I will be able to create an aweseome design for my new wordpress site. Thx for this.

Reply

Keystone jack June 21, 2010 at 7:48 am

great post.thanks for sharing

Reply

Freelance Web Designer June 15, 2010 at 4:15 pm

Really great collection! Really will help people get started with wordpress development! Keep posting great articles!

Reply

safety valve April 24, 2010 at 5:40 pm

Thank you, I love your blog

Reply

monitoring software April 16, 2010 at 5:59 pm

This is a great post you have written.

Reply

Tuzigoot January 23, 2010 at 6:11 pm

This is absolutely awesome collection of yours!:)

Reply

tripwiremag January 23, 2010 at 9:58 pm

@Tuzigoot, Thanks! Really great that you liked the post.

Reply

rockport texas December 17, 2009 at 9:38 pm

great blog post! these links are awesome

Reply

wholesale china December 15, 2009 at 4:02 am

40+ Awesome Tutorials and Techniques for WordPress Theme Developers – A tutorial list specifically aimed at theme development

Reply

Michelles Bedroom November 16, 2009 at 3:16 am

Thanks for this great article. I will keep reading your site

Reply

china wholesale October 13, 2009 at 4:40 am

thanks for your sahring

Reply

Suneel September 14, 2009 at 9:24 am

A complete list for wordpress theme developers. Thanks for making this and sharing.

Reply

Amber Weinberg September 10, 2009 at 8:46 pm

awesome collection thanks :D

Reply

Buat Website September 1, 2009 at 3:39 am

This is list are great, very helpful.

Reply

china wholesale August 31, 2009 at 11:17 am

thanks for your sharing

Reply

Imran Munawar August 28, 2009 at 11:57 pm

These tutorials are simply great i had bookmarked your website and keep on visiting its really a great resource for beginners.

Reply

tripwiremag August 29, 2009 at 9:30 am

@Imran: Thanks for the feedback. Hope to see you bac ksoon ;)

Reply

Nate August 28, 2009 at 4:56 pm

Great references. There is some much info out there, thanks for taking the time and putting a bunch of it together. Thanks man!

Reply

tripwiremag August 29, 2009 at 9:31 am

@Nate: You welcome, hope you will find the tuts useful ;)

Reply

website development services August 13, 2009 at 11:39 am

Thanks for sharing this great list.

Reply

Kiran Voleti August 11, 2009 at 5:08 pm

Great tips…very useful one.

Reply

Ruth Maude August 11, 2009 at 3:26 pm

Thanks for posting this great resource!

Reply

Noel Wiggins August 11, 2009 at 2:22 pm

I have finally gotten the opportunity to do a WordPress project for a client, and would like to see if its right for my blogging purpose as well.

But have no clue what its about other than the name WordPress…

thanks for this tremendous list of resources I can’t wait to dive in and get my hands dirty…


Thanks & Regards
Noel from nopun.com
a professional graphic design studio

Reply

favSHARE August 11, 2009 at 10:55 am

This article has been shared on favSHARE.net.

Reply

Michael August 10, 2009 at 6:40 pm

Thanks. I’ll take a look at that option.

Reply

Eric Shafer August 10, 2009 at 5:31 pm

Nice collection, thanks Lars! :)

Featured here: http://www.presidiacreative.com/best-of-the-web-31/

Reply

nazcar August 10, 2009 at 2:40 pm

cool.. great reference.. thank you for sharing.

Reply

Michael August 10, 2009 at 1:35 pm

What I would still like to see is a solution to allow me, the admin of a Wordpress site, to have different content blocks in my sidebar on different pages (ie. ‘About page’ has ads a, b, c as well as contact block…. ‘Products’ page only has ad c and no contact block but a newsletter subscription).

Is there a way to change sidebars on the fly without having to have a separate page template for each section?

Reply

tripwiremag August 10, 2009 at 6:37 pm

@Michael: I think what you’re looking for is “Widget Context Plugin”. Details here.

Reply

ME Webhost August 10, 2009 at 11:16 am

I really enjoyed your post. There’s really a lack of quality posts for Wordpress developers. You just got yourself a loyal fan.

Keep it up!

Lynda

Reply

tripwiremag August 10, 2009 at 6:40 pm

@ME Webhost (Lynda), Thanks, looking forward to see you back!

Reply

Carlos Eduardo August 10, 2009 at 11:06 am

Very nice article! Surely I will need it soon….

Thank you!

Reply

Rashed Albalooshi August 10, 2009 at 9:38 am

Thanks alot its very helpfull

Reply

Amitoj August 10, 2009 at 9:12 am

great collection :)
thanks alot

Reply

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