Wordpress Theme Development Info

jetfire97 · 11-17-2009, 08:12 AM

hye Warriors,

I have questions here about wp theme development, I know there are many wp theme designers here.

So the question is, what is the requirement for being a great WP theme designer?

Is it the Xhtml/Css skills?or maybe php skills or maybe both?

and where can I find the best tutorial for the beginner level and then develop my own wordpress theme for sure..

trumpetblast · 11-17-2009, 09:10 AM

This site is a pretty good introduction to WP theme design: Best 10 Web Hosting Sites by WPDesigner.com - Free Wordpress Themes and reviews of Top Web Hosts

Specifically this series of posts: WPDesigner.com So you want to create WordPress themes huh?

But if you really want to be good at it, go to the source and learn directly from the WP Codex: codex.wordpress.org

James Williams · 11-18-2009, 02:28 PM

check this place out webdesignerdepot.com/2009/09/300-resources-to-help-you-become-a-wordpress-expert/" its not mine but a great freekin WP resource over 300 resources.

and you should know css and php little of both to start modifying things

hope this helps

cma01 · 11-18-2009, 09:40 PM

I think you have to be an expert in XHTML/CSS and have a basic understanding of php.

I would just do a mockup in Photoshop of what you want the site to look at, start with a basic Wordpress theme, and then start working on making your theme look just like your mockup. Take each element/feature one at a time, read, research, and work on it until you get it to function the way you want.

johnny.litson · 11-19-2009, 12:23 AM

I second cma01's opinion over this matter. All you need is to be an expert in XHTML/CSS and some basic knowledge of php. A little bit of flash also might come in handy at times.

jetfire97 · 11-20-2009, 07:54 AM

thanks a lot for the replies..that's really help me..

maybe I will be a wp theme developer one day..still learning to understand the wp theme atmosphere..lol..

photoshop skills is not a problem for me, but xhtml/css, that's a problem right now.. still learning and develop my skills..

for now, I am always look for source like Webdsignerdepot,Nettuts,Noupe.com and many more..

p/s:wordpress now 2.8.6 and still updating...will it be 2.9?

James Williams · 11-20-2009, 08:13 AM

yes supposedly the 2.8.6 upgrade took care of a few security issues.. 2.9 is what their focusing on next so should not be anymore updates till 2.9 is done

scarpet1 · 11-23-2009, 08:35 PM

Why don't you learn to develop a site and get traffic to it instead of designing something that you can hire done for $30?

Do you want to make money or what?

Karen Blundell · 11-23-2009, 09:05 PM

the best way to learn is first

learn XHTML and CSS by taking apart free templates and making your own creations...this is not an affiliate link but it is an open source web design community I belong to and you can get hundreds of 100% valid XHTML and CSS templates for free:
GetFreeWebDesigns.com

also the best tutorials for anything is w3schools ..spend time there!

then once you've done that go to
WordPress › Free WordPress Themes
and download some of the free WordPress themes...take them apart ..create your own...learn by doing...you'll learn a little about PHP just by looking at the code...and yes..the WordPress codex is everything WordPress...and everything you need to learn about WordPress is there for the taking for free...

good luck

Kezz · 11-24-2009, 03:35 AM

To make really really great themes you do need to have top design skills, and xhtml & css. You can make regularly functioning themes by copying and pasting the required php lines so you don't have to understand php that well. If you want to give your theme fancy pants functionality, that's when having an understanding of php will help you. To get going though, it's not really a big deal.

The best thing to do is start simple to get an understanding of the framework of themes. What people may not often realize, is that the basics of theme design are in fact very very basic. For example, see below a complete one page theme, that you could use to make a sales page site:

Copy and paste this, save it as index.php

PHP Code:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div class="page">
    <div class="content">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?><?php the_content(); ?><?php endwhile; endif; ?>
    </div>
</div>
<?php wp_footer(); ?>
</body>
</html>

Copy and paste this, save it as style.css

HTML Code:

/*
Theme Name: Simple Theme
*/

html, body {
background:#6d81a4;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0;
padding:0;
}

.page {
border:2px solid #03245d;
width:750px;
background:#FFF;
margin:20px auto;
}

.content {
padding:30px;
min-height:300px;
}

That's it. One whole wordpress theme, suitable for a sales page or minisite. All you need to do is have both those files inside their own folder, in turn placed inside the wp-content/themes/ folder of your wordpress installation

The first key point is that you have this line:

PHP Code:

  <?php if (have_posts()) : while (have_posts()) : the_post(); ?><?php the_content(); ?><?php endwhile; endif; ?>

where you want your content to show up.

In English, all that line means is "If there are posts published; and while we haven't put enough of them on screen; keep loading up the next post; and display it here; until we've put enough of them on screen and we can stop checking things".

And the second key point is that you have this:

HTML Code:

/*
Theme Name: Simple Theme
*/

At the top of a css file named style.css.

You can put any css styling in here, or none at all if you really want, as long as you have those lines at the top so Wordpress knows what your theme is called.

In an absolutely essential sense, that's all you must have in order for things to function.

From there, you can build on that foundation, adding extra styling, sidebars with widgets, post headings and all the other things you see regularly in Wordpress sites.

But what I found whilst learning, is almost every theme out there is way over complicated. Trying to reverse engineer is like trying to untangle spaghetti. Best to start with the absolute basics, and then learn to build in one thing at a time.

Hope all that helps!

11-17-2009, 08:12 AM	#1
jetfire97 Warrior Member Join Date: Nov 2009 Posts: 27 Thanks: 3 Thanked 2 Times in 2 Posts	Wordpress Theme Development Info hye Warriors, I have questions here about wp theme development, I know there are many wp theme designers here. So the question is, what is the requirement for being a great WP theme designer? Is it the Xhtml/Css skills?or maybe php skills or maybe both? and where can I find the best tutorial for the beginner level and then develop my own wordpress theme for sure..
	Truehealthcare-WebTechPage

11-17-2009, 09:10 AM	#2
trumpetblast Warrior Member War Room Member Join Date: Nov 2009 Posts: 26 Thanks: 1 Thanked 4 Times in 4 Posts Contact Info	Re: Wordpress Theme Development Info This site is a pretty good introduction to WP theme design: Best 10 Web Hosting Sites by WPDesigner.com - Free Wordpress Themes and reviews of Top Web Hosts Specifically this series of posts: WPDesigner.com So you want to create WordPress themes huh? But if you really want to be good at it, go to the source and learn directly from the WP Codex: codex.wordpress.org

11-18-2009, 02:28 PM	#3
James Williams James Williams War Room Member Join Date: Nov 2009 Location: Las Vegas, NV Posts: 78 Thanks: 16 Thanked 10 Times in 10 Posts Social Networking Contact Info	Re: Wordpress Theme Development Info check this place out webdesignerdepot.com/2009/09/300-resources-to-help-you-become-a-wordpress-expert/" its not mine but a great freekin WP resource over 300 resources. and you should know css and php little of both to start modifying things hope this helps
	Best Regards, James Culinary Website Design : Cooking Blog :

11-18-2009, 09:40 PM	#4
cma01 Small Business Advocate War Room Member Join Date: Jun 2008 Location: Houston, Texas, USA. Posts: 366 Thanks: 126 Thanked 106 Times in 78 Posts Social Networking Contact Info	Re: Wordpress Theme Development Info I think you have to be an expert in XHTML/CSS and have a basic understanding of php. I would just do a mockup in Photoshop of what you want the site to look at, start with a basic Wordpress theme, and then start working on making your theme look just like your mockup. Take each element/feature one at a time, read, research, and work on it until you get it to function the way you want.

11-19-2009, 12:23 AM	#5
johnny.litson Active Warrior Join Date: Oct 2008 Location: Dundee, United Kingdom Posts: 50 Thanks: 10 Thanked 2 Times in 2 Posts	Re: Wordpress Theme Development Info I second cma01's opinion over this matter. All you need is to be an expert in XHTML/CSS and some basic knowledge of php. A little bit of flash also might come in handy at times.
	Man proposes, Google disposes..!!

11-20-2009, 07:54 AM	#6
jetfire97 Warrior Member Join Date: Nov 2009 Posts: 27 Thanks: 3 Thanked 2 Times in 2 Posts	Re: Wordpress Theme Development Info thanks a lot for the replies..that's really help me.. maybe I will be a wp theme developer one day..still learning to understand the wp theme atmosphere..lol.. photoshop skills is not a problem for me, but xhtml/css, that's a problem right now.. still learning and develop my skills.. for now, I am always look for source like Webdsignerdepot,Nettuts,Noupe.com and many more.. p/s:wordpress now 2.8.6 and still updating...will it be 2.9?
	Truehealthcare-WebTechPage

11-20-2009, 08:13 AM	#7
James Williams James Williams War Room Member Join Date: Nov 2009 Location: Las Vegas, NV Posts: 78 Thanks: 16 Thanked 10 Times in 10 Posts Social Networking Contact Info	Re: Wordpress Theme Development Info yes supposedly the 2.8.6 upgrade took care of a few security issues.. 2.9 is what their focusing on next so should not be anymore updates till 2.9 is done
	Best Regards, James Culinary Website Design : Cooking Blog :

11-23-2009, 08:35 PM	#8
scarpet1 Active Warrior Join Date: Nov 2009 Posts: 33 Thanks: 0 Thanked 0 Times in 0 Posts	Re: Wordpress Theme Development Info Why don't you learn to develop a site and get traffic to it instead of designing something that you can hire done for $30? Do you want to make money or what?
	Quote" The goal of education is to replace an empty mind with an open mind."Malcolm Forbes Straight Talk Wireless

11-23-2009, 09:05 PM	#9
Karen Blundell Senior Warrior Member War Room Member Join Date: Jul 2008 Location: Niagara Region, Canada Posts: 1,113 Thanks: 1,478 Thanked 412 Times in 322 Posts Social Networking Contact Info	Re: Wordpress Theme Development Info the best way to learn is first learn XHTML and CSS by taking apart free templates and making your own creations...this is not an affiliate link but it is an open source web design community I belong to and you can get hundreds of 100% valid XHTML and CSS templates for free: GetFreeWebDesigns.com also the best tutorials for anything is w3schools ..spend time there! then once you've done that go to WordPress › Free WordPress Themes and download some of the free WordPress themes...take them apart ..create your own...learn by doing...you'll learn a little about PHP just by looking at the code...and yes..the WordPress codex is everything WordPress...and everything you need to learn about WordPress is there for the taking for free... good luck
	KarenBlundell.com RaisingtheShire.com ClassicRockLover.com

11-24-2009, 03:35 AM	#10
Kezz Kezz Bracey War Room Member Join Date: Dec 2008 Location: Australia Posts: 1,291 Blog Entries: 5 Thanks: 323 Thanked 599 Times in 291 Posts	Re: Wordpress Theme Development Info To make really really great themes you do need to have top design skills, and xhtml & css. You can make regularly functioning themes by copying and pasting the required php lines so you don't have to understand php that well. If you want to give your theme fancy pants functionality, that's when having an understanding of php will help you. To get going though, it's not really a big deal. The best thing to do is start simple to get an understanding of the framework of themes. What people may not often realize, is that the basics of theme design are in fact very very basic. For example, see below a complete one page theme, that you could use to make a sales page site: Copy and paste this, save it as index.php PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title> <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" /> <?php wp_head(); ?> </head> <body> <div class="page"> <div class="content"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?><?php the_content(); ?><?php endwhile; endif; ?> </div> </div> <?php wp_footer(); ?> </body> </html> Copy and paste this, save it as style.css HTML Code: /* Theme Name: Simple Theme / html, body { background:#6d81a4; font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:0; padding:0; } .page { border:2px solid #03245d; width:750px; background:#FFF; margin:20px auto; } .content { padding:30px; min-height:300px; } That's it. One whole wordpress theme, suitable for a sales page or minisite. All you need to do is have both those files inside their own folder, in turn placed inside the wp-content/themes/ folder of your wordpress installation The first key point is that you have this line: PHP Code: `<?php if (have_posts()) : while (have_posts()) : the_post(); ?><?php the_content(); ?><?php endwhile; endif; ?>` where you want your content to show up. In English, all that line means is "If there are posts published; and while we haven't put enough of them on screen; keep loading up the next post; and display it here; until we've put enough of them on screen and we can stop checking things". And the second key point is that you have this: HTML Code: / Theme Name: Simple Theme */ At the top of a css file named style.css. You can put any css styling in here, or none at all if you really want, as long as you have those lines at the top so Wordpress knows what your theme is called. In an absolutely essential sense, that's all you must have in order for things to function. From there, you can build on that foundation, adding extra styling, sidebars with widgets, post headings and all the other things you see regularly in Wordpress sites. But what I found whilst learning, is almost every theme out there is way over complicated. Trying to reverse engineer is like trying to untangle spaghetti. Best to start with the absolute basics, and then learn to build in one thing at a time. Hope all that helps!
	Get your AAA Starter LOCAL theme FREE with the Website Weaver. Point & Click WordPress Theme Creation - Beginner Friendly, Expert Ready, WYSIWYG Theme Editor. Quickly & Easily Create Any Type Of WordPress Theme. No Experience Required.