• Beginner's Guide
  • Python is free and easy to learn after reading this tutorial.

Wednesday, 9 January 2013

8 Steps to Improve Wordpress Theme

Last updated on 09:10 - by Ramandeep Singh - Tags : ,

After spending quite enough time in developing WordPress websites, i want to share basic steps to improve your WordPress theme and make design of your websites look professional and elegant. Everyone wants to own a custom designed website or blog but normally designer's fee is too much. Although Wordpress themes provided by theme providers  around the world are really amazing but there is always a room for improvement and customization as per need of your project or blog. So here we go with our customizations :-

#1 Image caption design

Image caption is one of the most ignored part of web design. Even it is really important while you are developing an image rich design, such as image gallery or something like this blog where we roundup collection of art and design from around the world. Using developer's tools in Google Chrome, i found there are two  CSS selectors that effects the styling element of caption images, here is the default WordPress stylesheet for Image captions

.wp-caption .wp-caption-text {
margin-bottom: 0.6em;
padding: 10px 0 5px 40px;
position: relative;
}
.wp-caption .wp-caption-text, .gallery-caption {
color: #666;
font-family: Georgia, serif;
font-size: 12px;
}

Custom font can be used or further background image and CSS3 radius properties.  The style i am using on this website :-

.wp-caption p.wp-caption-text {
font-size: 25px!important;
font-weight: 400;
line-height: 12px;
text-align: center!important;
font-family: 'Tangerine', cursive!important;
}


#2 Make navigation simple, easy and useful

Navigation menu is an important part of any website. It acts as an index to give users what they are looking. Always try to make it minimal and useful as much as you can. Also many people try to view website through their portable devices having smaller screen sizes, navigation menu is the most  important part to optimize as normally people use horizontal menus and on smaller screens, there is a requirement of dropdown menu or stretching the menu. I have already wrote 2 tutorials on navigation menus, first one on CSS3 navigation menu and second on navigation menu using sprites icon. You can also find my interesting guest posts on this topic on making css3 navigation menu and example and principles for designing navigation menu.

#3 Style Preformatted text

Preformatted text styling is also ignored in most of designs, but i think while designing a blog page or even a business website, styling preformatted text is very important. If you want to insert codes as here we use preformatted text tag for codes in tutorials then you should use a monospace font as this font provides a code like feeling also add height property as if you add a big code, this will take too much space and ruin reader's experience. Here is an example that we are using on this website :-

pre {
overflow: auto;
display: block;
color: white;
background: #1D1F21;
padding: 0;
font-family: Menlo, Monaco, monospace;
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
-ms-word-break: normal;
word-break: normal;
word-break: normal;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
position: relative;
height: 300px;
}

But if you are using preformatted text on a general blog, where you want to add quotes, poems or customers' testimonials then you can use calligraphy fonts and even style the div.

.pre {
margin: 40px 0;
max-width: 560px;
min-height: 100px;
padding-top: 20px;
overflow: hidden;
background: #FFF5DF url(http://raman.googlecode.com/files/hint.png) no-repeat scroll left top;
border: 1px solid #CB9B4B;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 10px 10px 5px #d6d6d6;
-webkit-box-shadow: 10px 10px 5px #D6D6D6;
box-shadow: 10px 10px 5px #D6D6D6;
display: block;
overflow: hidden;
padding: 20px 40px 0 70px;
line-height: 20px;
font-size: 14px;
}

Result would be something like this



As i used this style for tip box in posts in one of my project, you can use calligraphy font ( i recommend Tangerine which is available on google fonts ) if you want to use this style for quotes.

#4 Social Media subscription box and icons


Social media is one of the major source of traffic after search engine and most important source for readers' engagement. You can either use social media icons or can make a subscription box. Search for social media icons set from Google , for subscription box i wrote a tutorial for subscription box without any plugin. You can use social media icons in header, footer, sidebar or anywhere else where your design allows you and look really great. You will get result something like this


#5 Make it responsive

Nowadays large of visitors to your website comes from portable devices having small screens, so you need to optimize your website for mobile devices. There are various third-party plugins and services which can make your website responsive within few minutes. Methods i recommend :-

Mobify

 Wordpress Mobile Edition

 I am not recommending WPTouch as it rarely works.

This website is running on Genesis framework and i still to make this website responsive, soon i will update this post with a fix to genesis framework.


#6 Change default search


WordPress is robust CMS but still i find its search system is not up to the mark. You can use Bing or Google API which is considered to be bug free and more robust search system. Most of times this search code is not verified as if they fulfills user requirements, so its better to better technologies like Google and Bing APIs. I would tell you how to add Google Search API as I found a good tutorial for implementing google ajax search.

#7  Customize comments

Although default WordPress comments looks really pretty, but you can make it more pretty by styling comment form and threaded comments. While designing a comment form one should concentrate on ease of commenting while making  spammers' job difficult. Also author's comment should be differentiated from other commentators.

Code to make author's comments stand out, find "bypostauthor" in stylesheet, if you don't find add the following code and edit as per your design and preferences

.bypostauthor {
background: white!important;
border: 1px solid #999;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 3px 3px 7px #999;
-webkit-box-shadow: 3px 3px 7px #green;
-o-box-shadow: 3px 3px 7px #999;
box-shadow: 3px 3px 7px #green;
}

Here is example of editing reply button

.comment-reply-link {
background: #262626;
border-radius: 5px;
color: white;
font-size: 9px;
text-decoration: none;
padding: 4px 8px;
}

#8 Typography

Big reason behind most unsuccessful blog with great content is bad typography. Design must differentiate headings from text body and most important it should be clean and readable. There is a trend of Google Fonts today, they have many beautiful fonts and that too loads quickly. Every font looks great with a particular font-size, font-weight, font-color and when paired with a good font. You should use pairing tool from Google Fonts for better results. It was my person preference to use sans font as body text and serif fonts as headings, but now i recommend to use serif and sans-serif fonts alternatively in font body and headings, Brian Gardner brought this new  approach by using sans font in both headings and body text, further he suggested sans in the headings and serif in the body in his post about Google font combinations.

I wrote a post about High quality free fonts, you shouldn't miss that

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat volutpat nibh nec posuere. A die shopuf pogest concludi cum administrasset slushie intus calidum brioche.
Follow me @ramantoday
Subscribe to this Blog via Email :

0 comments:

Text Widget

Recent News

About Us

© 2014 DesignRapid. Designed by Ramandeep Singh
Powered by Blogger.
back to top