Coding Wordpress simplest way - Part 1

Hi! Thanks for visiting. Here you can find blogging tips and free Wordpress themes. You may want to subscribe to RSS feed.

This is not the regular Wordpress theme coding tutorial on the net. This is the most simplest and easiest way to code a Wordpress theme yourself. Before everything, you should or must download this empty CSS theme first. As every CSS I’ll mention down here is all CSS that I have on that theme and it’s very subjective to other themes.

There are only a few files you’ll need to edit. Well, since it’s the simplest one, so my advice for the real beginners is, use color, don’t use any graphic at first. It’s fine if you don’t have any CSS knowledge, I’ll demonstrate a color only theme if you follow the exact I point here. Now, these are the files you’ll need to edit…

1. style.css

Only 1 file, looking for more? Let’s start!

1, Your blog structure
The width, normally was suggest to be less than 1000px, but it your preference anyway, if you think you’ll have lots of sidebar item, make it bigger. You’ll need to get into style.css only. Look into:

1. body {}
2. #wrap {}
3. #navigation {}
4. #categories {}
5. #header {}
6. #content {}
7. #sidebar {}
8. #footer {}

Too much? Not really, they all gonna have about the same code. So let’s go for body first. What background you wanna have? As here I’ll use a very light blue to represent my background. So write this code in between { and } blankets…

background: #E8EFF5

#wrap represent the whole structure of your blog including header, footer, content, sidebar. The width and alignment is depend on your preference. I’ll go for 800px centralized. Here are the code…

width: 800px;
margin: auto;

So you’re ready for the rest. The structure is here now, it’s getting simple, I’m finishing the whole structure then only go for more detail on part 2. Now, look for #content. Leave a long header, categories and navigation first. This is where you want your content be, left or right, the width of the content (Preferable a common size for your images/videos). I’ll go for 450px on left, oh, a white background too…

float: left;
width: 450px;
background: white;

You need to adjust a bit on the entry content, which is #entry_body {} in the CSS, you can add margin or padding for it now. So, you’ll see the sidebar actually comes up on the right side, that’s the whole purpose, although the listing is not so nice yet. Anyway, let’s get into all the listing (Navigation, categories and sidebar). In order to let the listing looks better, you need to know the padding and margin for each of them. Again, I’ll go for the simplest one, all listing will not have a black dot beside them and they’ll all in a proper way. You need to apply this code on #navigation ul, #categories ul, #sidebar ul.

list-style: none;
margin: 0px;
padding: 0px;

So the layout is cleaner now. Let’s go for the content and sidebar padding, so there’ll have more space. The reason is to give reader some space to breath literally. This applied on #content and #sidebar…

padding: 10px;

Let’s go into the navigation and categories now. In order to let them list horizontally, at the same time, give them some space in between link. You’ll need a few code, look for #navigation li and #categories li…

float: left;
padding: 10px;

Left a header and footer to go before we finish part 1. Bear with me now, don’t give up on learning how to code yourself Header, the height is depend on yourself as well. As for me, I prefer to make it 100px with light grey background so I can put background on some occasion later, here is the code for #header

clear: both;
height: 100px;
background: #EFEFEF;

You’ll notice a strange placement of footer, don’t worry. In order to have the footer stay forever in the bottom and some space to breath, try this on #footer {}…

clear: both;
padding: 20px;
text-align: center;

Well, you have the most simplest and most plain theme. Notice that there are still a lot of code to be write? It will be on part 2, for those who have CSS knowledge I think it’s quite obvious what they style.