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.
Tools and Plugins
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 is a syntax highlighting plugin that allows you to include code from local or remote files in your WordPress posts.
Preserve formatting of code for display by preventing its modification by WordPress and other plugins while retaining original whitespace and characters.
- C++ (cpp, c, c++)
- C# (c#, c-sharp, csharp)
- CSS (css)
- Delphi (delphi, pascal)
- Java (java)
- PHP (php)
- Python (py, python)
- Ruby (rb, ruby, rails, ror)
- Sql (sql)
- VB (vb, vb.net)
- XML/HTML (xml, html, xhtml, xslt)
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.
- _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
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.
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.
This is a web-based version of the mysql command line client but it works from inside WP.
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.
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!
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.
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 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.
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.
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.
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.
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.
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.
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 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.
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)
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.
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
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
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.
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.
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 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.
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.
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.
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.
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?
Feed and Integration
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.
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!
Hooks and events
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.
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.
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.
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.
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
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.
Give your links some extra importance using a commonly overlooked feature in 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.
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.
Display each of your blog’s pages with distinction! Learn how to easily make a variety of page templates from within WordPress.
Need a different style on a particular post then here’s nice custom field hack from WP-Recipes letting you do just that.
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
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 includes the following:
- Basic Template Files
- PHP Snippets for the Header
- PHP Snippets for the Templates
- And Extra Stuff for WordPress
View PNG Cheatsheet : View Cheat Sheet
Source : headzoo.com
View html Cheatsheet : View Cheat Sheet
Source : design-notes.info
View HTML Cheatsheet : View Cheat Sheet
Source : frozr.comg
You can find link to pdf version in the comment section.
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
The PHP cheat sheet is a one-page reference sheet, listing date format arguments, regular expression syntax and common functions.
This website contains a 2-page light and lean PHP cheatsheet and an 8-page comprehensive PHP cheat sheet for committed PHP developers
3 cheat sheets covering comparison using different operators etc.
HTML Cheat Sheets
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.
Good looking and well structured html overview
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.
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.  ) as well as a named entity reference (e.g. ) where available.
CSS Cheat Sheets
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.
Good looking and well structured CSS overview
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.
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.
Get help with some of the CSS elements that are so easy to forget.
Scripting Cheat Sheets
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.
This sheet cover Core, Native, Class, Element, Utilities and Request
Very comprehensive overview of jQuery selectors. This is a must have for every jQuery developer!
SQL Cheat Sheets
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
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
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).
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).
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.