Over a million developers have joined DZone.

Create a WordPress Theme with NetBeans PHP IDE

· Java Zone

Easily build powerful user management, authentication, and authorization into your web and mobile applications. Download this Forrester report on the new landscape of Customer Identity and Access Management, brought to you in partnership with Stormpath.

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.

The Java Zone is brought to you by Stormpath—a complete, pre-built User Management API. Want to learn how to use JWTs to protect microservices from CSRF and more? Check out this on-demand webinar with our Java Developer Evangelist, Micah Silverman.

Topics:

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}