Author Archives: Steve

About Steve

By day Steve is a professional software test consultant and owner of iTest Solutions Ltd through which he provides professional services. Outside the world of work he enjoys: Physics, Astrophysics, Astronomy, learning how to build standards compliant websites and playing with mathematical ideas on the PC using tools like Mathematica . Away from the computer Steve enjoys discovering new musical artists of all levels and working with dedicated and passionate unsigned artists who are keen to retain some control of their future, their music and their talent.

Change Default Header Images in Twenty Eleven Theme

Posted on by

This post describes how to change the default headers in the Twenty Eleven theme and replace them with images of your choice. Throughout this post it is assumed that you’re working with a child theme – if not you may have to adjust some paths but the general procedure is the same. I have retained the original sizing of the Twenty Eleven images, namely: 1000 x 288px for the header images and 230 x 66px for the thumbnails. There are essentially 3 steps to switching out the default headers and replacing them with your own:

1. Create your own header images and thumbnails
2. Remove the default header images
3. Add your own header images

Step 1 – Create Your Own Images

1. All the usual caveats apply here regarding copyright on images you plan to use – make sure you either have it or have permission to use the images

2. Create a new image or resize an existing image to dimensions 1000 x 288px for the main header image

3. Using the image in step 2 above resize it to 230 x 66px for use as the thumbnail

4. Repeate steps 2 and 3 for the images you want to use as header images in your theme

This might take you a while depending on how many images you want to use, how complex you want to make them and how accomplished you are with your graphics program of choice (Photoshop etc). Once you’ve finished that side of it the rest is pretty quick as follows

Step 2 – Remove the Default Header Images

5. Out of the box the Twenty Eleven theme comes configured with 8 images named:

‘wheel’,'shore’,'trolley’,'pine-cone’,'chessboard’,'lanterns’,'willow’and ‘hanoi’.

You need to remove any of these that you don’t want. You can remove all of them or a subset. To do this add the following code snippet to your functions.php file in your child theme:

<?php
// REMOVE TWENTY ELEVEN DEFAULT HEADER IMAGES
function remove_header_images() {
    unregister_default_headers( array('wheel','shore','trolley','pine-cone','chessboard','lanterns','willow','hanoi')
    );
}
add_action( 'after_setup_theme', 'remove_header_images', 11 );
?>



In this code I’ve chosen to remove all of the default headers for completeness. If you wanted to retain some of them you you would just omit the file names of those you wanted to keep from the “unregister_default_headers” line.

I’ve called the function that does this work “remove_header_images” because that’s a reasonable description of what it does but you can call it anything you want. Just make sure that the name you give the function also appears in the “add_action” instruction at the end.

The parameter “11″ is worth noting. That sets the runtime priority of the action we’ve set up to remove the headers. The default priority is 10 so having a priority of 11 means runs after the default activities, ensuring that we allow the default header images to register and load before we try and remove them.

Step 3 – Add Your Own Header Images

6. Now that you’ve removed the default header images you can add your own. In your child theme folder create a folder to hold your images. I created a folder called “images” and use it to hold all the images for my child theme. You don’t have to do that, you can create as many folders in your child theme as you want and you can call them what you want it doesn’t matter, just make sure that in what follows the image paths point to the folder you choose to hold your header images.

7.Drop the header and thumbnail images you created way back in step 1 into the folder you created in step 7 above.

You should have a pair of images for every header image: 1 header + 1 thumbnail.

A quick note on image file naming conventions. I chose to adopt the following naming convention for my images:

headerimage_filename for the main header image and

headerimage_filename-thumbnail for the thumbnail image that appears in the setup panel

e.g. “aceofspades.jpg” for the main header image and “aceofspades-thumbnail.jpg” for the thumbnail.

That just made it easy for me to remember what was what. You of course, can choose your own approach or just follow mine.

8. With your images all in place add the following code snippet into your functions.php file:

<?php
//ADD NEW DEFAULT HEADER IMAGES
function new_header_images() {
    $child2011 = get_bloginfo('stylesheet_directory');
	define( 'HEADER_IMAGE', '/wp-content/themes/child2011/images/aceofspades.jpg' );
    register_default_headers( array (
        'image1' => array (
            'url' => "$child2011/images/aceofspades.jpg", // 1000 x 288px
            'thumbnail_url' => "$child2011/images/aceofspades-thumbnail.jpg", // 230 x 66px
            'description' => __( 'Ace of Spades', 'child2011' )
        ), // note the comma when using multiple images, you don't need this for the last image
        'image2' => array (
            'url' => "$child2011/images/band.jpg",
            'thumbnail_url' => "$child2011/images/band-thumbnail.jpg",
            'description' => __( 'Rock Band', 'child2011' )
        ),
        'image3' => array (
            'url' => "$child2011/images/batman.jpg",
            'thumbnail_url' => "$child2011/images/batman-thumbnail.jpg",
            'description' => __( 'Batman', 'child2011' )
        ),
        'image4' => array (
            'url' => "$child2011/images/beetleonflower.jpg",
            'thumbnail_url' => "$child2011/images/beetleonflower-thumbnail.jpg",
            'description' => __( 'Ladybird on Flower', 'child2011' )
        ),
        'image5' => array (
            'url' => "$child2011/images/darkangel.jpg",
            'thumbnail_url' => "$child2011/images/darkangel-thumbnail.jpg",
            'description' => __( 'Dark Angel', 'child2011' )
        ),
        'image6' => array (
            'url' => "$child2011/images/earth.jpg",
            'thumbnail_url' => "$child2011/images/earth-thumbnail.jpg",
            'description' => __( 'Home Sweet Home', 'child2011' )
        ),
        'image7' => array (
            'url' => "$child2011/images/eilidh.jpg",
            'thumbnail_url' => "$child2011/images/eilidh-thumbnail.jpg",
            'description' => __( 'Eilidh', 'child2011' )
        ),
        'image8' => array (
            'url' => "$child2011/images/einstein.jpg",
            'thumbnail_url' => "$child2011/images/einstein-thumbnail.jpg",
            'description' => __( 'Albert Einstein', 'child2011' )
        ),
        'image9' => array (
            'url' => "$child2011/images/figureonglass.jpg",
            'thumbnail_url' => "$child2011/images/figureonglass-thumbnail.jpg",
            'description' => __( 'Figure', 'child2011' )
        ),
        'image10' => array (
            'url' => "$child2011/images/flowers.jpg",
            'thumbnail_url' => "$child2011/images/flowers-thumbnail.jpg",
            'description' => __( 'Yellow Flowers', 'child2011' )
        ),
        'image11' => array (
            'url' => "$child2011/images/kites.jpg",
            'thumbnail_url' => "$child2011/images/kites-thumbnail.jpg",
            'description' => __( 'Passing Years', 'child2011' )
        ),
        'image12' => array (
            'url' => "$child2011/images/musicfreak.jpg",
            'thumbnail_url' => "$child2011/images/musicfreak-thumbnail.jpg",
            'description' => __( 'Music', 'child2011' )
        ),
        'image13' => array (
            'url' => "$child2011/images/redrain.jpg",
            'thumbnail_url' => "$child2011/images/redrain-thumbnail.jpg",
            'description' => __( 'Red Raindrops', 'child2011' )
        ),
        'image14' => array (
            'url' => "$child2011/images/unionflag.jpg",
            'thumbnail_url' => "$child2011/images/unionflag-thumbnail.jpg",
            'description' => __( 'Union Flag', 'child2011' )
        ) // the last image does not get a comma
    ));
}
add_action( 'after_setup_theme', 'new_header_images' );
?>

Notes:
(a) The function to add the new header images is called “new_header_images”. You can change this if you want though it’s a reasonable description of what it does. If you do change it, make sure you change the name in line 79 too.

(b) The variable $child2011 in line 4 is just a holder for the path information of your child theme. You can call it anything you want but if you change it make sure you also change it in the image paths from line 8 onwards. If you miss 1 of these you will spot it quickly enough because the relevant image/thumbnail wont appear.

(c) All image/thumbnail code blocks are separated by a comma except the last code block where there is no comma (see comments in the code snippet). This is important.

(d) The code in line 5 defines the default header image to be used if no other header image is set – courtesy of http://www.voodoopress.com

9. That’s it, you have now replaced the default Twenty Eleven theme header images with your own handmade images (including thumbnails). Here’s a snapshot of what my configuration panel looked like when I had finished:

Custom header images and thumbnails added to Twenty eleven WordPress theme



If you’re interested in changing the sizes of the header images there’s a great tutorial over on http://www.voodoopress.com


Check out this post: http://voodoopress.com/customizing-twentyeleven-lets-start-with-width-and-smaller-header/

Add Custom Content to Your RSS Feed

Posted on by

You can add custom content to your RSS feed. The custom content can be anything – text, markup, or even scripts. You can display the content before or after your post content, or in both places if required. A typical example of how this capability could be used is to include the addition of a copyright notice in the feed footer and advertisements before and/or after each feed item. There are lots of possibilities.

1. Add Content After The Feed Entry

To add some custom content to the end of your own feed, add the following code snippet to the functions.php file of your active theme:

<?php
//Add Custom Content to End of Feed
function insertEndContent($content) {
$content = $content . '<p>Place your end of feed custom content here</p>';
return $content;
}
add_filter('the_excerpt_rss', 'insertEndContent');
add_filter('the_content_rss', 'insertEndContent');
?>

Just edit the second line of the function to include the desired code, markup, or text content. This function works by appending the specified custom content to the post content. Then, to ensure that the added content is only included within your feeds, we are using WordPress’ add_filter() function to execute the code only for full and excerpted feed content.

2. Add Content Before The Feed Entry

By changing the code slightly you can insert custom content to appear before your regular feed content:

<?php
//Add Custom Content to Start of Feed
function insertStartContent($content) {
$content = '<p>Place your start of feed custom content here</p>' . $content;
return $content;
}
add_filter('the_excerpt_rss', 'insertStartContent');
add_filter('the_content_rss', 'insertStartContent');
?>

3. Add Custom Content Before and After Feed Entry

You can combine these snippets to include custom content both before and after your feed:

<?php
function insertContent($content) {
$content = '
<p>This content appears before the feed post.</p>' . $content . '
<p>This content appears after the feed post.</p>';
return $content;
}
add_filter('the_excerpt_rss', 'insertContent');
add_filter('the_content_rss', 'insertContent');
?>

NOTE: The code above adds your custom content before and/or after each entry in the feed. You will have to use CSS rules to style the content e.g. to place it on a line of its own above or below the feed entry etc. You can achieve this by using classes in the content markup that you add in.

An Excellent Resource for Independent Artists

Featured

Posted on by

If you’re an independent musician who values your creative freedom and control and who is keen to take a DIY approach to your music and everything connected to it then you could do a lot worse for yourself than visiting the fantastic Bemuso website which can be found at: http://bemuso.com

You will find all sorts of useful information about the music industry, how it works, how you can use it to your advantage and how you can take a DIY approach to safeguarding your creative talents and retaining some control. It’s a hugely tough game to make sustainable progress in even for the most talented. However, one thing that is absolutely beyond doubt is the simple fact that knowledge and preparation will NOT cause you harm. The information in the site will definitely help you understand the industry better.

Go ahead, check it out if you’re an unsigned artist, an independent artist, a promotor, a manager or just an interested individual.

DISCLAIMER: I’m not associated or involved with the site in any shape or form. I’m just a very grateful consumer of the information that has very kindly been made available free of charge on the site and feel it deserves promotion. Consider this a sincere thank you to the site owner.

[ratings]

Custom Page Title

Posted on by

The HTML “title” tag for each page is declared within the HTML “head” tag. The page title is very important for your site. It’s what appears in the title bar of your browser, it’s what gets saved as the default title of bookmarks and it’s used for the title link in search-engine listings.

This is quite limiting because this code is written once, right there in the title tag and is then used for every single page on the entire site. maybe that’s not a problem on a static site but you’re using WordPress which is a living dynamic site with new, possibly, widely varying, content being added regularly. So how do you make a title that’s written once relevant and meaningful for every possible page?

One solution (and there are probably millions more, including plugins) is to use the following small code snippet as the “title” element in your theme “header.php” file. If you’re using a child theme just amend the header file by replacing your start and end title tags with the code below then upload the modified header.php file to your child folder. If you’re not using a child theme then make a note of this customisation somewhere with an good index because the next time your theme is updated you’re going to (a) lose this mod and (b) have to find it again quickly and easily. Really, best to use a child theme!

<title>
<?php if (function_exists('is_tag') && is_tag()) {
single_tag_title('Tag Archive for &quot;'); echo '&quot; - ';
} elseif (is_archive()) {
wp_title(''); echo ' Archive - ';
} elseif (is_search()) {
echo 'Search for &quot;'.wp_specialchars($s).'&quot; - ';
} elseif (!(is_404()) && (is_single()) || (is_page())) {
wp_title(''); echo ' - ';
} elseif (is_404()) {
echo 'Not Found - ';
}
if (is_home()) {
bloginfo('name'); echo ' - '; bloginfo('description');
} else {
bloginfo('name');
}
if ($paged > 1) {
echo ' - page '. $paged;
} ?>
</title>

You can see this code in action on each page and post of this site – just check the browser at the very top on the title bar, you should see “Custom Title|Riotstories”

[ratings]

Add a Custom Image to Your RSS Feed

Posted on by

Apart from any images that your posts or comments might include themselves, the RSS feeds from your WordPress site are flat and bland without any logos or images for branding . An easy way to improve your feed is to add a custom image. Here’s a simple way to do just that:

1. Add the following code to your theme’s functions.php file:

function rss_feedImage() {
echo "<image>
<title>Add Your Title Here</title>
<url>http://yourdomain.tld/images/feed-image.png</url>
<link>http://yourdomain.tld/</link>
<width>Your Image Width</width>
<height>Your Image Height</height>
<description>Your Description</description>
</image>";
}
add_action('rss2_head', 'rss_feedImage');

2. In the code above you replace the parameters between the HTML tags with data that’s relevant for your own site – they are self explanatory. The image name in this example “feed-image.png” is any image you want to include at the beginning of your RSS feed (it doesnt have to be in .png format), the width and height tags refer to this image.

3. That’s it! Save the functions.php file, upload it and check out your new custom-branded RSS feed! (Note: if you’re using a child theme make sure you upload to the child theme directory – just saying!)

You can see this in action on this site here: http://www.riotstories.co.uk/this-site/

[ratings]

How to add a favicon

Posted on by

Ever wondered how you add a favicon to your site? Here’s how (this applies specifically to WordPress because that’s what I’m learning at present but the essentials of each step are the same for a more traditional site where you would have specific pages instead of templates etc).

1. Create your icon

1. For me this is the hardest part because I’m not particularly gifted in the artistic department. Find an image you want to use or make use of an icon file that you already have. If you’re using an existing image in any format other than .ico you will need to find a way of converting it from the graphics format (.gif, .jpeg, .png etc) to the icon format (.ico). My weapon of choice for this (and for icon creation in general is icon sushi though you can use a plugin for Photoshop etc).

NOTE: make sure you’re OK with the copyright on any image you’re using for your favicon – it’s not smart to use copyright material from other people unless you’re given permission. Find non-copyright material or better still, just create something for yourself, give your site a nice personal feel. if you’re doing a branded site (corporate client etc) they should be able to provide logos etc that you can convert into favicon.ico

2. Size your icon to 16 x 16px – quite small but ideal for the address bar in your browser.

3. Save your new icon on your local hard disc with the name “favicon” and ensure that the extension is .ico so you have “favicon.ico”.

2. Upload the icon

4. Now you have your favicon.ico ready it’s time to upload it to your webserver using whatever method you normally use (I use Filezilla).

5. Upload the favicon.ico file into the main folder of the theme you’re using. If you’re using a child theme upload it into the root of your child theme folder.

6. Upload another copy of the favicon.ico file to the root directory of your site (ie. http://yoursite.tld/favicon.ico). Doing this will ensure the favicon is displayed in your RSS feed.

3. Link in the favicon.ico file

7. Nearly there. Using whatever method you normally use to edit your theme files amend the header.php file as follows:

(a) Search for the line of code that begins with:

<link rel="shortcut icon" and ends with /favicon.ico" />.

(b) Overwrite it, if it exists, or add the following code below the “head” HTML tag if the code doesn’t exist:

<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.ico" />

4. Empty Browser Cache

8. Flush out your browser cache and reload your webpage – your favicon should be smiling from up there on the address bar :-)

[ratings]

Add RSS Subscription Icons to the Twenty Eleven Theme

Posted on by

I wanted to add RSS subscription icons to the Twenty Eleven theme I’m playing with at present (using a child theme of course!). These are the steps I went through.

HTML Changes

1. If you haven’t already made changes to the header.php file in your theme copy the original header.php file from the Twenty Eleven theme folder to your child theme folder.
2. Within the header.php folder you need to add new HTML to create the structure that will hold your RSS subscription information. I chose to add 3 new div tags after the end header tag of the standard file as follows:

	</header><!-- #branding --> *** This is the end of the <header> tag in the original file, use it as a marker ***

        <!-- Start RSS Feed holding div- this added by me-->
               <div id="rssfeed">
                   <div id="postsrss">
                      <a href="http://feeds.feedburner.com/yourfeed"><p>RSS Posts:<img src="/wp-content/themes/child2011/images/posts-rss.png" width="24" height="24"></p></a>
                   </div>
                   <div id="commentsrss">
                      <a href="http://feeds.feedburner.com/yourfeed"><p>RSS Comments:<img src="/wp-content/themes/child2011/images/commentsrss.png" width="24" height="24"> </p></a>
                   </div>
               </div>
         <!-- End RSS Feed holding div-->    

<div id="main"> *** This is from the original file, use it as a marker ***

4. In this code the “postrss” div will contain the subscription icon for the posts and the “commentsrss” div will contain the subscription icon for the comments. I enclosed both of these divs in a container div called “rssfeed” (for styling, layout control etc.
5. In the links above I’ve used feedburner addresses, if you don’t use feedburner just substitute your own addresses.
6. This structure could be expanded to include an email subscription with a form in it etc.

CSS Changes

1. Now we have to add CSS rules to the style.css file in the child theme folder to style the 3 divs added above “rssfeed”, “postrss” and “commentsrss”
2. I wanted the subscription icons to be at the right hand side of my page just under the navigation menu so I floated the containing div (“rssfeed”) left and floated the two remaining divs “postrss” and “commentsrss” right.
3. I had to add suitable padding, margins and styling on the tags to achieve the results I wanted and you will have to do the same. Hopefully you can adapt the CSS I used to meet your particular needs. Here’s my CSS:

/*Style RSS feed div*/
#rssfeed {
	float:left;
	width:100%;
	margin:0;
	padding:0;
}
#postsrss {
	float:right;
	padding:0 10px 0 10px;
}
#postsrss p img {
	margin-left:10px !important;
}
#postsrss p {
	margin:0 !important;
	padding:0 !important;
	color:#FB9E3A;
}
#postrss a, #postrss a:focus, #postrss a:active, #postrss a:hover {
	color:#FB9E3A !important;
}
#commentsrss {
	float:right;
	padding:0 10px 0 10px;
	border-right:1px solid #666;
}
#commentsrss p img {
	margin-left:10px !important;
}
#commentsrss p {
	margin:0 !important;
	padding:0 !important;
	color:#0562C5;
}

4. The !important declarations at the end of some of the lines is to ensure that these rules take priority in the cascade (the “C” in CSS).
5. That’s pretty much it. Hopefully it makes sense. It’s still not quite there – for example I want to remove the underline on the RSS links when I hover over them, currently the underline still appears.
6. you can see the results of this on this site at the top.

Hopefully this will be of some use to you if, like me, you want to explicitly add RSS subscription icons to the Twenty eleven theme somewhere of your choosing and not be limited to a widget for the sidebar or footer. get in touch if you have any questions or suggestions on how I can improve this – I’m no expert with either HTML, PHP or CSS and I’m certain some of what I’ve done can be improved especially in the CSS :-)