This article explains the how-to of customizing WordPress “Padangan” Theme.
In here, are lessons about dissecting a wordpress theme and customizing it. This is where the html, css, javascript and php coding come in.
I’m glad that I have this drive to learn new things. While building this “HAG” site I learned some html, css, javascript and php coding. It was fun doing it.
Let’s begin the tutorials…
Step 1. Install and activate the Padangan Theme
Inside the control or admin panel of your wordpress, there’s a menu called “Appearance.” In the Appearance, clicked the add a theme, then search for Padangan Theme, then click the “install” and “activate.”
Note that you can select any theme you want, however, in this tutorial I’ll just focus on dissecting and customizing Padangan. Before selecting for a theme, make a lay-out and structure of your website in a piece of paper then look for a theme which is a close resemblance of your layout and design. Better preview the theme first then intall and activate.
Step 2. View and browse the theme
Do this by clicking the “visit site” in your admin area. Why are we doing it? Because we want to know which part of Padangan we want to delete, replace or enhance.
Originally, Padangan is colored blue and orange. In the header, there’s a search area. It has built-in font-family and sizes. And, it has some widget ready to be installed.
In this HAG site, what I customized was the header, the orange-color borders and fonts, the font-family and sizes, search form moved to the wide sidebar and installed some useful plugins.
Step 3 Dissect and customize the part one-by-one
The Header
a. How I want my website header to look like?
I want the title to be in an “Apple Boy BTN” font and the description to be in an “Informal Roman” font, I want everything in the header to be in the shade of blue color. I also want to have an ad spot in it.
b. Customization process
b.1 Removing/deleting the search and replacing it with ad spot
b.1.1 In the editor menu of “Appearance,” open the header.php
Look for this codes…
<div class=”search”>
<?php include (TEMPLATEPATH . ‘/searchform.php’); ?>
</div>
Delete them then replace it with this codes…
<div class=”ads”>
<a href=”http://jollyworkshosting.com/refer/yljien.php” target=”_blank”><img border=”0px” src=”http://affiliates.jollyworkshosting.com/banners/Banner1-468×60.gif”/></a><br/>
</div>
Note that the codes in the red font is my ad spot codes so replace it with your own.
Click update file button.
b1.2 Style the ad spot by opening the style.css of the editor
Before or above this codes…
#headr .search {
Insert and copy-paste the ff. codes…
#headr .ads {
position: absolute;
top: 20px;
right: 0;
}
#cari-padangan {
position: relative;
height: 65px;
}
#cari-padangan #s {
border: 2px solid #93D1DD;
padding: 5px;
margin-bottom: 8px;
width: 470px;
}
Click update file button.
The Search Form
Since I removed the the search form in the header and replaced it with an ad spot, I would like to place it somewhere in the wide sidebar.
In the widgets, there’s an available search form, just drag and drop the search form where you want to place it. In this site, I drag and drop it in the wide sidebar.
The border and font colors
I want to change the border and font colors.
Colors are easy to spot in the css stylesheet. I just looked for those codes starting with a # sign and followed by alpha-numeric characters. Example of this code is #99FFEB. Just play around which color you like for the fonts and borders. Highlight the code and replace it with the code of the color you want–to replace is to use control+v or just hardcode it. I always refer to colorpicker of W3schools : http://www.w3schools.com/tags/ref_colorpicker.asp. Then always click on the update file to save changes.
The font family and sizes
The font-family is the font styles. For my site title I want it in “Apple Boy BTN” font, the description to be in an “Informal Roman” font and the content fonts in “TW Cen MT.”
Originally, Padangan’s fonts will just follow what’s in the global style.css. Below (those in red font) are the changes I made in the css.
#headr h1 a {
color: #00008F;
font-size: 45px;
font-family: Apple Boy BTN;
margin: 0px 0px 20px 0px;
padding: 0;
}
#headr .description {
color:#0000FF;
font-size: 16px;
font-family: Informal Roman;
margin: 18px 0px 0px 0px;
}
For the content fonts in “TW Cen MT,” look for the following codes in the upper part of css then replace the font style with what you want. In my case, I want it TW Cen MT. Refer to your MS Word for Font-Styles.
h1, h2, h3, h4, h5, h6
{
font-family: Tw Cen MT, Arial, Sans-Serif;
}
For the font sizes, look for those codes with em or px then change the number or size of the font. Example, when you see a code like 1.2em you may change it to 22px. “em is 16px.” For me it’s more easier to use the px than the em size formatting because I do not need to compute for the em and px is more direct. Again, click the update file button to save changes.
That’s it! Steps and processes are seemingly simple but it took me hours and days to finish the designing and styling. Maybe because this is my first time doing these tasks. Maybe next time with my next site/s, it may take me just a few hours for styling the way how my sites will look like.
My next step for this HAG site is to choose and install plugins. Watch out for my articles on “How To install plugins and the plugins I used for this HAG site.”
Bye for now and please come again.
