CreateWordpressThemeWithNetBeansPartOne

Revision as of 15:16, 6 November 2009 by Admin (Talk | contribs)
(diff) ← Older revision | Current revision (diff) | Newer revision → (diff)

Part One

Contributed By; Anton Epple



[[{TableOfContentsTitle=TableOfContents} | {TableOfContents title='Table of Contents'}]]

Brief Overview


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;

http://eppleton.sharedhost.de/blog/wp-content/uploads/2008/09/old_theme1.jpg

Getting Started


In this first of two blog entries, 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://eppleton.sharedhost.de/blog/wp-content/uploads/2008/09/screenshot.png

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

Steps to Reproduce


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;

http://eppleton.sharedhost.de/blog/wp-content/uploads/2008/09/structure1.jpg

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;

http://eppleton.sharedhost.de/blog/wp-content/uploads/2008/09/spidercitytheme.jpg

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.

http://eppleton.sharedhost.de/blog/wp-content/uploads/2008/09/spidercity_noimages.jpg


Expected Result


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.


Reposted from http://eppleton.sharedhost.de/blog/?p=205


Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo