Free Wordpress Help

Ask me a question at the Wordpress Ninja Forum

Need Professional Help To Create Your Sites? Read This.

Posted on June 8, 2009
Filed Under General | 1 Comment

Hi everyone, WPNinja here

Just found out from my friend Mike at DomainMassDevelopment.com that they have a special promo on until Friday 12th June 09, where you can have 10 domains developed for $500, that’s just $50 per fully developed site.  It’s particularly good if you have many blog ideas in mind and have registered domains already but have not been able to get around to developing them yet.  The promo basically is reducing the cost by 50% for this week only!  They use Wordpress (latest version) and provide you with fully functioning sites and give you a boost where you can then take over an SEO-optimized, professional looking blog, only having to worry about the actual content of your blog.

Of course i understand that some of you may not have the time or skills required to build your sites from scratch, in which case this really is a great deal.  Having seen the end results i can firmly say these guys are highly recommended and have the Wordpress Ninja seal of approval

Note, this deal only applies to new clients.  So head over to DomainMassDevelopment.com and check it out.

Related Posts:

How To Add A Menu Navigation Bar To A Theme That Doesn’t Have One

Posted on March 6, 2009
Filed Under Guides, Themes, Wordpress Solutions | 6 Comments

Ok, so I have had this requested quite a few times now, where someone has found a cool theme such as Prosense but wants to add a Navigation bar.  A typical ‘Navigation’ or ‘Menu’ bar is like a horizontal section under the header that contains hyperlinks of the Wordpress Pages in your blog.  These can be plain text links or tabs or buttons even that change color or effect when you hover over them.

Ok, so how do we add this stuff to our theme?  There’s two things we need to change – the first is in your header.php file and the second is in the style.css file.  In the header.php you need to add the code that will call the navbar from the CSS file – I have added an example here which does just that.  This example also adds an initial ‘Home’ tab as the first tab on the left which is a link back to your blog homepage – it also sets it as the initial ‘selected’ tab or button.  This code should be added where you want the menu bar to appear i.e. if you have your header title graphics and your RSS you would probably want to add the bar under that, so you need to follow your header.php file code to check where to put it.  Typically this would be at the end of the header file before the final </div>.  You may need to experiment though to see where the best location is for this block of code.

<div id="menu">

<ul>

<li class="page_item current_page_item"><a href="<?php bloginfo('url'); ?>/" title="Homepage">Home</a></li>

<?php wp_list_pages('title_li=0&depth=1'); ?>

</ul>

</div><!-- end id:menu -->

Next you need to add the CSS code that is called by the header.php code.  It should be added to your style.css file and slotted in after the header stuff (not critical but keeps it tidy).  Continuing the example above, it would look something like this:

#menu{

height: 1%;

overflow: hidden;

margin-left: 80px;

}

#menu ul{

margin: 0;

padding: 0;

}

#menu ul li{

float: left;

display: inline;

margin: 0;

padding: 0;

}

#menu ul li a{

padding: 8px 20px;

display: block;

text-decoration: none;

}

#menu ul li a:link, #menu1 ul li a:visited{

background: #222 url(images/menu.png) top left repeat-x;

color: #ddd;

border-left: 1px solid #333;

border-top: 1px solid #333;

}

#menu ul li a:hover, #menu1 ul li a:active{

background: #333 url(images/menu.png) 0 -100px repeat-x;

color: #fff;

text-decoration: none;

border-left: 1px solid #099F06;

border-top: 1px solid #099F06;

}

#menu ul li.current_page_item a:link, #menu1 ul li.current_page_item a:visited{

background: #000 url(images/menu_visited.png) top left repeat-x;

color: #fff;

border-left: 1px solid #000;

border-top: 1px solid #000;

}

Of course you can make any modifications to this CSS code to change the effect, borders, colors, style, padding etc.  I recommend trying out this code and seeing how it looks, then you can modify it as required.  I need to note that you can make up a couple of cool buttons images in Photoshop (like i have used in this example - menu.png and menu_visited.png) or you can just use plain colors - determined by the ‘background : #<hex color value>” value above.  You would use funky button images if you wanted to have a gradient or maybe some totally customized image of something.

Dont forget to backup your old files before uploading and overwriting the style.css and header.php files on your server.

I wont go into all of the values and parameters from above just now, but feel free to ask me if you need any help with any of them.  Basically my advice is experiment!

Related Posts:

The ‘Favicon’ - Making Your Blog More Professional

Posted on February 24, 2009
Filed Under Themes | 2 Comments

I’ve noticed quite a lot of blogs that do not have a favicon for their site.  Actually, let me back up for a second….what IS a favicon???

Favicon stands for ‘Favorites icon’ and is a little 16×16 pixel image with extension of .ico that is used to represent your site in a web browser’s bookmarks/favorites menu.  It will also show up in the tab next to your site name in your browser’s currently open tabs.  To use this site as an example, if you look at the browser tab for this site you will see a little Ninja head icon on the left of the site name ‘Wordpress Ninja’.  If you bookmark this page it will use that icon in your list of bookmarks in your browser.

While by no means essential they add a nice touch of class imho.
To use a favicon properly you should first create the icon.  There are several ways of doing it but ill suggest my preferred two methods:

i) create your image in Photoshop or other graphics app.  Resize it to 16×16 and save it as a JPG or GIF file.  Do not include alpha (transparency) yet.  Download and use this program Irfanview which is a brilliant freeware application that will allow you to modify images and also to save out .ico files.  Load your image into Irfanview and choose to save as a .ico file.  In the options for the .ico dialog menu select if you want alpha transparency or not and save it.  Now upload this .ico file to your folder root on your hosting webserver.  This would be under public_html/<mysite> - it’s very important to get the location right or it won’t work.  Test it out by opening your site in a browser.  If it doesn’t work, clear your browser cache then try again.  If you are using IE6 you need to first bookmark the site and clear your cache before it will show up right.  If it still doesn’t work, place the .ico file in your wp-content/themes/<mytheme> root folder.

ii) This method is much easier – go here favicon.cc and create or import your image to be used and export it out when done.  Then upload to your server using the method in the above step (i).

That’s it, not too difficult and helps stamp your brand on your site, maybe sets you apart from other sites that don’t have one or don’t have a very good one

Related Posts:

My Thoughts On Wordpress 2.7

Posted on February 18, 2009
Filed Under General | Leave a Comment

Hi all,

I’ve been using Wordpress 2.7.0 for a while now and must say im really loving it!  If you have not yet updated to it i fully recommend it.  It really is quite brilliant.  The layout/GUI has all changed (for the better imho) and there are some really great enhancements and some bug fixes.  Definately this upgrade should be counted as a ‘major’ update, making plugins easier to install and update, images easier to control and even seems a bit faster - though maybe im imagining it?

So if you haven’t done so already i advise heading over to wordpress.org/download and grabbing it.  As i speak 2.7.1 has been released but it’s pretty much 2.7.0 with some behind the scenes bug fixes…

Furthermore, thought i should mention a particular bug that has been cropping up a lot recently…still occurs in 2.7.x - the dreaded wysiwyg Wordpress editor removing line breaks (regardless of whether you put it in the HTML code or in the text visual editor part).  This was frustrating me no end and i refused to have to hack the code to make it work…not all themes have this problem but some do.

Enter this amazing plugin that solves all the issues - Dean Lee’s awesome WYSIWYG editor - which truly is what you see is what you get, unlike the default editor.  Download it now, highly recommended, even if you dont get any line break issues.  Get it here.

WPNinja

Related Posts:

Wordpress Theme Customizations - Header Images With Hyperlinks

Posted on August 14, 2008
Filed Under Guides, Wordpress Solutions | 30 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.

UPDATE:

Hi all, i have just noticed that in some browsers this may not have the desired effect (Latest firefox for instance seems to not always work correctly)…in which case you can try the following code instead - of course you need to change the ‘dummy’ example bits for your own particular blog (this could be done a bit nicer in CSS but i just whipped this up for speediness sake) :

<div class="Header">
<a href="http://www.myblogurl.com" title="My Blog Title"><img src="http://www.myblogurl.com/wp-content/themes/myblogtheme/images/mylogo.png" style="background-repeat:no-repeat ; background-position:bottom left ; padding-top:15px"></a> </div>

You can adjust the style parameters as required - for example, you can change the background-position to be center, left, right etc and change the padding parameters as well if required to get the image positioned exactly where you want it.  Also, note that the image source path needs to be the FULL path to where your header image resides.

Related Posts:

Image And Paragraph Spacing In Wordpress Posts

Posted on August 13, 2008
Filed Under Wordpress Solutions | 13 Comments

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 | 10 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 | 13 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:

• Save a Ninja

  Please help me keep this website running by donating via Paypal - any proceeds go towards hosting fees :-)




• Recently Written

  • Need Professional Help To Create Your Sites? Read This.
  • How To Add A Menu Navigation Bar To A Theme That Doesn’t Have One
  • The ‘Favicon’ - Making Your Blog More Professional
  • My Thoughts On Wordpress 2.7
  • 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?

• Categories

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

 

Wordpress Ninja recommends:

 

• Archives

  • June 2009
  • March 2009
  • February 2009
  • August 2008
  • July 2008
  • June 2008

• Blogroll

  • Documentation
  • Plugins
  • Setup Web Hosting
  • 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

• Masdin:

  Thank you very much for

• Royston:

  Here's a new live chat

• georg:

  thanks a lot. that was

• Chandrashekhar:

  Thanks a lot. saved my

• Ajithkumar:

  Hi, I tried to edit the