Full Version: How Do I Make My Own Wordpress Theme?
nvm, found out. Sorry.
I guess i was explaining all... but when i posted you did not wanted it anymore.
Let me know if everything worked out well.
Let me know if everything worked out well.
You should post all about it anyways MrTouz. 
Jacob.
Jacob.
Creating a basic Wordpress theme with no frills is actually very easy. Simply code up your layout into HTML/CSS, then split it up into header.php, sidebar.php, index.php, and footer.php (rough suggestions, this is the way it is for most themes though.) index.php will need to include header, sidebar and footer (<?php get_header(); ?>, <?php get_footer(); ?>, etc...) and also have the main content area itself in it with something called the loop to initiate content (http://codex.wordpress.org/The_Loop) Then of course there is the template hierarchy, page templates, and a bunch of other more advanced things that you can find out about by skimming the codex.
hope that helps NaRzY.
hope that helps NaRzY.
=> google.com
Well i don't have it anymore, i believe i saved it... when searching around. I don't have it... sucks cuz it was pretty long and explained pretty much everything.
I will start again.
_____________________________
First i would like to start by saying that this is my way of adding a template into wordpress, million other ways exist, some people might find my way horribly long or not good or they just might not liking it. Follow it or not... that's your own decision.
To integrate your layout / template into wordpress you have to 'first' follow some rules, these are my rules... i 'impose' my self to make my wordpress coding experience much much easier.
1) Have a layout that has 1 sidebar (can have 2 3 4 5 if you want, i just prefer 1 so its no headache (have at least one for the sidebar.php)
2) No tables (yes your layout MUST not have tables... i find it hard messy to play with tables and play with header, index, footer... plus you should not code layouts with tables
3) Valid layout. Yes a valid layout is always better (your layouts must always be valid) Now what type ? That's up to you, wordpress is coded xHTML i take all xHTML tags and make it HTML 4.1 strict because i don't like xHTML (that's up to you)
What you need to know
For this 'tutorial' i will be using the theme called CLASSIC as my source, because it is the one that has 'less' tweaking and is pretty basic. You can find the CLASSIC theme inside the /wp-content/themes folder inside your WP download.
To start you should have installed wordpress and have it running good. If you have the WP.zip than open it and get the CLASSIC theme out or download it from your website so we can start modding it.
CLASSIC theme is pretty simple, it has few files we are going to use. To make things easier in your head, the files inside the folder if you had to glue them all together would give you a full template. All these files are is a template / layout but cute into pisses (or peaces ? fuck, my English sucks tonight) we will use PARTS.
These parts we are going to use :
header.php : containes the head of your site (usually from the doctype to your <div id="content"> now you must not always have a content id but it's an other one of my rules to make it easier.
index.php : this is where your actual MAIN content will be, the posts, the pages, the comment links and all the blabla
footer.php : this will hold the footer of your site, from the closing < /div> (the content one) to the closing < /html>
comment.php this is your comments, how they are displayed, their width... it's just tweaking, you don't always need to mod this
sidebar.php this is the side bar i was talking about in one of my rules. you will put it here !
I highlighted the pages with color to help you out distinguishing the different codes that will go 'inside', this is a 'basic' template, pretty much how mine would look like (of course there are no content.. just divs.
<html>
<head>
<title>title</title>
<some css and js integration here>
</head>
<body>
<div id="content">
<div id="header>
<div id="navigation"><a....> <a....></div>
</div>
<div id="mysitecontent">
</div>
<div id="mysitesidbar">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Now see how the colors are matched ? that's how i would of done it, of course you muight not have a header, or a navigation... but you and ONLY you can determine where everything goes ? each layouts are different... if your header is a part of your sidebar than put it there... but be careful with your css...
So how to do it :
Since you are not going to use the CLASSIC layout at all... you need to remove ALL div tags <li>'s and everything else you are not using (i suggest your navigation on the sidebar uses <li>'s which will make the coding easier because by default... the side bar inside WP is coded with li's... you would have to remove to source files and that my friend... is a headache.
Once they are all removed you can start placing your own. This is easy, again, i suggest forgetting about your content right now... your layout should be coded but not have text... it gives you a headache after 5 minutes. So, to make it clear... decide what your header would be and place it inside the header.php and do the same with all other files.
It is basically just replacing old code tags by the new ones, to make my personal life easier i try to make my layout pretty much similar to the CLASSIC layout... but i change it all the time by adding features every once in a while.
Once the replacing is done you can save all. Now i will explain an ISSUE that happens... quite a lot with me... actually... ALL THE FREAKING TIME !
- CSS not working
- IMAGES not displayed
Yes it happens quite a lot because what usually people do when they try to 'integrate' their CSS files they never put a direct url but only :
But what does that do ? that tells that the CSS file is next to the index.php... you did not define any folder or anything else so it assumes it's in the same directory... and you did put the style.css next to the index.php which are both inside the CLASSIC (well... now it should be renamed) folder. But we are forgetting something that WP does. When it opens your theme it puts your index.php at the very beginning of your host. Meaning when we go to your site the theme is not inside /wp-content/themes/classic its at the very beginning but inside the very first folder there are NO style.css (it's inside the /wp-content/themes/classic) so your site is LOST it can NOT find the style.css.
All that meaning that your style.css should NOT be inside the CLASSIC (renamed now) folder but at the beginning of your site.
Now for your images, since your style is not inside the CLASSIC (now renamed !) folder... your images should not be ! the /images (or what ever you call) folder should be next to the style.css.
Now for people not wanting to MOVE the CSS and the IMAGE folder... there is a solution :
And inside your CSS file, when you add a background-image:url(/images/this.png); well put a full URL too !
__________________
I can be more specific with therms, i can go on for more 500 lines if i wanted too... this is basically a 'newbie' thing... if you never done it... than you do it like this. Once you are getting to it... you know things you don't like and things you do.
But really all it is, is replacing the old code... to put your NEW code. Of course if your layout was coded the same as the previous, that is why it has to use no tables, divs only, valid template, one sidebar at least, with a footer.
Hope it helped.
PS : should i post this in the tutorial section ? or is it to lame to be a tutorial ?
Oh and here... just for the heck of it, this is how i did bluw.net
I will start again.
_____________________________
First i would like to start by saying that this is my way of adding a template into wordpress, million other ways exist, some people might find my way horribly long or not good or they just might not liking it. Follow it or not... that's your own decision.
To integrate your layout / template into wordpress you have to 'first' follow some rules, these are my rules... i 'impose' my self to make my wordpress coding experience much much easier.
1) Have a layout that has 1 sidebar (can have 2 3 4 5 if you want, i just prefer 1 so its no headache (have at least one for the sidebar.php)
2) No tables (yes your layout MUST not have tables... i find it hard messy to play with tables and play with header, index, footer... plus you should not code layouts with tables
3) Valid layout. Yes a valid layout is always better (your layouts must always be valid) Now what type ? That's up to you, wordpress is coded xHTML i take all xHTML tags and make it HTML 4.1 strict because i don't like xHTML (that's up to you)
What you need to know
For this 'tutorial' i will be using the theme called CLASSIC as my source, because it is the one that has 'less' tweaking and is pretty basic. You can find the CLASSIC theme inside the /wp-content/themes folder inside your WP download.
To start you should have installed wordpress and have it running good. If you have the WP.zip than open it and get the CLASSIC theme out or download it from your website so we can start modding it.
CLASSIC theme is pretty simple, it has few files we are going to use. To make things easier in your head, the files inside the folder if you had to glue them all together would give you a full template. All these files are is a template / layout but cute into pisses (or peaces ? fuck, my English sucks tonight) we will use PARTS.
These parts we are going to use :
header.php : containes the head of your site (usually from the doctype to your <div id="content"> now you must not always have a content id but it's an other one of my rules to make it easier.
index.php : this is where your actual MAIN content will be, the posts, the pages, the comment links and all the blabla
footer.php : this will hold the footer of your site, from the closing < /div> (the content one) to the closing < /html>
comment.php this is your comments, how they are displayed, their width... it's just tweaking, you don't always need to mod this
sidebar.php this is the side bar i was talking about in one of my rules. you will put it here !
I highlighted the pages with color to help you out distinguishing the different codes that will go 'inside', this is a 'basic' template, pretty much how mine would look like (of course there are no content.. just divs.
<html>
<head>
<title>title</title>
<some css and js integration here>
</head>
<body>
<div id="content">
<div id="header>
<div id="navigation"><a....> <a....></div>
</div>
<div id="mysitecontent">
</div>
<div id="mysitesidbar">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Now see how the colors are matched ? that's how i would of done it, of course you muight not have a header, or a navigation... but you and ONLY you can determine where everything goes ? each layouts are different... if your header is a part of your sidebar than put it there... but be careful with your css...
So how to do it :
Since you are not going to use the CLASSIC layout at all... you need to remove ALL div tags <li>'s and everything else you are not using (i suggest your navigation on the sidebar uses <li>'s which will make the coding easier because by default... the side bar inside WP is coded with li's... you would have to remove to source files and that my friend... is a headache.
Once they are all removed you can start placing your own. This is easy, again, i suggest forgetting about your content right now... your layout should be coded but not have text... it gives you a headache after 5 minutes. So, to make it clear... decide what your header would be and place it inside the header.php and do the same with all other files.
It is basically just replacing old code tags by the new ones, to make my personal life easier i try to make my layout pretty much similar to the CLASSIC layout... but i change it all the time by adding features every once in a while.
Once the replacing is done you can save all. Now i will explain an ISSUE that happens... quite a lot with me... actually... ALL THE FREAKING TIME !
- CSS not working
- IMAGES not displayed
Yes it happens quite a lot because what usually people do when they try to 'integrate' their CSS files they never put a direct url but only :
CODE
<link rel="stylesheet" href="style.css" type="text/css">
But what does that do ? that tells that the CSS file is next to the index.php... you did not define any folder or anything else so it assumes it's in the same directory... and you did put the style.css next to the index.php which are both inside the CLASSIC (well... now it should be renamed) folder. But we are forgetting something that WP does. When it opens your theme it puts your index.php at the very beginning of your host. Meaning when we go to your site the theme is not inside /wp-content/themes/classic its at the very beginning but inside the very first folder there are NO style.css (it's inside the /wp-content/themes/classic) so your site is LOST it can NOT find the style.css.
All that meaning that your style.css should NOT be inside the CLASSIC (renamed now) folder but at the beginning of your site.
Now for your images, since your style is not inside the CLASSIC (now renamed !) folder... your images should not be ! the /images (or what ever you call) folder should be next to the style.css.
Now for people not wanting to MOVE the CSS and the IMAGE folder... there is a solution :
CODE
<link rel="stylesheet" href="http://www.mysite.com/wp-content/themes/myrenamedtheme/style.css" type="text/css">
And inside your CSS file, when you add a background-image:url(/images/this.png); well put a full URL too !
__________________
I can be more specific with therms, i can go on for more 500 lines if i wanted too... this is basically a 'newbie' thing... if you never done it... than you do it like this. Once you are getting to it... you know things you don't like and things you do.
But really all it is, is replacing the old code... to put your NEW code. Of course if your layout was coded the same as the previous, that is why it has to use no tables, divs only, valid template, one sidebar at least, with a footer.
Hope it helped.
PS : should i post this in the tutorial section ? or is it to lame to be a tutorial ?
Oh and here... just for the heck of it, this is how i did bluw.net
Garo, keep it for Shrud. We could use this as a tutorial there. But before you do, I would like to review it fully. I would like to make some changes to this (very few).
Have fun changing it.
If this is going to be considered as a real tutorial than i will write one better. At least... explained better with probably more suggestions and previews.
If this is going to be considered as a real tutorial than i will write one better. At least... explained better with probably more suggestions and previews.
Hello,
Take the help of Google.
It may be provide you best way to Make Wordpress Themes.
Good Luck !!!
Take the help of Google.
It may be provide you best way to Make Wordpress Themes.
Good Luck !!!
Lol there was no need for bumping such an old topic.
Thank you very much for the extensive explanation
So basically the easiest thing is to make a normal css/xhtml website, and then copy/change it into a Wordpress theme bit by bit? It sure sounds easy, but I’ll definately give this a try. I have tons of testlayouts here that I always wanted to see in a Wordpress theme, so I have some work to do
By the way, thanks also for doing this post in English. My German isn’t as good as it used to be
Joram Oudenaarde
This is well done. Thanks
........................................
home based business,home business
mojodawg.com,reseller web hosting
So basically the easiest thing is to make a normal css/xhtml website, and then copy/change it into a Wordpress theme bit by bit? It sure sounds easy, but I’ll definately give this a try. I have tons of testlayouts here that I always wanted to see in a Wordpress theme, so I have some work to do
By the way, thanks also for doing this post in English. My German isn’t as good as it used to be
Joram Oudenaarde
This is well done. Thanks
........................................
home based business,home business
mojodawg.com,reseller web hosting
You will get wordpress themes in google
http://www.sitepoint.com/create-your-own-w...-html-template/ visit here you will get all the information abou it.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.