WordPress needs no introduction. It powerful, highly popular and have a huge community providing loads of free and premium themes and plugins. Still you may fell like creating your own themes or plugins could be fun or a way to get the functionality and look and fell you need. It is not that hard to customize a theme but starting from scratch requires some experience or assistance. This article provides the tutorials, cheat sheets and tools you need to get started.

Advertisement

Tools and Plugins

Wp Advanced Code Editor

WP Advanced Code Editor integrates the EasyArea advanced code editor into WordPress. This adds real time syntax highlighting, line numbering, full screen editing, and more to the code editor in the “Add New Post” and “Add New Page” screens.

Vim Color Improved

Vim Color Improved is a syntax highlighting plugin that allows you to include code from local or remote files in your WordPress posts.

Preserve Code Formatting

Preserve formatting of code for display by preventing its modification by WordPress and other plugins while retaining original whitespace and characters.

Google Syntax Highlighter

This plugin easily integrates the Google Syntax Highlighter by Alex Gorbatchev into WordPress. The following laguages is supported:

• C++ (cpp, c, c++)
• C# (c#, c-sharp, csharp)
• CSS (css)
• Delphi (delphi, pascal)
• Java (java)
• Java Script (js, jscript, javascript)
• PHP (php)
• Python (py, python)
• Ruby (rb, ruby, rails, ror)
• Sql (sql)
• VB (vb, vb.net)
• XML/HTML (xml, html, xhtml, xslt)

Wp Development Utilities

Once you have installed this plugin, you’ll be able to use a full set of functions designed to help your find and debug your WordPress themes or plugins. Among other things, you can retrieve user capabilities, web server name, get the ID of a permalink.

class WP_Dev_Utilities:

• _debug() – A function to print variable only if the user logged as administrator
• _retrieve_user_data() – Retrive user data informations only if user is logged in
• count_num_pages_post($id) – Returns the number of pages of a post
• get_current_execution_time($precision = 3) – Get the current execution time
• get_logged_username() – Returns the name of the user logged on
• get_post_content_from_id($id) – Return the content of the post from his id
• get_post_content_from_permalink($permalink) – Return the contents of the post permalink
• get_post_id_from_permalink($permalink) – Return the id of the post permalink
• is_administrator() – Check if logged user has the administrator privileges
• get_web_browser($shortname = false, $uppercase = false) – Returns the user’s browser name
• get_web_server($uppercase = false) – Returns the web server is use
• get_wp_version() – Get the current wordpress version
• get_tag_slug($title) – Get the tag slug from tag title
• get_current_tag_slug($title) – Get the tag slug from the current tag title

Anti Internet Explorer 6

Plugin that detects, if a visitor is using the old Internet Explorer 6 (or even older) and displays a message to him to download a better browser, or at least upgrade to a new version of IE.

Shockingly Big IE6 Warning

The Shockingly Big IE6 Warning is a plugin that shows a warning message alerting the user why it is bad to use IE6, the security risk and the bad compatibility of Web Standards.

SQL Executionner

This is a web-based version of the mysql command line client but it works from inside WP.

Hosting monitor

The plugin, that is adapted from the phpsysinfo library, is the creation/development of the highly skilled dev-team at WebHostingSearch.com. What the plugin does is to display information about the system on which your blog is installed. The information that you get is presented in the five following categories: Viral, Hardware, Network, Filesystems and Memory.

Wp-Debug

Developers now have the ability to dynamically see what’s going on behind the scenes when your page is rendered with help from the Krumo Framework.

With it you can display information about GET/POST requests, session variables, server information (from php.ini), included files, variables, and more!

WordPress Console

This plugin adds a “Console” page to the administrator’s Tools menu which provides a JavaScript-based interactive console that loads the WordPress environment. It allows execution of arbitrary PHP code as well as anything defined by WordPress or activated plugins. This is awesome for plugin developers and people learning PHP and/or the WordPress API. Watch a screencast!

Speed up development using the Ubiquity Firefox add-on

Ubiquity is a cutting edge add-on for Firefox, developed by Mozilla Labs. Ubiquity allows you to search WordPress and PHP documentation in an instant using these two plugins: PHP Search and WP Codex Search.

Ubiquity is also a mashup of a growing number of creative ideas, and some of them could be interesting to transform into a new WordPress plugin.

PHP Code Widget

The normal Text widget allows you to insert arbitrary Text and/or HTML code. This allows that too, but also parses any inserted PHP code and executes it. This makes it easier to migrate to a widget-based theme.

runPHP

runPHP is a WordPress plug-in that enables users to embed PHP code directly into their posts.

Other plugins that provide similar functionality.

• EzStatic3 allows you to embed other HTML or PHP pages into your WordPress posts
• PhpExec very similar to what runPHP is providing.

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.

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.

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.

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.

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.

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.

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)

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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?

Alternating Colors For Comments

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.

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.

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.

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.

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.

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.

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.

How to Display Ratings with WordPress Links

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

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.

+

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.

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.

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.

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

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.

Pure WordPress Cheat Sheets

The WordPress Help Sheet

The WordPress Help Sheet includes the following:

• Basic Template Files
• PHP Snippets for the Header
• PHP Snippets for the Templates
• And Extra Stuff for WordPress

Download PDF : Download Cheat Sheet
Source : wpcandy.com

WordPress Theme Development Checklist

Download PDF : Download Cheat Sheet »
Source : wptoy.com »

WordPress SEO Cheat Sheet

Download PDF : Download Cheat Sheet
Source : tekka.de

WordPress Template Tags

Download PDF : Download Cheat Sheet
View HTML Version : View HTML Cheat Sheet
Source : bueltge.de

WordPress Theme Cheat Sheet

WordPress CheatSheet

Download PDF : Download Cheat Sheet
Source : andywibbels.com

WordPress Theme Cheat Sheet

View PNG Cheatsheet : View Cheat Sheet

Source : headzoo.com

30+ WordPress snippets collection

View html Cheatsheet : View Cheat Sheet

Source : design-notes.info

WP Help Sheet

View HTML Cheatsheet : View Cheat Sheet

Source : frozr.comg

My WordPress Cheat Sheet

View HTML Cheatsheet : View Cheat Sheet
Source : graphicrating.com

You can find link to pdf version in the comment section.

WordPress Loop

Download PDF : Download Cheat Sheet
Source : bueltge.de

WP Plugin API Cheat Sheet

Download PDF : Download Cheat Sheet
Source : bueltge.de

WP Widget Cheat Sheet

Download PDF : Download Cheat Sheet
Source : bueltge.de

WordPress Template Tag Reference

View HTML Cheatsheet : View Cheat Sheet
Source : dbswebsite.com

The Advanced WordPress Help Sheet

Download PDF : Download Cheat Sheet
Source : wpcandy.com

WordPress Optimization/Cheat Sheet

View HTML Cheatsheet : View Cheat Sheet
Source : codex.wordpress.org

WordPress Related Cheat Sheets

When working with WordPress Themes and plugins you will most likely need to dive into some CSS, HTML, PHP and SQL. If you’re building a really dynamic and interactive stuff some jQuery and related technologies could be relevant.

PHP Cheat Sheets

PHP Cheat Sheet (V2)

The PHP cheat sheet is a one-page reference sheet, listing date format arguments, regular expression syntax and common functions.

visibone

This website contains a 2-page light and lean PHP cheatsheet and an 8-page comprehensive PHP cheat sheet for committed PHP developers

Php 4 Reference Card

PHP Cheat Sheet

3 cheat sheets covering comparison using different operators etc.

HTML Cheat Sheets

XHTML 1.1 Cheat Sheet

This cheat sheet is designed to be a quick reference to all of the elements and attributes available in the XHTML 1.1 specification. And because XHTML 1.1 is designed to be modular, it is organized into sections to mirror the XHTML abstract modules and the elements and attributes contained within each.

Gosquared html help sheets

Good looking and well structured html overview

HTML Cheat Sheet

The HTML cheat sheet is a one-page A4 printable document, designed to provide a quick reference for HTML. PDF PNG

HTML5 Canvas Cheat Sheet

The information is pretty much just a copy of what is found in the WHATWG specs, just condensed and hopefully a bit easier to read. There are virtually no explanations, however, and no examples other than some graphics for compositing values and a few other things (the appearance of which is very much inspired by those found in Mozilla’s examples). So, it’s basically just a listing of the attributes and methods of the canvas element and the 2d drawing context.

HTML Character Entities Cheat Sheet

The HTML Character Entities cheat sheet is designed to act as a reference sheet, listing the various character codes in HTML. PDF PNG

HTML Character Entities Cheat Sheet

This cheat sheet contains a list of all of the HTML 4 character entities including ISO 8859-1 (Latin-1) entities. The characters are organized into 8 groups: Latin characters, Greek characters, numbers, puncutation and miscellaneous symbols, mathematical symbols, currency symbols, arrows and shapes, and spacing symbols.

Each character contains a unicode entity reference (e.g. &#160) as well as a named entity reference (e.g.  ) where available.

CSS Cheat Sheets

CSS2 Cheat Sheet

This cheat sheet is designed to not only be a quick reference for CSS properties but also to give you a good feel for how each property should be used. It contains all of the properties in the CSS2 specification including a description of the syntax of each one. There are also sections that describe selectors, pseudo-elements and pseudo-classes, @ rules, and colors.

Gosquared CSS help sheets

Good looking and well structured CSS overview

addedbytes CSS2 Cheat Sheet

The CSS cheat sheet is a one-page reference sheet, listing all selectors (as of CSS 2.1) and properties. It includes a visual example of the box model, unit reference for CSS units and the various media types CSS makes allowance for.

Core css

All you need to know about CSS in 3 parts. These documents go through all important aspects of CSS on a minimum number of pages.

CSS Shorthand Cheat Sheet

Get help with some of the CSS elements that are so easy to forget.

CSS2 – Quick Reference Guide – PDF

Scripting Cheat Sheets

JavaScript Cheat Sheet

The JavaScript cheat sheet is designed to act as a reminder and reference sheet, listing methods and functions of JavaScript. It includes reference material for regular expressions in JavaScript, as well as a short guide to the XMLHttpRequest object. A description of what is on the cheat sheet follows, or if you are impatient, you can go straight to the full size JavaScript cheat sheet.

JavaScript DOM Cheatsheet

Working with XML in Javascript is

jQuery 1.3 Cheat Sheet

Quick reference to all jQuery 1.3 functions and properties. Note that it doesn’t cover any of the UI functionality as this could easily be a whole cheat sheet in and of itself.

jQuery Cheat Sheet 1.2

mootools 1.2 cheat sheet

This sheet cover Core, Native, Class, Element, Utilities and Request

prototype 1.5.0

Prototype 1.6.0.2 Cheat Sheet

Download

Addison-Wesley’s JavaScript Reference Card

Javascript: A scripting language designed to be integrated into HTML code to produce enhanced, dynamic, interactive web pages.

jQuery selectors

Very comprehensive overview of jQuery selectors. This is a must have for every jQuery developer!

SQL Cheat Sheets

SQL (Structured Query Language) in one page

MySQL Cheat Sheet

Search Engine Optimization Cheat Sheets

Creating good content that is presented in the right way is important but only haft the way to get visitors. Understanding and mastering Search Engine Optimization, SEO is quite essential and here you get some really good overviews

The Web Developer’s SEO Cheat Sheet

This cheat sheet cover most of what you need, Important SEO Html Tags, Search Engine Indexing Limits, Recommended Title Tag Syntax, Common Canonical Issues, Important Search Engine Robot User-Agents etc.

Colour Codes Cheat Sheets

RGB Hex Colour Chart

The RGB Hex colour chart is a very large (183kB) PNG file, and is sized to fit on a standard A4 piece of paper. It shows the 216 so-called “web safe” or “non-dithering” colours (there are actually only 22 web safe colours, but those are revolting).

Color Reference Guide

Web Safe Color Chart

HTML Colors Cheat Sheet

This cheat sheet contains a chart of 1050 colors grouped by hue and varied into 25 different saturations and brightnesses for each. Each color has the HTML color code reprsented as a Hex triplet (e.g. #808080). Also, it contains a chart of the 216 Web-safe colors and each is represented as a single-digit Hex triplet (e.g. #999).

RGB Values for Macbeth Color Checker

If you are looking for nice wordpress themes you can check out this article about Top WordPress themes or this great list showing 60 best WordPress themes. Also check out this article with 29 awesome restaurant menu templates.

 

Tagged as: Design, developer toolbox, jQuery, Wordpress