WordPress Themes Tips and Tricks

I recently found an excellent article, Mastering Your WordPress Theme Hacks and Techniques.

It is a must read for people who wants to learn a lot of tips and tricks.
Enjoy!

This is one of the frequently asked questions in our support forums. I will try to answer this question here so it can benefit everyone.

This question is also worded like the following questions.

1. Tag and Category Views Don’t Show Images
2. Images and archives
3. How do I expand each individual post for the archive

So, what exactly is the problem?

Archive pages like the category view, or monthly view, or a tag view, do not show the full post’s content.
Continue Reading »

Tags: archive.php, content, optional excerpt, SEO, the_content, the_excerpt

I upgraded most of my popular themes to make sure they work with the latest WordPress release 2.3.

but there are people who have customized the theme so much, that they do not want to upgrade their theme with my latest version.
They want to know what exactly I changed for making theme WordPress 2.3 compatible.

The new feature that is added in the WordPress 2.3 system is the Tags functionality.
Once you upgrade your WordPress installation to 2.3, you would see a text box under the ‘Write Post’ area, for adding “tags” to both new and existing posts. This will let you store the tags along with the posts in the database.
Continue Reading »

Tags: Tags, the_tags, WordPress 2.3, wp_tag_cloud

Ever wondered how to define styles for Hyperlinks ?

Well. There are four different selectors for a hyperlink.

You would normally see this at the top of the stylesheet.

a:link {text-decoration:none;color:#ff0000}
a:visited {text-decoration:none;color:#0000ff;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

The first line defines that normal unvisited links will have ‘no underline’, and will look ‘red’ in color.
The second line says when a link is already visited by the user, it should display in ‘blue’ color with ‘no underline’.
The third line says if the user is moving the mouse over this link, show an underline.
The fourth one says to do the same thing as the hover, when the user clicks on it. ‘active’ depicts that fraction of second that the user actually clicks on the link.

In order for these definitions to work as intended in most browsers, they have to be in the same order as we have defined here.

Remember ‘LoVe’ should come before ‘HAte’
This shortcut I found it first on the book ‘Web Standards Solutions’ by Dan Cederholm.

Thats all folks, for now.

Tags: active, css, hover, hyperlink, link, visited

With the latest wordpress, the default theme has feed: attached to the normal feed links that start with http://yourwebsite.com/feed/ .

Most of the users complain that when you click on that, it does not work.

Yes, It wont work till all the browser manufacturers support that.

what is it anyway ?
Have you seen a mailto: added to links to the email addresses? It is for opening a mail compose window on your email program automatically when you click on those links. Browsers understand this keyword mailto and acts accordingly.

Similarly, W3C (World Wide Web Consortium) is suggesting to have feed: to be added to the feed links, so anytime the user clicks on it, the browser can launch the feed reader program(if it is installed on that machine) automatically.

It won’t work as of now, because not all browsers are made to understand this tag.
Till they upgrade, you can safely remove this feed: part from your feed links.

[Reposted from one of my other sites]

Tags: feed:, rss feed link, w3c, xhtml

Lets take a closer look at the font-size property in CSS.

You might have seen this following piece of code in some theme’s style.css file.
#content h2 { font-size:1.4em;}
or this
#content h2 { font-size:14px;}
or this
#content h2 { font-size:10pt;}

What is the difference between all of these ? which one is better ?

In reality, there is nothing like ‘one is better than the other’, but it depends more on the context where it is applied.

‘1em’ means the size of the character ‘M’ for the given font when the browser displays the page at the normal text size.
(Similarly 1ex = size of character ‘X’)

‘1px’ means 1 pixel size. if your monitor’s display is set to 800 by 600 resolution, that means it displays 800 pixels horizontally, and 600 pixels vertically.

‘1pt’ means 1 point size. This is a fixed size across all fonts = 1/72 of an inch. Fixed size fonts might be usable in some cases but not for all.

Q : so what are Relative units for font ?

A : something like ‘em’, ‘ex’, ‘px’ etc

Q : What are Fixed units for font ?

A : something like ‘pt’, ‘in‘, ‘cm‘, ‘mm‘ etc

Q : What is the advantage of having a Relative Size set for a font ?

With every modern browser, you have the capability to change the text size of a given web page you are viewing.
If you are using Firefox, it is available in the toolbar (View > Text Size > Increase ) or in Internet Explorer, it is available in toolbar (View > Text Size > Larger )

If your website’s CSS defines the page element’s font-size in relative units (such as em, ex or px), then the browser will show the page in a bigger font size.
else, the page always shows up with the same sized font, no matter what you change in the browser settings.

So, if you want to have a web page, that is readable by those people with minor visual impairment, you should use relative units for the font size.
If you are a theme author, you make sure, your theme uses them as much as possible, so the sites using your theme are accessible to everyone.

Thats all folks, for now.

Further Reading:
1. W3C’s Tips.
2. CSS2 Syntax

Tags: absolute font size, accessibility, css, font-size, relative font size, w3c

WordPress allows you to create ‘Pages’ within the wordpress blog.
Anytime you want to write something like an about page / a contact page / an article page, you would use this feature.

Most of our themes displays a list of pages as navigational elements at the top. We use the wp_list_pages() method, so any new page you create, will automatically display in that navigation.

I would like to present a few of the most common questions people ask, when they use one of our themes.

1. How to hide certain pages from the navigation ?
2. How to display the pages in a different order ?
3. Why is my child page, is not listed in the navigation ? etc.

Continue Reading »

Tags: exclude, header, hide, include, menu_order, pages, parameters, show, sort_column, wp_list_pages

This is one of the most common customizations that people want to do in their wordpress blog.

They want to hide their site’s title from displaying at their header. It is most probably because their header image already has it as part of the image itself.

Lets take a look at the most common approaches people take, for doing this.

Approach (1) : Delete the blog’s Title through Options Page

People go ahead and login to their wordpress, click on the Options and they look at the text box with the label “Weblog Title”. They just clear the text in that box and click on “Update Options”.
Start from

Click to Zoom!
and make it look like

Click to Zoom!

Wow ! That seems to work., isn’t it ?

Wait a minute, lets take a closer look !
As a result of your change, the following undesirable effects were created.
Continue Reading »

Tags: css, feed:, header, hide title, SEO

[Reposted from one of my other sites]
Lets take a look at one of the most common problems with the wordpress sites.

The sidebar does not stay on the side, and it falls down to be below the content area.

and the thing is, it is not consistently doing so. Sometimes it is just happening in IE and sometimes it happens only on certain posts or only on homepage.

Here are the list of things you can do to fix that.

Step 1. Validate !
This is the most common cause for this issue. Try to validate the page that has this issue, at W3C’s Validator.
Once you fix the issues found by the validator, Refresh the page and see if the problem is gone.
If not, go to step 2.

Step 2. Check your Images Width
The next cause could be, your images are wider than the ‘main content’ div (usually #content in most of the themes).
If it is OK, try to resize the image to fit within the content DIV.
May be, you can give a smaller size image on the page, and the full-size image can be hyperlinked to that small image. This also helps in faster loading of your page.

If the problem persists, go to Step 3.

Step 3. Reduce the size of the ‘Content Area’

You can open up your style.css and look for the ‘width’ definitions for #content and/or #sidebar.
Try to reduce the width by 5px or 10px or 15px or 20px or 25px till you get things right.
(Most Layouts will still look good, after reducing the width by this method.)

Most cases would be solved by now. (If you guys have any other suggestions, please let me know).
Thats all for now, folks !

Tags: css, sidebar, valid code, xhtml

I was not able to sit and complete the book that I am supposed to be writing. I know “it will never be complete”.
If I take 3 months to write this book, then the next version of WordPress will be released and I might have to rewrite the whole thing [or at least some portions of the book] again.

Also, it would be hard to come up with something that covers every aspect of WordPress. I know I am only proficient on the theme development, but have limited knowledge on things like Plugins and the various hooks WordPress exposes.

Also I have never used WordPress MU [Multi User], it might be hard for me to cover that topic too.

Considering all of the above, I would like to say, this book is not going to be published for now.

So I have decided to take a different direction for this website. Please stay tuned and see where we take it off !

Thanks.

Tags: Notes