Shenanigans

Wordpress customization - The manual way

Scribbled on Friday, August 22nd, 2008

It’s the most longest post which I’m trying to write, including everything I did to setup this blog website in Wordpress. It’s still not now complete but within 2 days I will make it more legible and complete it. It was a long desire of mine to share with you what I learned, so please bear with me. If there are any mistakes or error then please tell me.

We have many plugins around to make things automatic in wordpress. But why would anyone need a manual customization ? Some reasons as I may quote down are:

• Sometime plugins may conflict, your site’s design may get screwed or sometime even worse.
• Sometime automatic method fail. Then should you wait for the developer to fix bug ?
• Why use tiny little plugins for everything ? When you can just do it yourself.
• Plugins do cost overhead, which in turn affect the website performance.
• Using same plugins will not add to the uniqueness of your website

These are just some points that exhort me to do my own custom modifications. Yes it takes time for an average bunny, but thats why I’m writing it here to help you. Let me assure you that it ain’t rocket science, just a bit of determination and you can make your website unique and more efficient.

Here is the listing of customizations I will be explaining, these are divided into Design and Code section, design affects the layout and code is related to the data you wan’t to get or display.

Design:

Basic:

1. Add your own custom header
2. Replace your own bullet image style
3. Add a neat hover effect over the hyper-links
4. Adding paginated navigation for longer posts
5. Adding a Favicon

Intermediate:

1. Use of classes and id to provide separate set of effects for Main content and the Sidebar
2. Add a nice border around images
3. Remove border from smilies. Also removing additional padding and margin
4. Adding your custom CSS read on button
5. Image effect on hover without Javascript
6. Image swap without Javascript
7. Round border for Mozilla Firefox 3 browser without using images
8. Creating a nice Feed and Email block with CSS. And for some other enhancements too
9. Providing custom share and bookmark icon block
10. Custom warning or announcement block
11. A nice spoiler block for Firefox, Opera and IE 7 browsers without using Javascript.
12. A nice custom made Quote Block.
13. Modifying Title of posts to include a cool Calendar image which displays date over it
14. Enhancing the Text fields and Text areas for better dynamic impression.

Code + Design:

Basic:

1. Enable comment posting on pages and custom display messages if comments disabled.
2. Displaying Post Meta
3. Displaying custom message at the Main Index Template top
4. Displaying most popular posts
5. Hiding the pages from Header Navigation Bar using simple code edit

Intermediate:

1. Adjusting the position of Search text-field and removing newline between text-field and button
2. Displaying Gravatars
3. Comment boxes customization. Add alternate colors and unique color for the author of the post. Comment numbering
4. Getting 5 recent posts
5. Getting 5 random posts
6. Replacing smilies with your own.

Adding your own custom header:

It’s quite simple. Just search for the this line in style.css and add the bold part with header.jpg uploaded inside images folder in your currently activated theme folder:
CSS:

CSSbreak:

the image address comes under url(), repeat-x says that the image will be repeated in horizontal direction (repeat-y repeats image in vertical direction). Similarly, there is repeat property which will repeat the image in both vertical and horizontal direction.

Some tips:

• you may have to edit height value to appropriate pixels. Like I have 69px.

• width can be set to fixed pixels too. But here I have set it as auto. You can replace it with 600px etc. if your layout is fixed.

Replace your own bullet image style:

Search for this line in your style.css and add or edit the bold part, remember the whole content inside curly braces may be different but in general it will be similar.
CSS:

CSSbreak:

list-style-type: none; suggest that there is no default style for bullets. So there will not be any round dots.

background:transparent url(images/contentbullet.png) no-repeat; transparent means the background color will be transparent, url() contains the url of the image, no-repeat prevent the repition of image (you only want the image to be a bullet and not a sripe of bullets, do you ?).

Some tips:

• Here padding is written in short hand format. Just remember TRouBLe. So first 0 is for padding-top (T), second 0 for padding-right (R), third for padding-bottom (B) and last is for padding-left (L) which is set to 20 px as you would most likely want to have a space between the bullet image and the text.

• Line-height:1.4em; just adds a vertical line distance between each consecutive line. You may nedd it for better visibility or it may be fine without it.

Adding a neat hover effect over hyper-links:

Search for the line which begins with #content a:hover, and just add/edit the bold part as per your need:

CSS:

CSSbreak:

#content is the id for main content(includes the post entries) of your wordpress template.

a:hover is a pseudo class, it is used to manipulate the hyper-link when we hover the mouse cursor over the hyper-link.

color:#FFFFFF; sets the color of hyper-link text to white, #FFFFFF is hexadecimal notation for white color.

text-decoration:none; by default a hyper-link will have underline, so “none” makes it sure that there will be no underline.

background:#00749e; Its the background of the hyper-link text, the bluish-green background in the title of this post.

Some tips:

• you may like add a padding of 2px too i.e. padding:2px 2px 2px 2px; to top, right, bottom and left. This will reserve 2 pixel space in 4 sides for the hyper-link and make a nice conspicuous background without any flickering.

Adding paginated navigation for longer posts :

Its fairly easy to fragment a post in pages. Just add <!–nextpage–> tag in HTML view to the part where you want a page break.

But the CSS styling part has to be done by you, here are the line which I added at the bottom of my style.css to make the pagelink as shown in above pic:

PHP:

single.php

CSS:

It’s fairly easy to understand.

CSSbreak:

pagelink is a class and it encloses the page elements. A class is used to denote a common attribute that is shared between a group of things. Like “cat” class will “purr”. Here “cat” is the class and attribute is “purr”. To denote class in CSS you just add a “.” before it’s name.

Rest are the attributes

border:1px solid #FF9900; border is 1px and solid with color #FF9900

padding:0px 0px 0px 20px; a 20px left padding is provided as you can clearly see in image.

background:#FFF9EA; is the yellowish background you see in image.

font:12px serif; 12px is the size and font-family is serif. I opted a bigger font to make it clearly distinct.

-moz-border-radius:5px; it Mozilla firefox specific property, you will get round border when viewing it in Firefox 3 but on other browsers the edges will be sharp.

border-radius:5px; its the proposed CSS3 addition, it will not work as of now but when CSS3 will be used commonly this property will be useful to have round borders in every other browser. Till now there is a CSS image hack that can be used to have round borders for every browser.

Adding a Favicon

Upload your favicon.png file to the images forlder inside your current active theme folder using either CPanel or ftp ulpoad software. Remember your the heirarchy should be like this “wp-content/themes/current_theme_name/images/favicon.png”

Now the last step is to add the code to your header.php file. Add the followind line to header.php:

HTML+PHP:

PHPbreak:

<?php bloginfo(’template_directory’); ?> will give you the whole path to the theme folder e.g. http://visio159.com/wp-content/themes/silver-light-01

Then just add a /favicon.png to complete it.

Reload your webpage or clear your cache and then reload. See if the icon is working well !

Use of classes and id to provide separate set of effects for content and the Sidebar

Briefing:

As I have explained classes are used to describe an attribute of a the things belonging to a particular class. Like the example of “cats” and “purr”. But where do you apply classes ? Any tag that support it. Mainly DIV tag is used best for applying classes, alternatively you can use SPAN tag too.

e.g.

HTML:

CSS:

Remember in CSS you add a “.” for class

Now you have like multiple occurrences of the this sentence in a webpage and you want to apply a style(decoration) to this sentence. Here classes will come handy. As you if you ever needed to change the style of these sentences later, you only have to edit the CSS file and not each and every occurrence of the sentence.

Now wordpress has already provided classes to many portions of a theme template you use for your website.

e.g. “rsiderbar” class for right sidebar, “content” class for main content

There is one more thing thats more restrictive and unique in a page to identify an element. It’s called “id”, an “id” for a particular element can’t be given to another in the same webpage. Its smiliar to the concept of Identity Card, your ID card can’t be assigned to another person.

e.g.

HTML:

CSS:

Remember an ID is prefixed by “#” in CSS file. And you cant assign the same id to another element in a complete webpage.

So now its time to apply different hyper-link decoration to content and sidebar using the respective ID.

For an example hover the mouse over the title of this post and the links in right sidebar in this blog. You will get an idea of the effects you are about to apply.

We have to edit “rsidebar” and “content” ID in style.css. Search and edit these lines

#content a:hover{color:#FFFFFF;text-decoration:none;background:#00749e; padding:2px 2px 2px 2px;}

#sidebar a:hover{color:#00749e;text-decoration:none;background:#FFFFCC; border: 1px solid #f1f1f1;}

CSSbreak:

here we have used a:hover pseudo class (remember CSS is cascading style sheet, so #content is main then under it comes the a:hover). Its used to decorate hyper-link on mouse hover event.

Rest propety like color, text-decoration and their values like #FFFFFF, none are explained previously. So here it ends.

Add a nice border around images

Can you see the pale-blue border around the part of the image ? yep, isn’t it cool !

Yes, we are about to add this border now ! to every image in your blog.

You have to add these lines to your style.css

CSS:

CSSbreak:

We are traversing from #content to .entry to any img tag inside. Yes, CSS is cascading style sheet for that reason.

border:#a7cfda 1px solid; adds the border of pale-blue color, 1px width and 3 pixel away from image in each direction (remember TRouBLe ?). Writing only padding means what ever value you are assigning to it will be equivalent to assigning incividually to padding-top, padding-right, paddin-bottom and padding-left

padding:3px; is equal to padding-top:3px; padding-right:3px; paddin-bottom:3px; padding-left:3px;

Remove border from smilies. Remove additional padding and margin too

But adding border to all images in posts will bear a side effect of adding border to smilies too

So what could be done ? A simple answer is to use FORCE.

Add these line to your style.css to remove smiley border and that ugly padding + margin which make them look like they were in hope of getting rid of.

CSS:

CSSbreak:

here if you look the source code of any page of yours containing smiley in wordpress. You will see that ther is a class named “wp-smiley” to each IMG tag.

e.g.

<img class=”wp-smiley” src=”http://visio159.com/wp-content/smiley/happy.gif” />

Since we want to refer to the img tags with class wp-smiley we used img.wp-smiley in CSS. Isn’t it simple !

Another thing is adding “!important” rule after every propety:value pair. “!important” is used to override any other rule set for img tag.

Property like border,padding, margin-bottom and their respective values none,0,-7px are obvious to understand.

Some tips:

• If you see that any property: value pair doesn’t reflecting in the webpage then just add !important to it.
• You can only apply negative value to margin and not to padding. Hence I used here -7px for margin-bottom

Adding your custom CSS read on button

Time to roll out custom CSS made button for <!–more–> tag.

The class associated with it is “more-link”. Its now easy to add CSS for this class in style.css.

CSS:

CSSbreak:

If you see the source code of the page in my blog where this Read On button is displayed, you can easily find this similar line:

<a href=”http://visio159.com/two” class=”more-link”>Read on&#8230;</a>

Notice that we have “more-link” class assigned to hyper-link anchor tag “a”. Isn’t it quite similar to what we had in Smiley part ?

So we need to make change the decoration or styling to a CSS button.

a.more-link refers to the all anchor tags (a) having class as “more-link”.

font-variant:small-caps; will provide the uppercase effect for the text.

border:1px outset #f1f1f1; note that we have used outset and not solid this time. Outset will give a button like effect.

Every other property:value; pair is explained well before.

Image effect on hover without Javascript

on hover

If you like to have this nice image hover effect then you have to use pseudo class :hover.

Here is the CSS code for <!–more–> button

CSS:

CSSbreak:

Remember we have the same button from previous example. So you have to delete/edit that CSS code and add this code to achieve this nice effect.

This time we have attached :link, :visited and :hover pseudo classes too.

First CSS rule

There is only one thing added and that padding-right: 18px !important; we have added an empty space to the left of text since on mouse hover there should come an arrow image

Second CSS rule

a.more-link:hover refers to the anchor tags having class as more-link and hover event activated.

I have changed color, border for hover event by supplying new values.

background-image: url(images/readon.png) !important; here we have added the arrow image url.

background-position: center right !important; we have aligned the image to right side at the center.

background-repeat: no-repeat !important; arrow image should not repeat.

Some tips:

• Note the use of !important to override the CSS rules. If some property:value; pair doesn’t work then consider adding !important at the end.
• Remember images folder is located with respect to syle.css file.

Round border for Mozilla Firefox 3 browser without using images

It is fairly easy. Just add this to the class or id enclosing the particular block/element

CSS:

Creating a nice Feed and Email block with CSS. Some other enhancements too

Probably this is the on thing I like most in my blog. The color and everything, its just mesmerizing..lolz

Lets break it down. We have a background image at left, top and bottom border. Text padded away some pixels from left.

Add the HTML to single.php after “wp_link_pages” php tag, you can always experiment out.

HTML:

Now its time to add the styling to the class RSS. Add the CSS to style.css

CSS:

CSSbreak:

Its obvious as explained before. But two parts are rather interesting to learn.

I have used 10px to let the image be 10 pixel away from left and center to be it at center.

I have also added a left padding of 65px (remember TRouBLe ?), so that text will not overlap the image and remain distinct.

Providing custom share and bookmark icon block

CSS rules for this is pretty similar but the code is different and yes it has to be because each post will have its own title and unique pemalink/link.

Add the PHP code in single.php, obviously after the RSS html you wrote in previous example.

PHP:

PHPbreak:

A PHP block starts with <?php tag and ends with ?> tag. Everything inside is is processed by PHP interpretor.

What we are basically doing is getting the encoded url of post permalink in “$share_url” variable and title of post in “$share_title” variable. Then we applied a class “share” using DIV block. Inside that we wrote simple html to submit content to share or bookmark.

Some tips:

• We encoded url using urlencode function because white spaces and special characters can be trouble parsing.

Custom warning or announcement block

When you roll out a different version of your homemade software, you may want to retain the old post where you talked about that old version. Its much better to provide a warning or info in a clever way to the reader that there is new version too rather than providing an obscure link to the new post.

So here we go. First you need to add some CSS in your style.css file:

CSS:

How to use it ?

Whenever want a line to be styled with warning decoration. Then just surround the whole line between DIV tags with class assigned as “warn” in HTML view. Remember if you write the DIV in Visual editor then their will be no effect.

e.g.

<div class=”warn”>Let me give you one little warning !</div>

CSSbreak:

Its quite obvious, you can now try changing some of the values to work out best for your website. I have explained it before in other examples. Kindly take a look at them.

A nice spoiler block for Firefox, Opera and IE 7 browsers without using Javascript.

This is by far the most exciting thing that I ever tried to make with CSS. Yes its like IMDB spoiler tag and once you mouse over it, the actual text or link will be revealed.

So what I did was right in the CSS given below. Add the CSS code to style.css:

CSS:

How to use it ?

Whenever want a line to be styled with warning decoration. Then just surround the whole line between DIV tags with class assigned as “spoiler” in HTML view. Remember if you write the DIV in Visual editor then their will be no effect.

e.g.

<div class=”spoiler”><a href=”http://nowyouspoiled.com”>now you spoiled !</a></div>

CSSbreak:

Here I have given spoiler power to only hyper-links, you can always make similar CSS code to work with plain text too.

First CSS code is used when mouse it not over the element. The only important part here is that I have used background color same as text color. Also provided a background image URL to display spoiler image.

In next part of code when you hover mouse over a particular element, I have let the bluish-green background color the background and removed the background-image property too.

Isn’t it simple !

A nice custom made Quote Block

Here is the CSS code you need to add in your style.css. Obviously add you own URL for image. Don’t suck my bandwidth.

CSS:

CSSbreak:

So why have I applied same rules to blockquote:first-letter and blockquote p:first-letter ? It’s because in some themes for wordpress there is a <p> tag after <blockquote> tag and in some themes there is no <p> after <blockquote> tag. So to be on safer side we have applied rules to both.

What is this :firs-letter pseudo class ? It simply limits the decoration to the first letter. Like you see only “B” and “C” as bluish-green in the image with contrastingly larger font size.

I have added a background image too “blockquote3.png” and aligned it to top-left with no repeat option. I have forces the values by using “!important” too.

A left padding of 18 pixel is added so as to not overlap the “blockquote3.png” image by the following text.

Next set of code just applies font and color to the blockquote in general

Some tips:

• Sometimes we have to use “!important” to override rules previously inherited.
• Remember that :first-letter pseudo class may not work in earlier version of sh!tty Internet Explorer. But thats not your fault. Its the one who made amateurish IE.

Modifying Title of posts to include a cool Calendar image which displays date over it

I was always amused by this nice date display :p But then it didn’t end there, like my nature to learn took me a bit further to explore how can I set up my own. You need to assign class “date” to a DIV surrounding whole date and SPAN surrounding “month”. In short you need to add/edit some code from “single.php” and “index.php” then add CSS to “style.css”

Here is the CSS code you are going to add to your style.css:

CSS:

This is the code which you have to add to single.php and index.php before <h2><a href=”<?php the_permalink() ?>”…:

HTML+PHP:

CSSbreak:

Since I need to float this DIV (assigned class date), I need to set height and width explicitly. I f I don’t do that then everything will be squeezed in. Just try yourself and see.

I have used float:left; its necessary as I want Post Title to be shown beside this tiny calender thing. If I don’t use float left then the Post Title will be pushed down into a new line. Just thing it as if I am sliding elements to the left.

I have give the URL of that calender image too. Set a good padding to the right so that the Post Title don not mash-up with the Calendar.

To provide separate styling to month abbreviation I have slipped in a SPAN tag and used it to style it explicitly.

Lastly I have floated title too to left. Defined the width explicitly and added a left margin of 10 pixel.

Enhancing the Text fields and Text areas for better dynamic impression

Its simple. Just you need is to add a class or id using DIV to any element and then add CSS similar to one given below.

I have used this CSS to style comment textarea and input. Add this CSS to style.css:

CSS:

CSSbreak:

:focus is used to set border dynamically when you click on any text field or textarea to provide a nice effect.

Enable comment posting on pages and custom display messages if comments disabled

Enable comment posting on pages by adding this code in “page.php” after the loop (<?php endwhile; endif; ?>)

PHP:

PHPbreak:

yes that single line at the end enables the comment posting.

But what if you want to disable comment posting on some pages, like “contact me” etc.

Here is the trick, you need to exclude the pages by their page-id in “comments.php”. Check for the line in “comments.php” which starts with <?php if comments_open()) : ?> and change it to the code given below including the page id you want to exclude.. Here I have closed comments for two pages with page id 342 and 340.

PHP:

PHPbreak:

Here I have checked using and operator that page with id 342 and 340 shouldn’t be there. Remember is_page(342) returns true if the page id for the current page matched 342 but I negated it by using adding “!” at the start. So if the current page id matches 342 then it will false (due to negation added) and the if condition will become false as whole, hence there will not be any comments shown.

If you want to display custom message for closed comments, then just edit the text inside <p id=”comments-closed”> </p> at the end of “comments.php”. See the code below.

HTML:

Displaying Post Meta

Post Meta is the information about your post. Meta by definition is data about data. So you like to have your reader know what you were listening at time of writing post and your mood too. Then it is the best possible way to do.

Just add the below given php code to “index.php” to display post meta. A good advice is to add it after the content of each post <?php the_content() ?>

PHP:

How it works? :

Now whenever you create a post just scroll down and see that there is once block which is name cutom fields. Yeah, just start adding your own key (Listening to, Mood etc.) and value (Dreams Come True - S.E.S., umm). Good thing is that once you have created a key, it will available for further posts by a simple dropdown menu on the left side of Key text field.

Express your taste with post meta now !

Display custom message at the Main Index Template top

You want to display a global message or announcement. Just add HTML to “index.php”. If you like it to display on single page too then you may have to add the same HTML to “single.php” too.

Here is the HTML I added to after <?php get_header(); ?> in ‘index.php”;

HTML:

And now add a bit of CSS styling the div element assigned class “headshare” in style.css:

CSS:

CSSbreak:

I have explained this type of CSS styling previously. You can have a look to understand it better from previous examples.

Displaying most popular posts

It’s more like a noob hack than anything. If you have Wordpress Stats plugin installed then just click on the “Top Posts & Pages” link in “Blog Stats” inside “Dashboard”. You will see the top posts and can even arrange them by time interval. Just take a note of first few top posts and write them whereever you want to show most popular posts. I know I haven’t found a good solution to calculate Popular posts by view. So till then this is a poor but working hack…lolz.

For styling it refer to the example further down this post.

Hiding the pages from Header Navigation Bar using simple code edit

I have 2 pages hidden (home doesn’t count as page) from main header and these pages are Contact Me and Share it Now. You don’t need any plugin to hide pages. Indeed  it’s the simplest thing to do. Wordpress itself provide the way to do it.You just need the page id of the pages you want to hide.

Just edit this code in your “header.php”.

PHP:

PHPbreak:

I have supplied the multiple pages page id separated by comma with exclude switch. Isn’t is simple !

Adjust the position of Search text-field and removing newline between text-field and button

Some themes come with this sucky search widget where the textfield and search button are separated by a newline. And sometime you may want to add search box to somewhere else, may be in header.

Here is the HTML to add search box to header in “header.php”

HTML:

HTMLbreak:

I have used aligned it to right of the navigation bar. Then just added the searchform. That’s it

To remove newline, you will have to edit “widgets.php” inside “wp-admin” folder and remove the <br / >statement

HTML:

What should you do ?

Just remove the bold code i.e. <br />

Displaying Gravatars

For this check post on Get a yourself Gravatar

Comment box customization. Add alternate colors and unique color for the author of the post. Comment numbering

Here we have play with variables and condition to set classes to each comment depending upon whether its odd numbered and if it is by author. Once the appropriate comment classes are assigned we will create the CSS for these 2 classes to style them differently for a more better visual treat.

Edit the bold part in your “comments.php”. It must look like the way it is here. You may like to backup your “comments.php” before, so do it in case you screw up somewhere.

PHP:

PHPbreak:

So we are first setting up a $altcom boolean variable to store TRUE value and within foreach loop  we are checking if the value is TRUE (if($altcom) so we set it to FALSE else (else:) we will set it to TRUE.

Next we assign class to the individual comments, “altcomment” class is assigned when value of $altcom is TRUE. If comment is by author (if the user_id of $comment matches with the author_ID of the post) we set the class to “mycomment”. If nothing matches then no class is applied.

Below is the CSS to style to ad into  “style.css”

CSS:

CSSbreak:

If the class assigned to comment is mycomment then color is yellowish-brown and if its altcomment then color is pale-pink.

Some tips:

• If you want to apply a different color to even comments then add/edit the given below code in style.css

CSS:

• Get a thorough understanding of logic and loops in PHP.

Getting 5 recent posts

The simplest PHP code to get recent posts is given below.

PHP+HTML:

PHPbreak:

WP_Query is used to query the database and retrieve posts object in $recent object. The parameters are passed using $query variable. We have supplied showposts=5 to get 5 posts and an offset=5 to start getting posts by skipping 5 recent posts.

HTMLbreak:

Next used a list to show each post title with permalink. That’t it.

Getting 5 random posts

It has been elaborated well in my previous post with three different methods. Please check Display 5 random posts in Wordpress

Replacing smilies with your own

First you have to upload your own smilies in “smilies” folder inside “wp-includes/images/smilies”. Changing the name to similar ones is recommended but if your smiley images extension is different then you have make some more changes to another file.

You have to edit “function.php” inside “wp-includes/”. Just change the extensions in “smilies_init” function to desired one. You can also edit shorcuts.

e.g. here I have changed extension to png

‘:mrgreen:’ => ‘icon_mrgreen.png’,
‘:neutral:’ => ‘icon_neutral.png’,
‘:twisted:’ => ‘icon_twisted.png’,

Epilogue

So this is the end of story. It was a long tedious post. Still some aesthetic modification is left. Will do it within one day. Comments are appreciated and ask for any kind of troubleshooting. But remember am too learning things. Have a good day !

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.