Toni Epple works as a consultant for Eppleton (http://www.eppleton.de) in Munich, Germany. In his spare time he's an active member of the Open Source community as a community leader for JavaTools community (http://community.java.net/javatools/), moderator of the XING NetBeans User Group (http://www.xing.com/group-20148.82db20), founder of the NetBeans User Group Munich (http://tinyurl.com/5b8tuu), member of the NetBeans Dream Team (http://wiki.netbeans.org/NBDTCurrentMembers) and blogger (http://www.eppleton.de/blog). Toni is a DZone MVB and is not an employee of DZone and has posted 51 posts at DZone. You can read more from them at their website. View Full User Profile

Create a WordPress Theme with NetBeans PHP IDE

09.16.2008
| 24810 views |
  • submit to reddit

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.

Published at DZone with permission of Toni Epple, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Petr Pisl replied on Wed, 2008/09/17 - 7:12am

It nice to see that the PHP support in NetBeans is used and helpful. Nice article.

Thanks,

Petr

Stas Ustimenko replied on Thu, 2009/03/05 - 2:54am

see aslo very good free PHP IDE - http://www.codelobster.com
with WordPress plug-in available

Parbir Sandhu replied on Sun, 2009/05/24 - 10:12pm

Great article with concise steps. Good work. Look forward to the 2nd part - since thats where the actual magic happens - "Slice-and-dice" .

Also - since we are at the Refcardz site - it would be interesting to see someone pick up the refcardz - php and wordpress and try to explain the above in as concise a manner as you have done above

Matt Coleman replied on Wed, 2012/07/04 - 5:35am in response to: Stas Ustimenko

this is great thanks for sharing codelobster it helped a lot

graphic design buffalo
 

Mateo Gomez replied on Thu, 2012/07/05 - 2:16am

i love that netbeans enables us to create WP mexican salsa recipes

 

Cata Nic replied on Mon, 2013/09/16 - 3:49am

 Wordpress is a a good choice if you want a stable and fast platform for your website, The plugins and its modularity are impressive.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.