WordPress Theme - Create Your Own in 3 Easy Steps
77Just Another WordPress Theme
When I started looking around for free WordPress themes, I realized two things - 1) There are about a gazillion free WordPress themes, and 2) Most of them look very similar to each other. Sure there are ones with one column, two columns, or three columns, but it was difficult to get excited over any of them. Customization was almost always limited to the header image of the theme, and everything else was set.
Using any one of these WordPress themes will make my blog look like just any other WordPress blog. I wanted to create something different, without having to do a lot of HTML, CSS, PHP, or Javascript coding.
Here are three simple steps to create a unique WordPress theme that is based on compelling visual components rather than just text and columns.
Poser
|
Poser 8
Price: $168.99
List Price: $199.99 |
|
Poser 7 3D Figure Design and Animation (Win/Mac) [OLD VERSION]
Price: $179.99
List Price: $199.99 |
|
How'd You Do That?: Poser Character Creation For Beginners
Price: $18.95
List Price: $18.95 |
|
Poser 7 3D Figure Design and Animation [OLD VERSION]
Price: $199.99
|
1. WordPress Theme Images
The first step to creating a unique WordPress theme is to find the proper images to use. In general, you want to find images that are centered around a consistent idea, or concept. Make sure that the images are both compelling and complement the textual content of your WordPress blog. In addition, make sure that the coloring, mood, and tone set by your images are all consistent.
You can obtain free images and photos from a variety of websites but you may need to alter the images you collect to make them visually consistent.
You can also create your own images. There are a variety of methods to create 2D images including drawing your own designs, taking photographs, and using 3D models.
Rendering images from 3D models can be especially fun, and can produce some high quality images in a fairly short amount of time, even with limited artistic skills. For example, the dragon themed images shown on the screen-shot above are all generated using Poser and Daz 3D models.
The WordPress theme above allows you to place your own images in five key areas - header, footer, upper sidebar, lower sidebar, and the menu items on your sidebar. Try to make your header and upper sidebar images combine well, so that they do not look like the usual boxy column layouts. Make one flow into the other in order to achieve a more organic look. You can do the same for your footer and lower sidebar images.
For example in the screen-shot above, the dragon wings extend from the sidebar image into both the header and footer images. This gives the WordPress theme a more continuous look.
Download Custom Theme
To get started on designing your own image-based blog, first download and save the Shiba WordPress Theme.
Activate this theme by going into your WordPress blog administration panel. Click the Appearance menu on your left sidebar, and pick the Add New Themes option. Once you are in the Install Themes screen, click the Upload menu option at the top of the screen. This will let you download and install the Shiba Theme you just saved.
Once the theme is activated, click on the Appearance menu again and there should now be some new options available including Custom Images, Custom Colors, and Custom Ads. Click on Custom Images and you will be directed into an interface where you can easily upload and change the default images of the theme.
The interface has a simple crop facility that allows you to properly size your images. However, you can get the best results by first constructing the images to size in a separate photo or image manipulation program, and then just loading in the finished product. At any point, you can reload your blog to get a quick view of how your new images look in your blog.
Some tweaking may be necessary to make sure that your images will fit well together and merge organically into your website design.
2. WordPress Theme Colors
The next step in creating your WordPress theme is to set the colors of your textual environment. This step is easy because you can simply borrow your WordPress theme colors from the same color palette as your images.
Sample some of the colors from your images and use that to set up your theme palette. There are five different colors that you can define in your WordPress theme -
- Header text color. This is the color of your blog title.
- Sub-header text color. This is the color of the main headings, and story titles of your blog.
- Body text color. This is the color of the regular text in the body of your blog.
- Link text color. This is the color of links within your blog.
- Background color. This is the color of your blog background.
In general, you want to stick to a color family, for example, blues, greens, purples, or browns. Once you have decided on a color family, consider adding one accent color. It is usually best to pick an opposing accent color. For example, if your theme palette consists of a cool colors (blues or greens) then you want to pick a hot accent color (reds, yellows). The opposite is also true. The accent color will give your WordPress theme some kick, and make it jump out to the eye of your readers.
For example, the dragon WordPress theme shown above is based on a blue color palette. The accent color used is a darker shade of yellow that is assigned to the sub-header text color.
Below is
another example WordPress theme for a dog related blog.
Here, we use an earth tone palette consisting mostly of greens and some browns. However, I also
have a dark-red accent color that I assigned to the sub-header
text.
Be careful not to use too many opposing colors, however, as that will create a busy visual landscape of colors and make your blog difficult to read.
To set the colors for your WordPress theme, click on the Appearance menu, and select the Custom Colors option.
The Custom Colors screen gives you a color selector and a row of buttons for selecting the five different classes of text - body text, header text, sub-header text, link text, and background color. Click on the text class you want to select the color for, then select the color using the color-wheel on the left.
As you select different colors, the text and background colors of the paragraph above will change. This gives you an idea of how your blog text will look like together. Once you are happy with your color choices, click on the Save Changes button at the bottom. This will save your color choices and have them take effect in your blog.
After you have saved your color changes, reload your blog and it should have your newly selected theme palette.
The Restore Original Colors button will restore the original default colors of the blog, i.e. the blue theme with the yellow accent.
The Custom Colors screen also allows you to change the position of your blog title in your header image. Place your blog title where it is most visible based on your chosen background header image and your chosen header text color.
To do this, simply drag and drop your header text in the interface. Once you are satisfied with the results, click on the Save Position button below, and the header text position will get updated on your blog.
3. WordPress Theme and Google AdSense
The final and most important step is to add some Google AdSense advertisements into your theme so that you can monetize your WordPress blog. According to Google, the larger advertisement blocks work best, so this WordPress theme is optimized for the 336x280 ad blocks. It will automatically cluster two ad-blocks together which will help to catch your reader's eye.
To enter your Google Adsense advertisements into your blog, click on the Appearance menu and pick the Custom Ads option. Then simply cut and paste your Google AdSense code into the text-box provided at the top of the screen. Once you have done so, click on the Save Ad button below. This will show an example of your Google Adsense advertisement below. It will also automatically place two Google AdSense blocks at the top of your blog.
Make sure to create the same palette for your Google AdSense advertisements as the WordPress theme palette you just created. This will give your WordPress blog a unified and professional look.
Finally, remember to add a privacy policy statement to your blog pages. This is a requirement of Google AdSense. Failure to add a privacy policy can result in rejection of your Google AdSense account application and may also lead to banning.
You can easily link to a privacy policy page at the bottom of the Custom Ads screen. First, create a privacy policy page in your blog and publish it. Then just enter the URL of your privacy policy page at the bottom of the Custom Ads screen and click on the Save Privacy Policy button below it. This will automatically place a link to your privacy policy page at the bottom of all your blog pages.
This Is It!
You are all done. Enjoy your new image-based web theme and I am sure your readers will enjoy it as well.
If you encounter any errors or have any suggestions, please let me know by leaving a comment below.
Join HubPages and use it to help drive traffic to your blog.
- Easy to Use WordPress Theme
Gotta love WordPress! I have been working on redesigning my blogs the past few weeks and realized that there are very few WordPress themes that provide you with a simple interface for doing basic...
- Comment Box Code
Interested in adding a comment box to your static web pages? I was interested in doing this as well! But I quickly found that there was no easy way to add a comment box to a static web page....
- HubPages – For Fun or For Money
Clearly, HubPages is a business. They want to encourage people to publish hubs that will attract clicks. Impressions are good but clicks bring in their monthly paychecks. However, many people join...
PrintShare it! — Rate it: up down flag this hub
Yay my favorite green friend! I will help you with whatever you need. Just give me a dog cookie :)
This is really awesome. I really am impressed by all the information I get from you, shibashake. I feel like dining for free over hear and feel guilty about it. I'm definitely bookmarking this! Thanks a million.
Very impressive information on theme building—thanks for sharing.
I use blogger and I am quite happy with it. :)
Shiba - my gorgeous I wasn't asking for help (though help is good) I was meaning I'm fick :)
This is another great Hub!
@dohn - Still waiting on that dim sum ;-)
@Nancy - Thanks Nancy.
@quicksand - In that case, I must write some themes for Blogger as well :)
@FD - We can help each other. We can alternate being fick :) It will be fun.
@RCold - Good to see you again :) Btw, welcome to HubPages!
That's wonderful, thank you very much.
Glad you liked it P&O. I had a lot of fun with it, and will be creating more images and themes for it as well :)
Helpful info! I have been wanting to have a custom theme for my two blogs but I did not want to pay to have this done.
Thanks Camping Dan :) Hope you enjoy the theme.
Great stuff, really useful.
Thanks KevCC :) My next projects are to add the ability to save your themes, so that you can easily switch one out for another.
Then I am thinking it will also be fun to allow the attachment of different themes to different tags - e.g. Have all your Halloween articles have a certain theme, all your stained glass articles another theme, sports another theme, etc.
This is turning out to be fun! :)
This is a great hub. It's packed full of information that I NEED to learn. It's book marked for the first available time slot I can work into getting some of this done!
Very well laid out and I'm hoping I can get some of the instructions done correctly. I'm with frogdroppings, I need so much help. I'm hoping this works for me.
Thank you for taking the time to put it together in such a way that I think even I can do it.
Thanks Duchess. Let me know if you run into any problems or have any issues. I am really into WordPress lately, so will be happy to help :)
I should add that WordPress.com limits what you can do on their site, so the above can only be achieved if you are running your own WordPress blog.
Thanks Shiba have bookmarked this!
WordPress in the News
- Web service automates WordPress password crackingThe Register11 hours ago
Malefactors debut Hacking as a Service Hackers have developed a distributed Wordpress admin account cracking scheme that poses a severe risk for the security of blogs whose owners select insecure passwords.… Case Study: WhatsUp keeps Legoland turnstyles ringing
- Mullenweg Speaks Out on Twitter, WordPress and the Question of CompetitionReadWriteWeb27 hours ago
After recent comScore data showed Twitter stats leveling off as WordPress traffic continued to grow, some bloggers framed the results as an either/or proposition; if one platforms wins, the other loses. WordPress founder Matt Mullenweg has weighed in on the subject, stating that the interaction between microblogging and what he's calling "megablogging" is hardly a zero-sum game. "It's not really ...
- 5 handy WordPress security plug-ins, part 2Net Security4 days ago
If you're one among the millions of users of Wordpress, and you really don't have that much knowledge about what's going on under the hood, your best bet to securing your website is to use plug-ins. ...





















frogdropping says:
4 months ago
Shiba - I'm woefully pants with such things. I can't even seem to remember half of what I read, even though I'm taking it in when I'm reading it.
I've even been known to sit with instrutions (and follow them) and still muck wordpress and the like up.
You're fab! I need a little piece of you :)
Happy to see you and hope you are well!!! (And your pooches)