Free Wordpress Help

Ask me a question at the Wordpress Ninja Forum

Wordpress Theme Customizations - Header Images With Hyperlinks

Posted on August 14, 2008
Filed Under Guides, Wordpress Solutions | 5 Comments

I’ve seen a lot of requests from people wanting to know how to customize the header of the page, usually wanting to know how to add an image in place of the site title text. Furthermore, a common request is how to make the image ‘clickable’ i.e. a built-in hyperlink that returns the user to the main home page of the site when they click on any part of the image? Luckily it is rather easy to do

First thing we need to do is find out the max width we have to play with for our image. Start by editing the style.css file for the theme which is located in /wp-content/themes/<your theme name>/.

Find the section called #container or #page or if you can’t find anything like that then search for “width:” - you are looking for a decent sized page width - should be over 800px (800 pixels) usually. This page width is the max width you can use for you image if you want to keep it uniform to the page width. You may want the image to stretch across the whole page width in some cases, which is fine, though remember not all users have the same resolution, so if you are going to do that then the best tactic may be to use a repeating gradient texture of something that you can stretch to 100% of the page - that’s a different lesson though.

So, now we know the max width, decide on the size you would like your image to be then create your image (based on the width you chose) in your favorite image application. I have found Photoshop is by far the best, but it is pricey….’Gimp’ is an open source image editing program that is also very good - and it is free! Upload the image to your /wp-content/themes/<your theme name>/images/ folder - but remember to have saved your image in the best format. The following are some very handy hints i came up with for dealing with images, particularly header images:

• .jpg files have very good compression - but you need to get the size as low as possible without sacrificing too much quality in the image. This is almost an art form in itself, but remember you must keep the overall page loading time as low as possible so keep your image sizes as low as possible! Also remember .jpg cannot retain transparency (alpha)

• .gif has even better compression and can retain transparency, but sometimes much less quality compared to .jpg - i have also noticed that some browsers (ie6 suffers from this sometimes) don’t blend the edges around a transparent .gif very well, even if others like Mozilla Firefox display perfectly. Don’t forget that you need your theme to look great on as many common browsers as possible. IE6 is still very common.

• .png files retain transparency but are very large in size - use these sparingly and carefully.

• .bmp - forget it - too big

Next we need to remove the title text that Wordpress themes usually have as default, which is taken from the site’s ‘Blog Title’ parameter in the WP-Admin (Settings) console. So in your theme folder (same location as style.css) you will find header.php - edit it in your favorite code editor. Look for this code:

<a href="<?php echo get_settings('home'); ?>">

This is basically a dynamic variable that gets the URL of your home page from your admin config. and displays it as clickable text - a hyperlink back to your homepage. Finding this bit of code shows us which part of the style.css file we need to edit to put our image in. Find the first <div> tag above this code - it will probably look something like this:

<div id="header_left">

or simply

<div id="header">

The name in quotes is the corresponding section name in the style.css file. So search your style.css for that phrase in the quotes (without the quotes obviously ). Using the first example above, the CSS section would look something like this (every theme is different so i can’t tell you exactly what you will have in your theme - but if you are stuck let me know in the forum and i can advise you):

#header {
width: 100%;
background: #000;
text-decoration: none;
height: 100%;
}

Change it to be like this (remember to substitute in your own height in pixels and image filename):

#header {
background: url(images/myimage.jpg) no-repeat;text-decoration: none;
height: 200px;
width: 100%;
}

If later on you find your image width is being cut off for some reason then you may need to edit the width to be your exact image width size e.g. width: 960px;

Now to remove that title text and make the image a clickable hyperlink back to your homepage. Go back to the header.php file which you were working on and modify the <div> section you found above e.g. <div id=”header”> to be like this:

<div id="header" onclick="location.href='http://www.myblog.com';" style="cursor: pointer;">

Of course, my code is just an example - you would have your existing id there instead of “header” and you would change your url to be your homepage. Lastly, delete this old line of code that we found earlier under that <div> section:

<a href="<?php echo get_settings('home'); ?>">

Save your header.php and style.css and upload to your host, overwriting your old files of course. Only do this if you have backups of those files just in case something goes wrong and you need to restore to your old config. Any questions? Feel free to post any questions as responses to this post or in the forum and i will gladly help you out with any issues.

Related Posts:

Image And Paragraph Spacing In Wordpress Posts

Posted on August 13, 2008
Filed Under Wordpress Solutions | Leave a Comment

You may have noticed how some themes don’t look so good when you insert an image into a post and align it somehow e.g. align to the left or right or top or bottom. Many Wordpress themes have no image spacing so the inserted images are tucked right up against the text which just looks ugly and unprofessional. The Prosense theme is a fantastic theme, but unfortunately suffers from this spacing problem as well as other themes i have seen, so i thought this issue deserves a post of it’s own.

Fortunately its an easy fix. Start off by editing your style.css file which is found in your /wp-content/themes/<your theme name>/ folder. Find any references to “img” and/or “.alignleft” or “.alignright”. The only parts you need to be worried about is the alignleft for images and the alignright for images. The biggest problem we have is all themes seem to be different in how they reference the image alignment. Prosense theme for instance has no img.alignleft or img.alignright rather it just has a section for .alignleft and .alignright, so its a little confusing in that sense. Other themes might have img.alignleft etc. So you may end up doing a bit of trial and error to find which section controls your post images, but if you use what i explained here as a good guideline then you should be ok. Im happy to look at anyone’s theme if you still get stuck finding the image alignment sections in the style.css file.

Once you find them, you need to adjust the padding settings i.e. make sure it has a padding setting that will reflect the spacing you want. Remember from my previous post on layouts how to use padding, that we can specify the pixel white space on each side of the imaginary container - in this case the image is the container. It is totally up to you what kind of padding you prefer though i generally go with something like this:

img.alignleft {
padding: 4px 8px 4px 2px;
}

img.alignright {
padding: 4px 2px 4px 8px;
}

NB: Remember the notation order for the padding - Top, right, bottom, left

Paragraph spacing is a slightly different beast, which some themes don’t have built in. The spacing i am referring to here is the vertical whitespace between paragraphs i.e. carriage returns between paragraphs. You can force carriage returns in your posts, though the best and quickest way to get whitespace between paragraphs is via the style.css file. You need to find any reference to the entry text i.e. “.entry”. Here is an example of the kind of code you are looking for:

.entry {
margin-bottom: 10px;
text-align: justify;
}

This code will correctly display whitespace (similar to a carriage return) between paragraphs. The key line which you probably already guessed, is the margin-bottom command. This tells the code to leave 10 pixels between paragraphs, though you could change this to any size you like.

Save the style.css file and upload to your host overwriting the old version. As usual, make sure you already have backups just in case something goes wrong.

That’s all there is to it.

Related Posts:

Wordpress - A Beginners Guide Part 4 - “Admin Settings”

Posted on August 13, 2008
Filed Under Guides | 3 Comments

I was just thinking that it is probably worthwhile to add another part to the beginner series while i think of it, so here it is. This follows on from the Themes and Plugins post and deals with all of the little Admin settings that should be tweaked before you get started blogging. I’ll look at reading/writing settings, permalinks, update services (for social networks) and more.

So let’s get started.

Most of the settings in WP-Admin>Settings are pretty self-explanatory though there are a few things that you should always remember to do as a matter of course. First of all, go to Settings>General tab and check everything looks correct. I find it’s always a good idea to create a new email address first in your hosting cpanel for you blog e.g. admin@myblogname.com then you can add it in this section - this address is what users see when they receive any correspondence from your site, so it is pretty important. The other key thing in this section is the default role of users when they register - it defaults to Subscriber, but be aware that the Subscriber role does not mean a user will get your RSS feeds, only that they will be free to comment without moderation when they are logged in.

Next, go to Settings>Writing - most settings can be left as default, of course just check everything looks ok. The important part of this section is the Update Services text box - this is so you can add ‘automatic update’ service providers to ping various sites whenever your blog produces a new post. Why bother with this? So you can get more traffic. Check out the Wordpress Official Codex for more info.

These links below are supposedly active, so i just copy and paste these into the text box and then save the changes:

http://rpc.pingomatic.com/
http://api.moreover.com/ping
http://api.my.yahoo.com/rss/ping
http://blogsearch.google.com/ping/RPC2
http://ping.bitacoras.com
http://ping.feedburner.com
http://ping.syndic8.com/xmlrpc.php
http://rpc.blogrolling.com/pinger/
http://rpc.icerocket.com:10080/
http://rpc.technorati.com/rpc/ping
http://rpc.weblogs.com/RPC2
http://topicexchange.com/RPC2
http://www.blogdigger.com/RPC2
http://www.blogoole.com/ping/
http://www.popdex.com/addsite.php
http://www.wasalive.com/ping/
http://www.weblogues.com/RPC/
http://blogping.unidatum.com/RPC2/

Next go to Settings>Reading - leave everything as default here unless you want something specific. A cool thing in section is the ‘Front page displays’ part, where you can specifiy a static page you have created rather than the default option of your latest X number of posts. Why would you change this? Maybe you don’t want your posts on the front page, making it more like a non-blog website, showing some fancy graphics or something…?

Now go to Settings>Permalinks and under ‘Common Settings’ select the ‘custom structure’ radio button and enter /%postname%/ into the text field. What this does is makes all your url’s appear pretty, using the post title instead of some nonsense url the search engines won’t like. An example is the url of a post titled ‘Wordpress Rocks’ would appear in the browser and to Search Engines as http://www.wordpressninja.com/wordpress-rocks instead of http://www.wordpressninja.com/?p=123.

This little change can improve your search rankings a lot, so don’t forget to add it to all of your blogs, preferably before you start posting as sometimes old posts can get broken links due to the permalinks being changed and you may have to go back and edit each of the old permalinks manually. After changing this, always go back and check any old posts (if you have any) and pages to make sure they still work and their permalinks appear as pretty urls.

Related Posts:

Wordpress Theme Customizations - Removing The Sidebar Altogether

Posted on August 12, 2008
Filed Under Wordpress Solutions | 2 Comments

Hi everyone, almost forgot to add this important frequently asked question about Wordpress Theme layouts - how do i remove the sidebar altogether so it is just a single-column, no-sidebar theme. Maybe you found a great SEO optimized Wordpress theme but you don’t want a sidebar?

Here’s what we need to do.

First step is to delete the sidebar ‘include’ code from every page that references it. The typical pages are all located in wp-content/themes/<your theme name>/ and are as follows

• index.php
• page.php
• search.php
• archive.php
• single.php

A good way to find out for sure to be guaranteed of the sidebar not popping up somewhere where its not is to do a search in windows through each of those file for the following string

<?php get_sidebar();?>

NB: when doing a standard Windows file search (search string within files), you may need to force windows to include some file types - if you know for a fact that a search string exists within a file but the search does not find it then check out this article.

Upon removing the sidebar code from all files where it appears you will find that there will be no sidebar anymore in your theme but now your site layout will look all wrong because the size of the ‘content’ column will be too small and not centered.

To fix this you need to then go into the style.css file and expand the width of the content container to the full size of the page container, encompassing the blank space that the sidebar used to take up e.g. #container may have width of 960 pixels, but the #content container has width of 460 pixels. Change the #content width to be 960px and check padding and margins don’t blow the size out more than this - see my previous post on layouts for more info on this.

That’s all there is to it, you now have a single-column theme, which consists of a header, main body and footer and no sidebar.

Related Posts:

Wordpress Theme Customizations For Beginners Pt 1 - The Layout

Posted on August 11, 2008
Filed Under Guides | 1 Comment

So while i wait for more questions to come in (c’mon everyone, don’t be shy to ask!), i thought i would embark on a new 3-part guide series on Wordpress Theme Customizations for beginners. I’m going to start with the most important part first - layout. Then i’m going to take an in-depth look at the most important file when it comes to customizations - style.css

So let’s start with the layout of our theme. I’m going to assume you have already selected your preferred Wordpress theme but you want to change some part of the layout, such as changing it from a right-sidebar theme to a left-sidebar theme. This has happened to me before where i have had a right sidebar theme that was perfect in every way except i wanted the sidebar on the left. So we need to get that pesky sidebar to the left, how do we do that?

First, i need to give you a very quick lesson on web page layout in general and the float commands in CSS. It is very important to understand containers and the DIV tag, as something as seemingly simple as swapping the sidebar can really stuff everything up with your site layout. As i have mentioned in a previous post, Wordpress theme layouts are mostly all the same fundamentally, with minor changes in the back end making some big changes in the front end. All Wordpress themes will contain the following - A header, a footer, the content column and at least one sidebar. I have whipped up a little diagram to help illustrate this point about these layout ’sections’ which hopefully makes it easier to understand. I also included the standard Wordpress PHP files that typically correspond to these sections. Everything will always be like this no matter which theme you use, but the thing that will vary is the sidebar. This image shows a standard 2-column, right-sidebar theme. The sidebar is ‘floated’ to the right and is not split into two sections (otherwise that would be a 3-column, right-sidebar theme ).

You can see the sections layed out in a virtual, symbolic way, which i think is easier to understand when visualized like this. So the header is always on top and the footer always on the bottom and the sidebar is on the left, right or both (2-column or 3-column). Some themes elect to have no sidebar at all, which i will cover later - this is referred to as a single-column or no-column theme.

Now that you understand this layout model, the site customizations will be much easier. You will begin by editing the syle.css file - you will find it in /wp-content/themes/<your theme name>/. The first example i will look at is a theme with a right sidebar and how we can swap it to the left side.

Without getting too deep into CSS (Cascading Style Sheets) as you can find info anywhere on the web, i thought i better explain what it is in a nutshell. The PHP files that Wordpress uses contain mostly HTML code with some PHP code, but everything to do with layout, colors, fonts and anything effecting the ’style’ of your site is controlled by references to the style.css file. If you look through your index.php file, for example, you will find ‘tags’ that reference the same sections in the style.css file such as ‘<div id=”content”>’ - this links the style from the style.css file to that particular section enclosed in the tags in the .php file. Still with me?

Ok, so now we know basically how CSS works, we understand that by making changes in the style.css file we can dramatically effect the look and feel of the site sections. So lets come back to our switching sidebar example from right sided to left sided.

Have a browse through your theme’s style.css and try to find the section that relates to the sidebar. Usually it is called ‘#sidebar’ but sometimes you might see ‘#l_sidebar’ and ‘#r_sidebar’ for the left and right halves of a split sidebar respectively. The same principles apply for both though because we need to imagine the sidebar as one whole entity (even if it is logically split into 2 sections). Remember also that CSS is hierarchical, so you might find your ’sidebar’ section contains the sub-sections of ‘l_sidebar’ and ‘r_sidebar’ for example. The headings would appear like this, signifying they are in fact sub-sections of the parent ‘#sidebar’

#sidebar

#sidebar .l_sidebar

#sidebar .r_sidebar

Hint: Make sure you use a good code editor that highlights keywords because it makes life so much easier - everything is nice and easy to read and understand. Dreamweaver is one of the best, but there are some good free ones out there. Check out my beginners tutorial for more info.

When you find the sidebar section in your style.css file, you’ll see that it is ‘floated’ somehow, in this example my sidebar is on the right and under the ‘#sidebar’ heading in my CSS file i see the code

float: right;

This code tells the CSS to put the sidebar on the right side of the page as it builds the layout. Putting it on the left is as simple as changing the code to

float: left;

To complete the floating process we need to do the reverse for the #content section, so i change it from ‘float: left;’ to ‘float: right;’. So now our sidebar is ‘floated’ to the left and our ‘content section is ‘floated’ to the right. All floated means really is that the section ‘gravitates’ that direction. That’s how i like to imagine it

Now, there are some other things we need to be careful of in order to keep the integrity of our layout. Changing the float is the first step but now we need to check the container widths and the padding. Find the section in your style.css called ‘container’, or sometimes ‘page’ - it will typically have a set size for it’s width - if you can’t find anything like ‘container’ or ‘page’ then search for the ‘width’ string - you’re looking for something like this below (the actual number of pixels will differ though) e.g.

width: 960px;

This width setting sets a fixed width for the size of the page in pixels (you can use other measurement units but let’s keep it simple for now), in the example above 960 pixels, which on a standard 17″ monitor at 1280×1024 would leave quite a bit of room on either side of the screen outside the main ‘page’ of the site. The Wordpress Ninja site is a good example of this The reason i am talking about the width is because it’s really important to understand how important it is. The container width is a virtual boundary for the maximum width of your page. If your content section and sidebar together are wider than this total width then you will get really nasty results. If you want your overall width to be wider you can feel free to change this width value, but you must make sure the total of your ‘content’ and ’sidebar’ sections plus any side margins or padding all add up nicely to exactly your total width, not 1 pixel less and not 1 pixel more.

So find the section in style.css called ‘content’ and check out the width setting. Add this width to the width of the ’sidebar’ parent section and you should get the total container width. But wait, hang on, that doesn’t add up? That’s because we need to check padding and margins, which can add to the total size of the width. If you see any ‘padding’ or ‘margin’ code under any of those headings then you need to take them into account. Margins are just that, margins. It can look like

margin: 20px;

which will apply the 20 pixel margin to top, right, bottom, left sides of the parent container. It can also be notated like this

margin: 0px 10px 0px 20px;

this is a shorthand way of writing the margin for the top, right, bottom and left sides (in that specific order), giving a specific size for each. This is when you don’t want uniform sizes all round. You may also see it like this as well

margin-left: 0px

margin-top: 10px

this code assumes 0px margins for the sides not specified. All of this notation also applies to padding. Padding is used to put white space between an edge and an object to push it left, right, up or down. What is the difference between padding and margins? Good question, it can get a bit confusing. The best way i can explain is by saying padding refers to the space inside the imaginary border of a container, where margins are the space outside an imaginary border of a container. I’d recommend investigating this further if you are not sure.

So, back to our example - our container size was 960 pixels, our right sidebar (now on the left) previously had a size of 400 pixels, but had left padding of 10 pixels, taking it’s total size to 410 pixels (add on the padding). Now it is on the left side though, i want to invert that left padding to the right side, so i change the ‘padding-left:10px;’ to be ‘padding-right:10px’.

Next, i find my ‘#content’ width is 550px with no padding or margins set. So my total size adds up nicely to 960 pixels which is my max container size. When i check my site i find everything looks good and the sidebar is inverted nicely.

That’s it for part 1 - phew that was a long post!

Stay tuned for part 2 of this series where i will cover more aspects of the style.css file and how to ‘beautify’ your theme with little graphical additions, borders, spacing around images and header logos and graphics.

Related Posts:

Why Do Wordpress Themes Sometimes Not Display Properly?

Posted on August 7, 2008
Filed Under Themes, Wordpress Solutions | Leave a Comment

This is a strange one, but one i have come across quite a few times, particularly when using the Prosense theme.

Symptoms: The preview of the theme in WP-ADMIN>Design>Themes is blank and when you activate the theme it seems to work but when you visit the site itself there is only text, no graphics or layout or colors.

Solution: I have found this tends to happen when you upload the .zip file to the FTP server then unzip it on the server.  The way to work around this is to unzip the theme file on your pc first then upload the whole (unzipped) folder to your server under /wp-content/themes/

* If you don’t see a correct preview of the theme in the WP-ADMIN>Design>Themes section then it’s likely not going to work properly.

Related Posts:

How To Create A New Section Of ‘Pages’ And Have The Links Populate Automatically

Posted on August 7, 2008
Filed Under Wordpress Solutions | 1 Comment

Ok, so i thought i’d mention this one as i had someone request it before. Basically the example here is for a case where you may want to add a seperate section of Wordpress Pages that does not show up under the ‘Pages’ section in the sidebar (About, Contact us, etc.), but rather a seperate section of pages.

Let’s take a site about Soccer, for example. I have my standard Wordpress Pages such as ‘About’, ‘Contact Me’, ‘Privacy Policy’ etc but i also want another section of Pages under these in the sidebar about my favorite soccer teams. I want to be able to create a Wordpress Page (as opposed to a ‘Post’) about each of my favorite soccer teams and have them appear under a heading of ‘My Favorite Teams’. Here’s what you need to do:

Edit your sidebar.php file and find the part where it references the pages i.e. This line will be contained within a section like this:

<?php wp_list_pages(’title_li=Pages’ ); ?>

Make sure all your pages have already been created, then find out what each page ID is - make a seperate note of these. You can find the page IDs by going into WP-ADMIN>MANAGE>PAGES and hovering over each page - note the ‘post=X’ number at the end of the page’s url at bottom of your browser’s status bar - that ‘X’ number is the page id of the page. So you would make the code look something like this:

<?php wp_list_pages(’include=a,b,c&title_li=Pages’ ); ?>

<?php wp_list_pages(’include=x,y,z&title_li=My Favorite Teams’ ); ?>

What you are essentially doing here is splitting the pages into 2 sections - ‘Pages’ and ‘My Favorite Teams’, telling it explicitly which pages are to be included in each of those sections. So for example if i wanted to include pages 1, 2 and 3 in the ‘Pages’ section my code would be:

<?php wp_list_pages(’include=1,2,3&title_li=Pages’ ); ?>

and then in the ‘My Favorite Teams’ section i can include all the team pages i want, referring to the list of Page IDs i made previously - lets say for example pages with ID’s of 6,9,11,12,15. Here is the code for that.

<?php wp_list_pages(’include=6,9,11,12,15&title_li=My Favorite Teams’ ); ?>

Save the sidebar.php file and upload it to your host server, overwriting the original - of course make sure you have backups just in case.

The only downside to doing this procedure is that you need to manually keep your pages updated.  If you add a new Team Page down the track in the example above then you need to find the page ID and then add it into the code.  So a bit of ongoing housekeeping, but that’s the price to pay for a cool customization

Related Posts:

Wordpress Ninja Forum Goes Live At Last!

Posted on August 5, 2008
Filed Under General | 1 Comment

Good news is the forum is live!

Bad news is i have decided to make it a single register system, which is via the forum logon only. What this means is if you were registered previously on the blog you will need to register again on the forum for once and for all.

Any new users who were not previously registered on the blog can ignore this and just register on the forum.

I have now removed the register/login link from the blog so you must log in via the forums. There really was no need to register with the blog in any case as you are all free to add comments to posts without being registered. Registering on the blog did not even sign people up for RSS feeds, that still needs to be done by the RSS icon at the top right of the page.

You must be registered on the forums to be able to post and reply etc.

The forum will be the new place to post your questions, issues and problems, though of course you can still email me if you prefer some privacy.

You can access the forum here or by clicking at the link at the top of the page. I have also taken the chance to spruce up the site a bit, so it should appear much neater and more user-friendly.

Any questions, feel free to shoot ‘em over

cheers and enjoy!

Paul aka WPninja

Related Posts:

• Recently Written

  • Wordpress Theme Customizations - Header Images With Hyperlinks
  • Image And Paragraph Spacing In Wordpress Posts
  • Wordpress - A Beginners Guide Part 4 - “Admin Settings”
  • Wordpress Theme Customizations - Removing The Sidebar Altogether
  • Wordpress Theme Customizations For Beginners Pt 1 - The Layout
  • Why Do Wordpress Themes Sometimes Not Display Properly?
  • How To Create A New Section Of ‘Pages’ And Have The Links Populate Automatically
  • Wordpress Ninja Forum Goes Live At Last!
  • How To Fix That Nasty Error About Headers Not Sent (yuck)
  • Wordpress Ninja Forum Coming Soon

• Categories

  Wordpress Ninja Forum
  • General
  • Guides
  • Plugin Help
  • RSS
  • Themes
  • Wordpress Solutions

 

• Archives

  • August 2008
  • July 2008
  • June 2008

• Blogroll

  • Documentation
  • Plugins
  • Support Forum
  • WordPress Planet

• Search

About WPNinja

Hi, i am the Wordpress Ninja. My name is Paul and my goal is to be able to answer everyone's Wordpress questions (for free) and post the best solutions on this blog. So for all questions and issues please post in the Wordpress Ninja Forum

and i will respond within 24 hours with a solution.

Most Recent Comments

• Bob:

  A newbie so details are

• Henry Tusco:

  Hi Paul, You have a pretty

• bramster:

  Thanks for the info. I

• WPNinja:

  Jay, you could use a conditional

• Jay:

  great article. how about removing