My WordPress Cheat Sheet

wordpressI know that there are many resources regarding this topic but there are never enough. This post is dedicated to small snippets from WordPress that will make your life easier. Or maybe my life easier and in this case I want to have them in one single post. In a way I’m trying to help you and in another I’m trying to organize this stuff for myself.

Theme Structure

If you want to create a WordPress theme, these following files must be included in order to be a standard theme. You can create a theme using fewer files but this is the way to do it.

1
2
3
4
5
6
7
8
9
10
11
12

header.php - header section
index.php - main section
sidebar.php - sidebar section
footer.php - footer section
single.php - post template
page.php - page template
comments.php - comments template
search.php - search content
searchform.php - search form
archive.php - archive
functions.php - special functions
404.php - error page

The Loop

You will often see “the loop” as reference in many tutorials or samples. This piece of code helps you display your posts on a blog. By entering custom HTML or PHP code inside the loop, you will make every post to benefit from that custom code. You can use the loop mainly in your index.php file but also in other files when you want to display multiple posts.

1
2
3
4
5
6

<?php if(have_posts()) : ?>
   <?php while(have_posts()) : the_post(); ?>
// Custom HTML & PHP code
   <?php endwhile; ?>
<?php else : ?>
<?php endif; ?>

Note: the space in front of ?php on the line 1,2,4,5 and 6 should be removed. So instead of < ?php we will have <?php.

Template Include Tags

These tags are usually used in a single PHP file to include other files from the theme. For example you can use the get_header tag in index.php in order to include the head in the theme.

1
2
3
4

< ?php get_header(); ?>
< ?php get_sidebar(); ?>
< ?php get_footer(); ?>
< ?php comments_template(); ?>

Template Bloginfo Tags

These tags are used to display information regarding your blog, information that can be customized inside the WordPress Administration panel.

1
2
3
4
5
6
7
8
9
10

< ?php bloginfo('name'); ?> - Title of the blog
< ?php bloginfo('charset'); ?> - Displays the character set
< ?php bloginfo('description'); ?> - Displays the description of the blog
< ?php bloginfo('url'); ?> - Displays the address of the blog
< ?php bloginfo('rss2_url'); ?> - Displays the RSS URL
< ?php bloginfo('template_url'); ?> - Displays the URL of the template
< ?php bloginfo('pingback_url'); ?> - Displays the pingback URL
< ?php bloginfo('stylesheet_url'); ?> - Displays the URL for the template's CSS file
< ?php bloginfo('wpurl'); ?> - Displays URL for WordPress installation
< ?php bloginfo('name'); ?>

WordPress Conditional Tags

Conditional tags are simple but helpful tags that can be used to customize how your blog will work. For example if the page is the home page, we will type a class called “current-cat”. < ?php if(is_home()) { ?> class=”current-cat”< ?php } ?>. This is a part of the code which I will present you a little bit later in this article.

1
2
3
4
5
6

is_home() - when the user is on the home page(blog)
is_front_page() - when the user is on the home page (blog or page)
is_single - when a single post is displayed
is_sticky() - check if a post is sticky
is_page() - when a page is displayed
is_category() - when a category is displayed

These are the most common conditional tags inside WordPress. For more information and additional tags you can check the next address dedicated to conditional tags. http://codex.wordpress.org/Conditional_Tags

Common WordPress Tags

As you know WordPress has a lot of code that can be embedded in themes in order to make them complex and powerful. Here are some of the common snippets that are used in most of the templates.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

< ?php the_time() ?> - Displays the time of the current post
< ?php the_date() ?> - Displays the date of a post or set of posts
< ?php the_title(); ?> - Displays or returns the title of the current post
< ?php the_permalink() ?> - Displays the URL for the permalink
< ?php the_category() ?> - Displays the category of a post
< ?php the_author(); ?> - Displays the author of the post
< ?php the_ID(); ?> - Displays the numeric ID of the current post
< ?php wp_list_pages(); ?> - Displays all the pages
< ?php wp_tag_cloud(); ?> - Displays a tag cloud
< ?php wp_list_cats(); ?> - Displays the categories
< ?php get_calendar(); ?> - Displays the calendar
< ?php wp_get_archives() ?> - Displays a date-based archives list
< ?php posts_nav_link(); ?> - Displays Previous page and Next Page links
< ?php next_post_link() ?> - Displays Newer Posts link
< ?php previous_post_link() ?> - Displays previous link

WordPress Navigation Menu

This thing is different based on how you want your blog to work. You can have a menu based on pages, on categories or on both. In every way you will need a home page link. In this case here the the 2 approaches for the menu.

Categories based menu

1
2
3
4
5

<ul id="menu">
<li <?php if(is_home()) { ?> class="current-cat"< ?php } ?>>
<a href="<?php bloginfo('home'); ?>">Home</a></li>
< ?php wp_list_categories('title_li=&orderby=id'); ?>
</ul>

Pages based menu

1
2
3
4
5

<ul id="menu">
<li <?php if(is_home()) { ?> class="current_page_item"< ?php } ?>>
<a href="<?php bloginfo('home'); ?>">home</a></li>
< ?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
</ul>

In both cases we add a class that is used by WordPress in styling the list items. So, in this case we will add the classes to a hardcoded home list item.

Display X posts from a category

On the first page we have in the sidebar 2 sections for latest tips and latest graphic ratings. Those sections were made with the help of the query_posts.

1

< ?php query_posts('category_name=Name Here&showposts=10'); ?>

The name should be exactly the same as the one typed in the Administration panel under categories section.

Custom Template File

In WordPress you can insert any additional template file that is none of the ones in the first section. In this way you can make your own template file and embed it in your theme.

1

< ?php include (TEMPLATEPATH . '/searchform.php'); ?>

Final words
This is my WordPress Cheat Sheet. For more information, you can search the WordPress Codex. You can find there all the information you need: tags, parameters, functions, hacks etc. Hopefully this page will help you and it will give you a little more time in designing instead of researching. Thanks WordPress and cheers!

Andy Gongea is a passionate UI/UX designer with a great appetite for technology and trends. Currently he owns, a future wife, a loan that comes with a monthly fee and some strange ideas about user interface and user interaction. Cheers!

Sponsors

Community Links

  • Create the Toyota logoHi there. In this tutorial you can learn to create the Toyota logo. It is all about circles and the Pathfinder panel. You will have to create a series of circles of exact dimensions. Regarding that,the grid and the snap to grid option will ease your work.
  • 60+ Creative And Well Designed PagesWhen doing my research for 404 error pages, I was surprised to see that three quarters of the websites I visited did not have custom 404 error pages.
  • Design an animated banner in PhotoshopIn this tutorial I will show you how to use Photoshop to create an animated leaderboard banner.
  • Top 10 Websites To Brush Up Your jQuery SkillsTo brush up your skills in jQuery, we present you Top 10 Websites For Free jQuery Tutorials that have been providing some cool demos and step by step guidelines, such that a beginner can master his skills of jQuery easily
  • Top 8 Principles of Effective Website DesigningEverything is guided by certain set of standards, rules and regulations. If the task is not driven by some guidelines, then it could face difficulties for its successful completion.
  • 61 Incredible Logo Designs #3Here’s yet another roundup of amazing logo designs. This is a series that we do frequently, so make sure to check out the past logo articles.
  • 20+ Amazing Product PSD files found on DeviantARTThese are a selection of over twenty PSD files which I have found over on DeviantART, specifically of various electronic products.
  • Create a documents icon in IllustratorHi there. In the next tutorial you’ll learn to create a pretty common icon. To reach this result you need to know how to use the Rectangle Tool, the Pen Tool or the Type Tool.
  • 10 Downing Tweets10 Downing Tweets is a Flash and Twitter based website created by twentysix Leeds. The site includes a twitter vote, a daily poll and an insight on the twitter noise the election is receiving. Will the final results on our site echo who gets elected?
  • 20 Clever Futuristic Free FontsFuturistic fonts were always one of my favorite font styles. I was never that much into grunge and similar styles. I rather keep it clean, but still cool looking. If you like this style, take a look at the collection of 20 free futuristic fonts I put toge

Friends