Dev Tips | Become a Better Developer, One Tip at a Time. » Wordpress

Creating Unique Styles for WordPress Pages

Nick Plekhanov — Sun, 07 Mar 2010 02:07:23 +0000

In WordPress 2.8, there is one small but very useful feature, both for WP web developers, and for bloggers. This is an opportunity to change the appearance of any individual page or group of pages without the need to write either the functions/conditions on php or install plugins. All you need to do is simply add your desired style to your css file.

How does it work?

In WordPress 2.8 has been added to the function body_class(). It works like so

So, we just need to apply such function to the body.

If your theme is adapted for WordPress 2.8, this feature is probably already present in the code. In case you can’t find that function, it's enough to search for

tag in header.php file of your theme and replace it with

Usage

What do we get from using this function? It’s very simply; we get a or

What does this give us? Let’s look at some examples.

Adding to your website’s css file:

.postid-3 #respond{

display: none; 

}

Will kill comments form from post with id=3, just leaving comments.

.home{

background: #f00;

}

Only make the background of the home page in red.

.page h2{

font-size: 30px;

}

Increases the size of the header only on the pages (not blog entries) of the site.

Anyway, these are just simple examples. Using this feature you can make almost any changes in the CSS file for a single page or page group.

Documentation

Below you can see a full list of body classes that can be used for custom styling (just apply desired styles to them). That long list lets us know that style can be applied to almost any page, even to the third page of a search results, even to the tag, even to the author.

rtl
home
blog
archive
date
search
paged
attachment
error404
single postid-(id)
attachmentid-(id)
attachment-(mime-type)
author
author-(name)
category
category-(name)
tag
tag-(name)
page
page-parent
page-child parent-pageid-(id)
page-template page-template-(template file name)
search-results
search-no-results
logged-in
paged-(page number)
single-paged-(page number)
page-paged-(page number)
category-paged-(page number)
tag-paged-(page number)
date-paged-(page number)
author-paged-(page number)
search-paged-(page number)

For WordPress huge fans and those who wants more, there is an opportunity to add their custom classes to body_class via a standard WordPress way:

There is no official documentation for body_class() at the moment, but as usually happens in WordPress, the function is made very simply and wisely. So, it is not difficult to understand it. A little more details can be found in the body_class() function’s code.

Thank you and good luck!

WordPress and HTML Theme Giveaway, Three Premium Themes Up For Grabs!

Drew Douglass — Thu, 10 Sep 2009 08:58:17 +0000

We are happy to launch a wonderful WordPress theme giveaway today, with three premium themes up for grabs! Our good friends at ThemeForest and Themeforest author, MasterGreed, are giving away two premium WordPress themes and a spectacular HTML admin skin for a total of 3 themes! Keep reading for information on how to enter!

1^st Place - Paraportica WordPress Theme

Paraportica Premium WordPress Theme

Paraportica WordPress Theme - Comments Section

Paraportica is a simple and clean theme for WordPress blog-like website, coming with 4 different colour styles: red, blue, green and coffee (with a lot of milk), and build-in Twitter stream.

Features:

Valid XHTML 1 .0 Transitional
4 colour styles
Widgetized sidebar
Build-in Twitter stream
Theme Options page to manage Twitter stream and change styles
Build-in, ‘Digg-like’ FAQ markup
Gravatar support for comments;
Ready for WordPress 2.7 comments;
Comments compatible with WordPress 2.6 too;

2^nd - North Hunters Premium WordPress Magazine

North Hunters Theme Previews

North Hunters - Dark Version

North Hunters WordPress Magazine is a magazine-like theme for WordPress, with additional features like social media stream (with custom widget) and advanced images resize functionality. It works with WordPress 2.7 and 2.8 as well.

Features

Custom theme options page, allowing you to manage the theme without dealing with code!
3 widget areas – sidebar and two on frontpage.
Dropdown menu
Custom Social Media Stream widget.
Using phpThumb() to manage image resizing.
Threaded comments, up to 10th depth!
Styling for build-in WordPress gallery!
Styling supports flickrRSS plugin, and widgets.
NEW : 6 new styles, 7 styles in total!
NEW : 3 custom widgets: Portoflio widget & Video widget & Site authors widget
NEW : Tabbed featured section

3^rd - Splash Manager - Premium HTML Admin Skin

Splash Manager - Admin Skin

Splash Manager - Alternate Blue Color Scheme

Admin template coming with three different styles (coffee, classic & green), with navigation supported by jQuery on the sidebar.

How To Win

This contest is all about having the most creative 404 page. To enter, simply follow the bullet points below:

Register for a ThemeForest account if you haven't already. You must have a ThemeForest account to be eligible.
Submit your 404 page for a site you run. The website must be owned and run by yourself!
Leave a link to your ThemeForest username AND your 404 page in the comments section.

After about two weeks or so of submissions, we will setup a poll on Dev-Tips to allow users to vote on the most creative 404 page that was submitted. The three winners will be given the themes above!

Rules and Guidelines

You must leave both your ThemeForest username and your 404 page of your website in the comments section.
The 404 page submitted must be your own and the work must be done by you!
The contest will remain open to submissions for at least two weeks, and at our discretion we will setup a poll for voting.
Any attempt at cheating or anyone suspected of suspicious activity will be disqualified.

Special Thanks To...

ThemeForest

MasterGreed

ThemeForest User - MasterGreed

Showing Code on WordPress Posts with Snipplr!

Drew Douglass — Sun, 12 Jul 2009 05:03:31 +0000

If you haven't used Snipplr yet, or are unsure what Snipplr is, it is basically a code pasting/sharing site on the surface. I recently signed up for an account, after looking at a lot of different places to store small snippets (bigger projects get stored GitHub) and found Snipplr to be a really excellent application. Today, I'm going to go over how to display code on your WordPress site using a Snipplr plugin and a snippet of your choice, I'll also be talking about some of the cooler features of Snipplr.

A Quick Note

Before I continue, I want to note that I am in no way shape or form in business with or getting paid at all by snipplr or anyone else for this post. I just found Snipplr to be a cool application and decided to share some things with you all /end disclaimer

What does Snipplr do?

A simple look at the about page will answer that question for you:

With Snipplr you can keep all of your frequently used code snippets in one place that's accessible from any computer. You can share your code with other visitors and use what they post, too. Did we mention that Snipplr works with TextMate? Yeah, we rock.

Notable Features

Tons of programming languages to choose from, all with slightly different syntax highlighting.
The ability to add the original URL you found the snippet (if one exsists), you can also add the original author and any comments about the source code. Giving credit where it's due FTW!
Ability to tag and favorite any snippet you wish for easy organization.
Features integrate into TextMate. Furthermore, there are quite a few applications Snipplr integrates with.
Ability to download a backup copy of all of your snippets. I thought this was an especially cool feature.
Add others to your 'watchlist', which is other peoples snippets that interest you (much like Twitter, if you find someones snippets to be awesome, you can follow and keep track of them). By the way, you guys can follow me on snipplr anytime
An API key and available API. In addition, a Snipplr WordPress plugin that we will be using later in this article

Hopefully, the above features will convince you to give Snipplr a look. Let's move on and get to displaying code snippets on our blog using the Snipplr plugin.

Download the plugin

The first thing you will need to do is download the WordPress Snipplr plugin, which will allow you to display any snippet you want, anywhere on your blog using WordPress short codes.

Grab your API key

Next, you will need to grab your API key on the settings page. You will need to register an account to receive an API key, which should take all of 3 seconds or so. Navigate to the bottom of the settings page and copy your API key to your clipboard.

Add a snippet

Add whatever code it is you are wanting to display on your blog by clicking new snippet. Fill in the appropriate fields and click 'Post'. Now you can forever go back to that snippet if you need quick access to it or have any issues with your blog. Moving on...

Activate the plugin

After installing the plugin, activate the plugin and go to the Snipplr configuration page in your admin panel. Paste in your API key and set your Snipplr preferences.

Using the shortcode

We're nearly there. Now when you go to write a new post, use the snipplr shortcode [ snippet = id ] without spaces and replace id with the snippets ID number. You can find the snippet ID number in the URL of the snippet you wish to share.

Example below

Below you will find an example of the Snipplr plugin in use. The snippet is getting pulled from my Snipplr account and displayed according to the settings I have set for the plugin.

GPC Magic Quotes Runtime Stripping
Posted by DrewDouglass on July 11th, 2009
All credit for this code goes to the all mighty Fou-Lou of codingforums.com (link given).

if (function_exists('get_magic_quotes_gpc') && get_magic_quotes_gpc())
{
function GPCStrip($arr)
{
if (is_array($arr))
{
foreach ($arr AS $arrKey => $arrVal)
{
$arr[$arrKey] = GPCStrip($arrVal);
}
}
else if (is_string($arr))
{
$arr = stripslashes($arr);
}
return $arr;
}
$_GET = GPCStrip($_GET);
$_POST = GPCStrip($_POST);
$_COOKIE = GPCStrip($_COOKIE);
if (is_array($_FILES))
{
foreach ($_FILES AS $key => $val)
{
$_FILES[$key]['tmp_name'] = str_replace('\\', '\\\\', $val['tmp_name']);
}
}
$_FILES = GPCStrip($_FILES);
}
if (function_exists('set_magic_quotes_runtime'))
{
set_magic_quotes_runtime(0);
}

Check out the functions links!

I didn't even notice this until I was previewing this post, but if you hover over the functions in the above code, you will see that they all link to the functions in the php manual! That's a very user friendly feature of this plugin.

Follow me on Snipplr!

Feel free to follow me on Snipplr. If you're already on, leave your Snipplr link in the comments and I'll try to keep you on my watch list if I find it interesting. Have fun and use it responsibly, always give credit where it is due!

WordPress Plugin: Envato Recent Items, Updated!

Drew Douglass — Sun, 26 Apr 2009 22:37:20 +0000

Howdy folks! In case you missed it, I recently wrote an article for the ThemeForest Blog entitled display your recent items with WordPress and the Envato API. This post showed you how to display items from markets like ThemeForest and Flashden on your blog, along with their thumbnails and links. Well, the plugin has been updated with some new features and is now available on the WordPress plugin directory. Read on to find out about the features and how to use the plugin!

Features of the Envato Recent Items Plugin

In short, the plugin allows you to easily show and style your recent items from Envato, from any market place (FlashDen, ThemeForest, AudioJungle, GraphicRiver etc). The plugin comes with the following features as of version 1.0:

Thumbnails of item are shown and also link to your item.
Any number of items can be shown, depending on your preference.
You can choose to display the price of each item if you wish, the price does not display by default.
The title, thumbnail, and link are all wrapped in custom classes so you can easily style however you desire.
You can now add a referrer ID (username) in case you want to take part of the referral program.

How to use and install

Upload envato_recent_items folder to the /wp-content/plugins/ directory.
Activate the plugin through the 'Plugins' menu in WordPress.
Place
in your template file(s) where you wish the items to be displayed.

The first argument is your username and is required.
The second argument is the marketplace and is required.
The third argument is the number of items to display and is required.
The fourth argument is wether or not to show the price and is not required. Defaults to false.
The fifth argument is your referral id (your username) and is not required. Defaults to null.

Now, you may be wondering, why not just have the referral id be the same as the username? Good question. I wanted to keep this plugin as flexible as possible, and there may be cases when the items you are displaying (maybe a buddy or a co workers) would not be the same as your username.

Screenshots

Below is a screenshot of the plugin without any styling, also note that the price here is being shown, which is off by default:

Below is an excellent use of the plugin by The Molitor:

Download the Plugin!

You can download the plugin from the WordPress plugin index. If you have any questions, please be sure to read the FAQ and installation instr unctions on the plugin homepage. Any suggestions or comments are always welcome, enjoy!

Donate

If you have found this plugin to be helpful, I ask you to consider making a donation of any amount. Donations keep me motivated and allow me to continue to build and enhance WordPress plugins. Any donations are greatly appreciated!

Use the Twitter and TinyURL APIs to Create a WordPress Plugin

Drew Douglass — Mon, 20 Apr 2009 09:09:25 +0000

After the success of the release of our first WordPress plugin, Are You Sure?, we've decided to show you how to make a super simple WordPress plugin that uses the TinyURL and Twitter API. The plugin we will create will add a little link to the end of each individual post, this link will allow the users to send the title of the page they are reading, along with a tinyurl link to the page. Lets get coding!

The Basics

The first thing we need to do is create a new folder, I will call mine 'tiny_tweet'. Next, inside the directory, create a file named 'tiny_tweet.php'. Inside tiny_tweet.php we need to put some basic comments at the top to let WordPress properly recognize our plugin. So far our plugin looks like this:

Defining our function

Now we need to setup the function that will do all of the work for us. We want to make sure that the function does not already exists, so we will put this check into place.

if(!function_exists('dd_tiny_tweet_init')){

function dd_tiny_tweet_init($content){

  }
}

Twitter and TinyURL

Lastly, we need to setup our variables and create the TinyURL of the current article so that we can put a link to the page when the user sends the page to their Twitter status. Lets look at the final code and then discuss it.

Enjoy this post? The give it a tweet!';
	}
	return $content;
  }
  add_filter('the_content', 'dd_tiny_tweet_init');
}
?>

Most of the variables should explain themselves, but lets walk through some of the important steps in our function.

First, we store the TinyURL url of the page inside a variable for later use. Please note that the technique to get the TinyURL was brought to my attention by my friend and Dev-Tips author Brian Cray in his post titled 'Generate TinyURLS with one line of php'. It is also important to note our server needs to support file_get_contents. If you host doesn't, tell them to get with the times!
Next up we get the title of the current post and grab the first 100 characters of that title (to leave room for the link in the status).
Moving on we store the status Twitter link in a variable with the appropriate message in the status query.
Lastly, we check if the current page is a single article, if it is we append the twitter link to the bottom of the content with a custom div class (so it may be styled).

Now, when the user goes to read an individual article, they willl see 'Enjoy this post? Then give it a tweet!'. Upon clicking the link, they will be brought to twitter with their status already filled out. Now, they simply press the 'Update' button, and voila!

Demo Screenshots

Below is the default, unstyled link and text produced:

Below is what the user will see once they click the link. For those of you that will inevitably type the tinyurl in the screenshot below into your browser, that is a free hosing account I have setup for WordPress development and plugin testing

It isn't the most complex Twitter plugin, but it works just like it should and gets the job done. Feel free to use this plugin if you like. We will be making some final changes to it and will officially release it for download shortly in a new blog post.

WordPress Security Tip: Get Rid of Hello.php!

Drew Douglass — Sat, 21 Mar 2009 02:25:57 +0000

Today we will cover a quick WordPress security tip. The other day while I was browsing some wordpress security notes, the article mentioned adding an index.html file to your plugin folder to prevent anyone from snooping around your directory. This is an excellent tip, but not the one we will cover today.

The Problem

The problem I realized (and I am not claiming I am the first to notice this, but I have never read this anywhere before) is that hello.php is included with every version and download of WordPress. The actual plugin is fine, and has no security holes to speak of, but the problem is that a lot of people don't delete this file (assuming they are not using it).

Why is this a problem?

Well, if a not so ethical user knows that every version of WordPress comes with the hello.php plugin file, he/she can simply navigate to http://yoursite.com/wp-content/plugins/hello.php. The security issue here is that when the user directly accesses the url as seen in the previous sentence, then most likely an error message will be displayed with your full server path exposed. This is not a good thing, you do not want people knowing your servers full path, this gives theme insight and more information about your server and increases the chance of a hack/crack.

I visited a lot of very popular sites that I know that run WordPress and was amazed to see how many errors I could produce and full server paths I was able to find. In addition, I was able to browse the parent directories of a lot of blogs by simply going to http://yoursite.com/wp-content/plugins/.

What to do?

Remove hello.php assuming you are not using it. If you are then rename it something unique.
Add a blank index.html file to your plugins and theme folder (credit to Prelocav for this tip).

I am considering looking more into this and possibly starting a ticket or thread to see if WordPress will do anything about this, it really is a pretty obvious security issue. I know they won't want to remove hello.php from future versions, but besides telling people to delete or rename it, I don't see many alternatives. What do you guys think?

WordPress Plugin: Are You Sure?

Drew Douglass — Sun, 22 Feb 2009 08:26:55 +0000

Today we are releasing a new and very simple WordPress plugin we think you will all enjoy. The plugin is named Are You Sure? and it was created to prevent any accidental postings. If you have used WordPress for any amount of time, I am sure you have accidentally pressed the 'Publish' button before you were ready to publish. Sure, you can go back and change it, but chances are your RSS readers and anyone browsing the site already have seen it. Are You Sure? uses some simple Javascript when the Publish button is clicked and confirms that you do indeed wish to publish the current content. Read on to download and for instructions.

Are You Sure? (1045) - 1.67 KB

Features

Upon clicking the 'Publish' or 'Update post/page' button, a simple Javascript box confirms that you wish to publish the current content. You may cancel the publishing and go back and continue editing.

Extremely small file size, less than 1.7 KB total.
Simple to use, just activate and your done.
Saves you from accidental posting.
Works on any 'Publish' button, including pages, posts, and quickpress.
Tested and Compatible with WordPress 2.7+

Screenshot

Installation and Usage

If you have never used a WordPress Plugin, you may consider reading the introduction to plugins on the WordPress Codex.

Upload the 'areyousure' folder to 'wp-content/plugins/' directory on your server.
Go to the plugins link in the WordPress sidebar in your WordPress admin panel.
Find the plugin and click activate.
Your done!

Download

Are You Sure? (1045) - 1.67 KB

WP Version:Tested and working up to WP 2.9+
Current Version: 1.0
Download: Are You Sure? (1045) - 1.67 KB
GitHub URL: http://github.com/DrewDouglass/Are-You-Sure-
GitHub Clone: git://github.com/DrewDouglass/Are-You-Sure-.git

Buy Me Some Chinese Food?

If you enjoy this plugin and have found it helpful, I encourage you to consider making a donation of any amount. Donations keep me motivated and help cover a tiny percent of the time and costs that go into developing plugins for the WordPress Community

Feedback and Requests

We'd love to hear any feedback or requests you might have, let us know in the comments below! If you need support you can shoot us an email via our contact page. If you enjoy WordPress and WordPress plugins, you might also enjoy our article titled 'Use the twitter API to create a wordpress plugin'.

iBlog-A Free and Functional HTML and PHP Theme

Drew Douglass — Sat, 24 Jan 2009 02:55:02 +0000

I'm glad to release the first of many free themes to come on Dev-Tips. Every once in a while, we will release another free HTML or WordPress theme for you to use however you like. You cannot sell these themes or use them commercially without the permission of Dev-Tips.com. Other than that, enjoy them! Today, we will have a look at a fully functional HTML and PHP based theme called iBlog.

Download iBlog (838) - 2.63 MB

Introducing iBlog

If you didn't already guess, iBlog was named and inspired by Apple, as are a lot of my designs. Call me a fanboy, I'm cool with that. Below you will find the screenshots, features, and a screencast going over the features and install.

Home Page

Single/About Page

Image Gallery

Contact Message Fail

Contact Message Pass

iBlog Features

Font embedding via typeface.js
Twitter updates via JSON
Working php contact form with custom success and error messages
Lightbox effect on the image gallery
The "paper clip" is a seperate image, thus any image can be replaced under it.
Compatible with IE6+ FF 2+ Opera 9+, Safari 3.0+
Full psd file included.
Help file included that explains everything you need to know about setting up this theme.

Important Note

You need to be running PHP version 5 or higher for this to work properly. It may work in PHP 4, however, no support will be provided for those running PHP 4. Please upgrade.

Live Preview

You can view a live preview and all source code at the live preview page for iBlog.

Usage

You may use iBlog in any non-commercial way you wish. If you enjoy the theme, a link back to Dev-Tips is appreciated and helps keep us motivated to build more free themes!

Download iBlog

Download iBlog (838) - 2.63 MB

Get Support

Please read the help file thoroughly before requesting support. If you still need help, please contact us via the contact page with the subject of 'Theme Support'.

Hosting

You can get also get blog hosting over at WHS, if you don't already have a webhosting provider. They can help you find good options should you need it.

Lastly, if you enjoyed this theme, let us know! We'd love to know what you think, and what you would like in the future.

WordPress Tip: 20 Resources to Get You Started

Drew Douglass — Tue, 06 Jan 2009 12:06:31 +0000

While lurking around on the theThemeForest blog the other day, I ran across a great post aimed towards those new to mildly experienced with WordPress. If you are looking to become a WordPress ninja, you might want to give this article a look.

Dev Tips | Become a Better Developer, One Tip at a Time. » Wordpress

Creating Unique Styles for WordPress Pages

How does it work?

Usage

Documentation

WordPress and HTML Theme Giveaway, Three Premium Themes Up For Grabs!

1st Place - Paraportica WordPress Theme

2nd - North Hunters Premium WordPress Magazine

3rd - Splash Manager - Premium HTML Admin Skin

How To Win

Rules and Guidelines

Special Thanks To...

ThemeForest

MasterGreed

Showing Code on WordPress Posts with Snipplr!

A Quick Note

What does Snipplr do?

Notable Features

Download the plugin

Grab your API key

Add a snippet

Activate the plugin

Using the shortcode

Example below

Check out the functions links!

Follow me on Snipplr!

WordPress Plugin: Envato Recent Items, Updated!

Features of the Envato Recent Items Plugin

How to use and install

Screenshots

Download the Plugin!

Donate

Use the Twitter and TinyURL APIs to Create a WordPress Plugin

The Basics

Defining our function

Twitter and TinyURL

Demo Screenshots

WordPress Security Tip: Get Rid of Hello.php!

The Problem

Why is this a problem?

What to do?

WordPress Plugin: Are You Sure?

Features

Screenshot

Installation and Usage

Download

Buy Me Some Chinese Food?

Feedback and Requests

iBlog-A Free and Functional HTML and PHP Theme

Introducing iBlog

Home Page

Single/About Page

Image Gallery

Contact Message Fail

Contact Message Pass

iBlog Features

Important Note

Live Preview

Usage

Download iBlog

Get Support

Hosting

WordPress Tip: 20 Resources to Get You Started

Visit Article

1^st Place - Paraportica WordPress Theme

2^nd - North Hunters Premium WordPress Magazine

3^rd - Splash Manager - Premium HTML Admin Skin