Create a WordPress Theme with NetBeans PHP IDE

I went through the WordPress tutorial for NetBeans 6.5 and it worked like a charm. My blog is also running on WordPress, and I wanted to give it a new theme for a long time. So why not use NetBeans to do this?

Here’s my old blog layout:

In this first of two articles I’ll show you how to create the basic structure for your theme. In the second posting we’ll add the dynamic content. We’ll use a ready made xhtml/css template and adjust the paths, so it can be used in wordpress. To get started, all you need is a index.html + style.css, like you find them here:

http://www.free-css-templates.com/

I’ve used this one:

http://www.free-css-templates.com/preview/spiderCity/

Download the theme and unzip it in your wordpress project’s “Source Files/wp-content/themes” folder. Wordpress will look for a screenshot.png for the theme selection in the admin backend. You can use the one above and add it to the spicerCity folder, your project should look like this:

Now rename index.html to index.php. That’s tricky, because NetBeans won’t let you change the .html extension. You can do it via the filesystem ( or you can create a new php file via New File > PHP > PHP File, name it index.php, copy the content of index.html to it and delete index.html afterwards ).

Time for a first test. Right click the project node and select “Run”. Go to the admin panel ( should be something like http://localhost/wordpress/wp-admin/), login and switch to design > themes. Your new theme will be shown. Activate it by clicking on it:

If you check out the frontend you’ll be disappointed, because style.css is not used. That’s because relative links don’t work here. To make the style.css available you need to replace the link to it in the head section:

<link rel=”stylesheet” type=”text/css” href=”style.css” />

with this:

<link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_url’); ?>” type=”text/css” media=”screen” />

Now run your project again.

That’s better, but the images are still missing. You need to change every reference to the images folder following this scheme:

<img src=”images/image.gif” >

To:

<img src=”<?php bloginfo(’stylesheet_directory’); ?>/images/image.gif” >

Run your project again. This time the images should show up. ( For some weird reason they didn’t show up in my case, since they weren’t copied to the server. It only worked after I deleted all gif files from the images folder, added them again and re-ran the project. ).

Now the style is ok, and we’re done for now. In my next post I’ll show you how to put the different sections of the index.php file in separate files and drop in some more php tags to add dynamic content.