quirm.net » WordPress

Changing Backgrounds with body class()

Mel — Tue, 11 Oct 2011 15:56:37 +0000

The body_class() WordPress function attaches a list of classes to the element according to what type of page is being displayed.

These classes can be used — in conjunction with your theme’s stylesheet — to display different backgrounds on different pages.

Let’s assume your header.php template file contains:

And your current CSS for the background looks like:

body {background:#fff url(images/bg.jpg);}

In a single post, your body tag would look like:

A category page could have:

whilst a tag page might generate:

The CSS

You can add some new rules to your theme’s CSS to target specific backgrounds at particular pages.

Default Single Post

body.single {background:#ccc url(images/bg-single.jpg);}

Single Post with an ID of 188

body.postid-188 {background:#999 url(images/bg-special.jpg);}

Default Category Background

body.category {background:#eee url(images/bg-cat.jpg);}

Category A Only

body.category-cat-a {background:#ddd url(images/bg-cat-a.jpg);}

The possibilities are almost endless.

You can find a full list of the classes generated by the body_class() function in the WordPress Codex.

Headers Already Sent

Mel — Fri, 07 Oct 2011 08:50:01 +0000

The most common reasons for seeing this error message in your WordPress site are spaces, new lines, or invisible characters before an opening tag or after a closing ?> tag in one of the site’s scripts. But, in order to fix the problem, you have to know which file is causing the problem.



Step 1: Interpreting the Error Message 
All of the relevant information is normally given in the first part of the message — the ... output started at... part.
Example 1
Warning: Cannot modify header information - headers already sent by (output started at /path/wp-content/plugins/foobar/foobar.php:8) in /path/wp-comments-post.php on line 55
In this example, the problem is in the foobar.php file of the Foobar plugin.
Example 2
Warning: Cannot modify header information - headers already sent by (output started at /path/wp-content/themes/wibble/functions.php:11) in /path/wp-includes/pluggable.php on line 850
Here, the problem is in functions.php file within the Wibble theme
Example 3
Warning: Cannot modify header information - headers already sent by (output started at /path/blog/wp-config.php:82) in /path/blog/wp-login.php on line 42
The problem is at line 82 of wp-config.php.
Step 2: Fixing the Problem 
Example 1: A Plugin
The easiest option here is to simply delete the plugin and look for an alternative one. If you cannot access your WordPress dashboard, reset the plugins folder. Then re-install your plugins — with the exception of the one that caused the problem.
Example 2: The Theme
If you are not comfortable with editing PHP files, then you may want to look at installing another theme. If you cannot access your WordPress dashboard, switch to the default theme by renaming your current theme’s folder in wp-content/themes and adding “-old” to the end of the folder name using FTP or whatever file management application your host provides. This should allow you back into your dashboard where you can download another theme.
If you are comfortable with editing PHP files, then download the file mentioned in the error message (functions.php in the Example 2) and follow the instructions for removing invisible characters in a file.
Example 3: wp-config.php

Download wp-config.php from your site’s main WordPress folder.
Open the file in a plain text editor.
Check that the very first characters are 

If the very last characters are ?>, remove them.
Check that there are no invisible characters in the file.
Re-upload the amended file.

Removing Invisible Characters in a File

Open the file in a plain text editor.
Place the cursor before the first character in the file.
Press the BACKSPACE key & keep it pressed for a count of 10.
Place the cursor after the last character in the file.
Now press the DELETE key on your computer & keep it pressed for a count of 10.
Save the file without pressing any other key.
Check the encoding of the file. Do not encode files as UTF-8 with BOM. The BOM will be seen as a character.



eJS Twitter
Mel — Tue, 04 Oct 2011 12:16:13 +0000
 I was looking for a very simple twitter feed plugin a while back but couldn’t find one that suited my needs. So I  built one…
eJS Twitter adds a Twitter feed widget to your site. It’s as lightweight as possible with minimal configuration needed to get it up & running.
It’s also compatible with WordPress 3.2 (or above) and translation-ready. Support available via the Quirm.net forums.




Enjoy!
Note: There is a file embedded within this post, please visit this post to download the file.



WordPress SEO: Better Titles
Mel — Mon, 03 Oct 2011 08:02:39 +0000
 The content of the HTML  tag is used to:

Create a title in the browser toolbar
Provide a title for the page when it is bookmarked
Display a title for the page in search-engine results

It make sense, therefore, to take some time to craft a good title in your WordPress site. In the vast majority of WordPress themes, the title is generated in the theme’s header.php template file. So you need to start by editing this file.

Some themes simply use something like:
<?php wp_title();?>
But that’s not nearly enough to generate a good title. What you want is code that generates informative, page-specific, titles. So try something like:
<?php global $page, $paged;
if ( $paged >= 2 || $page >= 2 ) $we_are_on = sprintf( __( ' (Page %s) ' ), max( $paged, $page ) );
else $we_are_on = '';

if( is_home () ) : printf(__( '%1$s%2$s on %3$s'), wp_title('', false), $we_are_on, get_bloginfo('name') );

elseif( is_search() ) :
if( trim( get_search_query() ) == '' )  printf(__('No search query entered on %1$s'), get_bloginfo('name') );
else printf( __( 'Search Results for \'%1$s\' on %2$s%3$s' ), trim(get_search_query() ), get_bloginfo('name'), $we_are_on );

elseif ( is_category() || is_author() ) : printf(__( '%1$s%2$s on %3$s' ), wp_title('', false), $we_are_on, get_bloginfo('name') );

elseif( is_tag() ) : printf( __('Entries tagged with \'%1$s\'%2$s on %3$s') , wp_title('', false), $we_are_on, get_bloginfo('name') );

elseif( is_archive() ) :
printf( __('Archives for %1$s%2$s on %3$s'), wp_title('', false), $we_are_on, get_bloginfo('name') );

elseif( is_404() ) : printf(__( 'Page not found on %1$s' ), get_bloginfo('name')  );

else : printf( __('%1$s%2$s'), wp_title(':',true, 'right'), get_bloginfo('name') );

endif;
?>




Change eShop’s Merchant Gateway Images
Mel — Fri, 30 Sep 2011 21:13:24 +0000
 The eShop ecommerce plugin ships with a default set of images for the various merchant gateways that can be located in wp-content\uploads\eshop_files. However, if one of these images does not suit your purposes, it’s relatively easy to change it via your theme’s functions.php file. The following example illustrates how to change the Cash icon:


Upload your new gateway icon to your theme’s images folder.
Edit your theme’s function.php file in a plain text editor and add the following new function>
function mythemes_icon_cash() {
	$icon = array(
		'path'=>get_stylesheet_directory(). '/images/cash.png',
		'url'=>get_stylesheet_directory_uri(). '/images/cash.png'
	);
	return $icon;
}
add_filter('eshop_merchant_img_cash', 'mythemes_icon_cash');


There are also filters for each of the other gateway icons:
eshop_merchant_img_cash
eshop_merchant_img_bank
eshop_merchant_img_authorizenet
eshop_merchant_img_payson
eshop_merchant_img_paypal
eshop_merchant_img_ideallite
eshop_merchant_img_webtopay
eshop_merchant_img_ogone
eshop_merchant_img_epn
Enjoy!



WordPress Memory Issues
Mel — Tue, 27 Sep 2011 13:45:13 +0000
 Symptom: Your site crashes and displays a message along the lines of Fatal error: Allowed memory size of xxxxxxxx bytes exhausted
Cause: You do not have sufficient memory allocated to PHP within your hosting account.
There are a number of ways you can get your site up & running again. The method that works for you will depend upon your host’s server set up.

Via a php.ini file
Some hosts allow you to amend some PHP variables on your hosting account via a php.ini file. If necessary, check with your hosts to see is this option is available to you.
If you already have a php.ini file, download it and open in in a plain text editor. Look for memory_limit. If the value is 32M try, 64M. If it’s already 64M, try 128M:
memory_limit = 128M;
Then upload the amended file.
If you do not have an php.ini file, check with your host regarding first about creating it.
Via an .htaccess file
If you don’t have access to php.ini, you could try increasing PHP memory  via an .htaccess file. If you do not have an .htaccess file in your domain’s root folder, you’ll first need to create one by creating a new file in a plain text editor and adding:
php_value memory_limit 64M
You may run into problems with saving the file. Because .htaccess is a strange file name (the file actually has no name but a 8 letter file extension), it may not be accepted on certain systems (e.g. Windows). With most operating systems, however, all you need to do is to save the file by entering the name as ".htaccess" (including the quotes). If this doesn’t work, you will need to name it something else (e.g. htaccess.txt), upload it to the domain root folder and then rename it using an FTP program
Via the wp-config.php file
Download your WordPress wp-config.php file and open it in a plain text editor and add:
define('WP_MEMORY_LIMIT', '64M');
immediately after:
define ('WPLANG', '');
Then re-upload the changed file.
Nothing works!
The methods listed above amy not work with all hosts. If you’ve tried them all and you’re still getting fatal error messages, try contacting your hosts for assistance. Just remember to send them a copy of the complete error message and tell them what you have tried so far.
 My hosts won’t help
If your hosts insist on limiting your PHP memory allocation to less than 32M, change hosts. You really can’t run WordPress 3 or above without access to at least 32M.
If you are limited to 32M, it is still possible to run WordPress effectively but you will have to severely limit the number of plugins you use. I’d also suggest that you steer clear of plugins that parse Post or Page content in either the front or back end of the site as these plugins are likely to be the most memory-hungry. 
Start by deactivating all plugins, then re-activate them again one-by-one until you hit the same problem. This should give you some idea of how many — or which — plugins you can safely use. Repeat the mass plugin deactivation again but, this time, only activate those that you have determined to be “safe”.
Good luck!



What You Need To Know For eShop
Mel — Fri, 23 Sep 2011 14:40:07 +0000
 eShop – the WordPress eShop ecommerce plugin has fairly extensive documentation but there is a lot you can do before you even install the plugin.
Answering and checking off the following question before you start configuring eShop should make the eShop set-up process a little easier for you.

Is Your Merchant Gateway eShop Compatible?
There are a number of merchant gateways that you can use with eShop:

Authorize.net
eProcessingNetwork
iDeal Lite
PayPal
Payson
Ogone
webtopay

But you may need to make changes to your gateway account to ensure that it is compatible with eShop.

Check your merchant gateway
Do You Have Your Merchant Gateway Details?
You will need all of the necessary details for your chosen merchant gateway – e.g. if you’re using PayPal, you will need the email address that you use on your PayPal account.

Setting up eShop merchant gateways
Where Will You Be Shipping To?
Will you be selling in your own country only (i.e. by State/County/Province)? Or internationally (i.e. by Country)?

Defining your shipping locations
Have You Zoned Your Delivery Locations?
The cost of shipping an item varies according to its destination. eShop allows you to group different delivery locations into “zones” & apply different charges accordingly. You can have up to 9 zones.

Have you divided your shipping locations in 1 or more groups – called “zones”

What are shipping zones?
Have You Broken Your Products Down Into Shipping Classes?
The cost of shipping an item can also vary according to its weight, size, cost or fragility. eShop allows you to define up to 5 shipping classes to accommodate these differences with the 6th reserved for free shipping.

What are shipping classes?
What Are Your Shipping Costs?
You should have worked out all of your shipping charges and have determined how to apply them.

Will you charge for the first item based on delivery zone & shipping class with a reduced cost for additional items (Method 1)?

Will you charge for the each item based on delivery zone & shipping class with no reduction for additional items (Method 2)?

Will you charge a flat rate based on delivery zone only (Method 3)?

Will you charge based on delivery zone & product weight (Method 4)?

Calculating shipping
Will You Be Applying Tax?
If you will be applying tax to products – such as VAT or sales tax – you will need details of what tax to apply and when. You also need to decide if tax will also be applied to shipping charges.

Setting up sales tax
Will Your Products Offer Choices?
eShop includes option sets that allow you to add customer-selectable choices to your products. What options can customers choose from when purchasing one of your products? Different sizes? Different colours? Are some colours more expensive? You can set an additional price & weight for each option within a set.

Using option sets
Do You Have All The Details And Images For A Single Product?
You will need all of the text plus at least 1 image for a sample product. You also need to be able to set it’s price, shipping class, options set(s) and tax rates based on your answers to the questions above. This exercise will help you get a handle on how to set up eShop to suit your needs.



Using $s with Double Quotes in WordPress
Mel — Tue, 20 Sep 2011 19:02:32 +0000
 I came across a really worrying issue recently when a site running one of my own themes failed a PCI compliance test. The template file concerned was search.php and the offending code was
', $my_searchterm, '');?>
From the test results, it seemed that $my_searchterm was not being escaped and that this was opening up an XSS-scripting hole. Yet $my_searchterm was escaped!

$my_searchterm = trim(get_search_query());
After much head scratching — including some in-depth research into using printf with HTML tags — I’d pretty much given up on finding the root cause and was about to remove the entire line when Otto came to the rescue.
I’d been looking in the wrong place. The isse wasn’t with $my_searchterm — it was with:
"Sorry - I couldn't find anything on '%1$s%2$s%3$s"
The standard type specifier for a string substitution when using printf or sprintf is $s (PHP documentation link).
However, in WordPress, $s has a special meaning — it’s the unescaped search query. By using double quotes in the printf, I had stopped $s from being used as a string substitution and, instead, it was being parsed by WordPress.
The solution? Switch to using single quotes.
', $my_searchterm, '');?>
Now $s isn’t parsed — it’s substituted.
All in all, I was pretty appalled at how easily I had opened up this particular security hole — despite being paranoid about sanitising generated output. I also can’t help thinking that the WP core devs weren’t having a good day when they decided to use $s for the search query — especially since printf and sprintf string substitutions are commonplace if you are trying to make a theme translation-ready. Something like $wp_s might have been far safer.
In the meantime, check your scripts for double-quote enclosed string substitutions or you might end up making the same mistake I did.



Resize the Header in a Twenty Eleven Child Theme
Mel — Sun, 18 Sep 2011 10:52:30 +0000
 In the WordPress Twenty Eleven theme, the header image needs to be 1000px wide and 288px high. But what if you want to use a smaller (or larger) custom header image?
The changes needed to use a wider image are fairly complex and beyond the scope of this article. But changing the header height is pretty simple…

Do not edit the Twenty Eleven theme itself. As it is the default WordPress 3.2 theme, having access to an unedited version of the theme is vital when dealing with a range of site issues. Instead you need to create a child theme for your customisations. Or download our basic Twenty Eleven child theme.
To make the change, you need to edit the child theme’s functions.php file using a plan text editor or via Appearance → Editor. Let’s suppose you want to reduce the header image height to 150px. After the opening  tag in the child’s functions.php file, add:

function my_header_image_height($height) {
	return 150;
}
add_filter( 'twentyeleven_header_image_height', 'my_header_image_height');
And that’s it. Done!



Adding Text to Your Home Page
Mel — Fri, 16 Sep 2011 09:13:12 +0000
 So you want to edit your site’s home page  but it doesn’t show up under Pages?
Assuming that your site’s front page shows a list of your most recent posts, it is not created in the same way as the other static Pages on your site. It is actually an archive page (which, in WordPress-speak, is a list of posts)and is generated “on demand”. So you cannot just go in and “edit” the page in the same the way that you can edit any of the other static Pages that you’ve created.

If you simply want to change the title of the Page in your site’s navigation menu, try creating a custom menu. This give you full control and allow you to change the page’s label in the menu.
If you want to hide the page’s title, you can use CSS to move the page title off the viewable page. The exact CSS you will use will vary according to your theme but will probably look something like:

#header h1 {
	position:absolute;
	top:-9999px;
	left:-9999px;
}
If you want to add some text to the page, you have three basic options:

Edit your theme’s index.php template file and add your text — complete with HTML markup — to the template file before or after The Loop.
Create a widget-aware area in your theme’s index.php template file, then use a Text widget to add your new content.
Configure your site to use a static front page.

If you decide to use options 1 or 2, remember to create a child theme first and add your customised template file to your child theme rather than amending the original parent. This will protect your customisations if/when you update the parent theme at a later date. This is particularly important if you are using the WordPress default theme as having access to an unedited version of the theme is vital when dealing with a range of site issues.