A few days ago, I experimented with another wordpress theme, the Dkret3.

This one is good also. It is flexible. It can be set in many ways. You can choose one of its many lay-outs such as the following:

• double-side bar left

• double-side bar right

• single-side bar left

• single-side bar right

• hoverama

• fluidelity

• side bar off

• small-font size

• side bar small

• side bar left and right

The header is also customizable. Plus it has footer. It has built-in insert ads functionalities. Drop down navigation menu. The side bars can be further subdivided.

Dkret3 Theme is easy to customize.

What I customize in Dkret3 Theme are the following:

• I added ads division in the header.

• As usual I changed the font-family and colors

• I changed the drop-down navigation menu color

• I changed the footer color.

How I changed them? Here are the steps…

In the header.php, I added the following codes for the ads division:

Get 1 Million Hits, FREE!
Cheap Linux Dedicated server starts at $37/mo. FREE SETUP!

<div> <!– add by yljien reserve for ads rental start –>
<p align=”center”><a href=”http://jollyworkshosting.com/refer/yljien.php” target=”_blank”><img border=”0px” src=”http://affiliates.jollyworkshosting.com/banners/Banner1-468×60.gif”/></a><a href=”http://jollyworkshosting.com/refer/yljien.php” target=”_blank”><img border=”0px” src=”http://affiliates.jollyworkshosting.com/banners/Banner3-468×60.gif”/></a></p>
</div> <!– add by yljien reserve for ads rental end –>

These codes are added after the blog description codes. The css for the ads are the following:

#ads {
float: left;
display: inline;
margin-top: 8px;
margin-left: 0px;
width:940px; /* or whatever the width should be */
}
/* yljien wants to insert header ads*/

The ads css is added after these following codes:

#blog-description {
font-size: 13px;
padding: 1px 20px 1px;
text-align: left;
}
.access-sep {
display: none;

For the font family, I changed to the font I want.

For the font-colors, I changed those codes starting with # and followed by alpha-numeric to the color codes I want. I refer to the colorpicker of w3schools: http://www.w3schools.com/tags/ref_colorpicker.asp

Generally there are basic templates and files for most themes. And if what we need is not included in the theme package, we install plugins.

How to install plugins?

Inside your admin panel, look for the menu called “Plugins,” then click “Add new.” You’ll be directed in plugins repository, just type in keywords in the search.

Then plugins will be displayed, just read the description of the plugins before you install them. Then click install then click activate. There are plugins that needed to be configured, just follow the plugins’ instructions.

Listed below are the plugins used in this site:

Add to Any: Share/Bookmark/Email Button

This is for sharing and bookmarking posts.

Add to Any: Subscribe Button

This is for subscribing thru RSS and others.

AdSense Integrator

Should you want to integrate or add adsense inside your posts, if not just checked the AdSense Integrator

Akismet

This for block and spam comments.

All in One Adsense and YPN

This is adding your Adsense codes in your sites. This is good to install because a site owner can control where he/she wants to appear the google ads/ypn ads. In this site, I want the ads to appear in middle or center of each articles.

All in One SEO Pack

For the SEO. This is the best. Because we want Search Engines to crawl our sites, install this. Everything about SEO is here. That’s why it is All in One SEO Pack.

All in One Webmaster

For Webmaster tools and more.

Collapsing Categories

Get 1 Million Hits, FREE!
Cheap Linux Dedicated server starts at $37/mo. FREE SETUP!

There’s a ready widget for categories, however, if you want more flexibility for category listing in your sidebar install this.

Dagon Design Sitemap Generator

For me, this is the best Sitemap Generator because of its look and flexibility.

Different Posts Per Page

This is to show how many posts should you want to appear per page. I want this because I can opt to show only 3 posts per page so that my pages will not look lengthy.

Fast and Secure Contact Form

There’s a custom contact form for Padangan. Just that I do not know how to customize it. So I installed this one and I like it. I can control how my contact form will look.

Link to Post

Sometimes we want to show some related articles in our posts, to do this install “Link to Post.”

My Page Order

This is to control the ordering or numbering of my pages. I love this because it is simple and easy to use.

Ozh’ Absolute Comments

About and for easier commenting.

Ozh’ Admin Drop Down Menu

This is to save spaces in my admin panel. I love this. Many installed this too.

Page Links To

Because I want my categories to overflow in pages so I linked each pages to categories. This way my articles are organized and arranged according to categorized pages.

SI CAPTCHA Anti-Spam

This is best installed so to avoid robots to log-in or comment/s.

wp-insert

This made my wish come true. I want my site to have ad spots at the top and bottom post contents and this wp-insert made it happen. What’s more good thing about the “wp-insert” plugin is you can insert many codes and alternatively it will display the ads you want. This is a space saver and adds flexibility to the sites.

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;

Get 1 Million Hits, FREE!
Cheap Linux Dedicated server starts at $37/mo. FREE SETUP!

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.

This post pertains to the steps and processes I went through in building this site, the Here Anything Goes. Please note, this is not a tutorial on how-to build a site by doing some coding in the html, css and javascripts. As the saying goes, do not reinvent the wheel. There are those who already did, tested the waters and become successful ones. Just copy the successfuls–they are our models.

Now, here are the steps and processes I did…

1. Blog Site or Web Site Name

Think of your own dot com, dot net, dot org, dot info website. I thought of galaxy but it was already taken so I thought of changing the way it spelled. So, my dot com site is galaksee.com. You’ll notice my url is http://hereanythinggoes.galaksee.com, this is because I want to make a mock site first so I thought of creating a subdomain from my original domain name. And, I did a lot of customization so I decide to retain it as is. I’ll just use http://galaksee.com for other purpose.

2. Register site name as a domain name

Look for domain name registrar or a company that offers domain name registration. Maybe, look for a web host which offers free domain name, however, be careful when you tie-up your domain name with a web host. Ensure that they are credible and can be trusted. Possibilities are a web hosting company may take advantage of your domain name and may not transfer to you if you stop engaging their hosting services.

3. Engage to a web hosting company

Since I reside here in the Philippines, I looked for a web hosting which is located here. In short, I engaged the web hosting services of Jolly Works Hosting. Please note, before I contacted them, I visited some sites which they serviced and I heard positive feedback so I engaged their services. My advice is scout first and observe the sites hosted by your prospect web host.

Plus, they offer a free domain name and they can host unlimited domains. Also, they offer money back guarantee.

4. Study and learn how to navigate the cpanel of chosen web hosting

Normally, there’s a tutorial inside the cpanel/web hosting account and this is the so-called “get started” tutorial. Just read on.

5. Upload and install wordpress 2.8.6 in cpanel/web host.

Get 1 Million Hits, FREE!
Cheap Linux Dedicated server starts at $37/mo. FREE SETUP!

In my case, I used the fantastico deluxe in installing wordpress 2.8.6. This is one of the features of my web host.

For those who do not have fantastico, follow the instructions provided in the codex of wordpress.org

6. Create database for the web site inside cpanel/web host

There is accompanying instruction on how to do these inside the cpanel/web host.

7. Install FileZilla and/or activate webdisk.

These are for transferring files from own computer to web host server.

8. Log in to wordpress site and choose theme.

I chose several themes but sticked to Padangan theme. Please note, there’ are already installed themes when you log-in to your wordpress site, the default and classic themes.

To choose a theme, inside the control panel of wordpress site, there’s a portion for “appearance.” In there, click the “add a theme.” Then, browse themes, choose, install and activate the chosen theme.

9. Customize theme.

Here, you can customize the look of your site. Originally, Padangan theme is colored blue and orange, however, I change them to blue and red.

Then, you can add and install plugins for easy navigation and for dressing up the sidebars and footers of the site.

Next time, I’ll write an article on how I customized the Padangan theme and the plugins that I installed here in my HAG site…this is where the html, css, javascript and php come in.

Yipee! It is done! It is finished. It is built.

After several days of building my HAG site, finally, IT IS DONE.

Many many thanks for those how-to tutorial blogs.

Many to mention, will just mention a few…

Get 1 Million Hits, FREE!
Cheap Linux Dedicated server starts at $37/mo. FREE SETUP!

http://www.w3schools.com/

http://net.tutsplus.com/

My next step from hereon is to build my other site, the “I Empower Myself” or “I-E-M.”

And, dear visitors and readers, thank you for dropping by and please come again.

I am not a programmer nor do know more about computers. Building a website is a bit challenging to me. Yes, it is easy to hire someone to help me build and customize my site for me. However, I want to learn.

As an update to building my site, after I chose the theme I want, I did some css styling like changing the size and colors of the fonts and borders. Themes in the wordpress selection are normally completed and are ready for use. Just that I did some customization. Wow! This is fun. This is making me learn css, html, javascripts and php.

Get 1 Million Hits, FREE!
Cheap Linux Dedicated server starts at $37/mo. FREE SETUP!

What’s more fun are the plugins. I love the plugins. They are saving me time. Instead of doing some php, css, html and looping, I search for the plugins that will suit for my needs.

I am thanking that there are wp-insert and google adsense plugins. They solve my problems as to how will I display google ads and campaigns in here in my site.

Now that my HAG site is almost done, my next steps are draft posts and schedule them in some future time plus add more widgets and badges.

Several weeks ago, I was contemplating having my own (dot)com sites.

So I read blogs about how-to tutorials on having, owning and building a web or blog site. This is what made me busy these past few weeks. After reading the tutorials, I looked for and engaged to a web hosting company.

I have several sites in mind. Initially, before working on my sites, I thought of experimenting and practicing for a model site. And, I thought of naming and building my first self-hosted wordpress site as Here Anything Goes or HAG for short.

Get 1 Million Hits, FREE!
Cheap Linux Dedicated server starts at $37/mo. FREE SETUP!

When I engaged to web hosting, they said I have a free domain name if I paid for a yearly plan. Naturally, being the frugal that I am, I opted to pay the annual fee. The registered domain name is galaksee.com (I’m thinking of galaxy but it was already taken so change the spelling to galaksee)

Then, I created a subdomain under galaksee.com, the hereanythinggoes.galaksee.com. This will going to be my personal site. The galaksee.com will be used in another purpose (will tackle on this in another article).

For my HAG site, I will use this to express my journals/musings, family and living, and my opinion on others things plus anything that comes to my mind.

I am happy that my HAG site is almost done. Meantime, I’ll add more widgets and content write ups.

Today, I am continuing building this site. Yesterday, I shifted to Padangan theme of WordPress.

I like this theme. This is what I am looking for. Two right side bars and footer. One slim and one wide side bar.

Today, I am continuing befriending wordpress.  Last week,  I subscribed for a web hosting plan. Since then, inaalam ko kung pano gamitin tong self-hosted wordpress.

Katuwa, nakalimang palit na ko ng wordpress theme.  I wish matapos ko na pagbuild ng site na to.  This one is not just a blog site but a web site with blog posts in different pages.