CreateWordpressThemeWithNetBeansPartTwo

Part Two

Contributed By; Anton Epple


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

Brief Overview


In the last part, we’ve modified the template, so as to make use of it in Wordpress. The main part was to fix some URLs with wordpress php tags to load all the images from the right path. The next step is to split up the template in different parts.

Getting Started


Create some new files in the folder that holds your theme - "spiderCity" in my example;

header.php
This will hold the Meta info, reference the css and render the header section
sidebar.php
The default sidebar actions will go here. This can be dynamically adjusted later on via the admin dashboard
footer.php
Quite obvious, the footer section

header.php

Now, simply cut the stuff you need out from index.php and paste it to the respective file. Start with header. Delete everything in header.php. Go to index.php and cut out everything from "
<!DOCTYPE html [...]
" to "{<!– /header –>}". Paste it to the header.php. You will need to change the part where the stylesheet is loaded from this:
<link rel="stylesheet" href="<?php bloginfo(’stylesheet_url’); ?>" type="text/css" media="screen" />

to:

<style type="text/css" media="screen">
@import url( <?php bloginfo(’stylesheet_url’); ?> );
</style>
This is neccesarry to use the stylesheet from all parts of your theme. In index.php add
<?php get_header(); ?>
at the top of the file. That’s the way wordpress puts the parts together to create the page. Try out your theme now. Nothing has changed in the way it looks, but your theme is separated into reusable modules.

Steps to Reproduce


Right now, the page still has the default title. We will use some more php to make this dynamic. In the header.php locate:

<h1>spiderCity</h1>
<div>short slogan here</div>

and replace it with:

<h1><?php bloginfo(’name’); ?><?php wp_title(); ?></h1>
<div><?php bloginfo(’description’); ?></div>

Those are wordpress specific php functions. Have a look here for additional wordpress template tags you could use: http://www.dbswebsite.com/design/wordpress-reference/. Run your Project the title and subtitle will now display the title & description of your blog;

http://eppleton.sharedhost.de/blog/wp-content/uploads/2008/11/changed_title1.png

The three “Recent posts” links to the left also come from your header. We should replace those;

<a href="#"> <img src="...
<a href="#”> <img src="...
<a href="#"> <img src="...

with a real one that links to the rss feed:

<div class="leftbar2″> <a href=”<?php bloginfo(’rss2_url’); ?>”> <img src="<?php bloginfo(’stylesheet_directory’); ?>/images/bar2.gif" /></a> </div>

If you rerun it you should see only one tab “Rss feed” to the left. Clicking it will link you to the rss feed.

footer.php

The footer is very simple in this template. Just cut this from index.php;

<div id="sider" class="fl">
<div class="sdinner"></div>
</div>
<!– /content –>
<div class="clearfix"> </div>
<!– /footer –>
</div>
</div>
</body>
</html>
and paste it to footer.php, again as the sole content of this file. In index.php add
<?php get_footer(); ?>
instead.

index.php

Now, we’ll add the content to index.php. First we’ll throw out the fake content by eliminating this part:

<h2>Free CSS Templates</h2>
<p> spiderCity is a CSS template that is free and fully standards compliant. <a href=”http://www.free-css-templates.com/”>Free CSS Templates</a> designed this template. </p>
<p> This template is allowed for all uses, including commercial use, as it is released under the Creative Commons Attributions 2.5 license. The only stipulation to the use of this free template is that the links

[...]Mauris bibendum blandit leo. </p>

to;

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="content" id="post-<?php the_ID(); ?>">
<h2 ><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<p><?php the_content(__(’(more...)’)); ?></p>
<?php wp_link_pages(); ?>
<?php comments_popup_link('''(’Comments (0)’), '''(’Comments (1)’), __(’Comments (%)’)); ?>
</div>
<?php comments_template(); // Get wp-comments.php template ?>
<?php endwhile; else: ?>
<p><?php _e(’Sorry, no posts matched your criteria.’); ?></p>
<?php endif; ?>
<?php posts_nav_link(’ — ‘, '''(’« Newer Posts’), '''(’Older Posts »’)); ?>

This will display the posts or an error message.

sidebar.php

Now we’ll do the same with the sidebar. From index.php cut everything from
to the matching
and overwrite everything in sidebar.php with it. In index.php add <?php get_sidebar(); ?> instead. We only want some basic stuff for the start, so remove the stuff between </form> and </div>. To replace the search form with a real one remove;
<h3>Seach</h3><form action=”/” method=”post” id=”sc”>
<input type=”text” name=”q” id=”q”  value=”" class=”q”/>
<input type=”submit” name=”submit” id=”submit”  value=”" class=”submit”/>
</form>

Add instead;

<h3>Search</h3>
<form id=”searchform” method=”get” action=”<?php bloginfo(’home’); ?>”>
<input type=”text” name=”s” id=”s” size=”15″ /><br />
<input type=”submit” value=”<?php _e(’Search’); ?>” />
</form>

Next, we’ll remove the "Categories" stuff from the top;

<h2>Categories</h2>

<ul>
<li><a href=”#”>Latin literature </a></li>
.
.
.
<li><a href=”#”>Hampden Sydney </a></li>
</ul>

And replace it with some php (again, you can have a look here for additional wordpress template tags you could use- http://www.dbswebsite.com/design/wordpress-reference/, choose whatever you llike from there);

<?php
if ( !function_exists(’dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
<?php wp_list_categories(’title_li=’ . __(’Categories:’)); ?>
After the closing
</form>
tag add a {<?php endif; ?>}. The "if ( !function_exists(’dynamic_sidebar’)..." part will allow you to replace the sidebar content dynamically with some widgets in the wp-admin backend.

Expected Result


That’s it. The wordpress template should be working now and your blog should look like this;

http://eppleton.sharedhost.de/blog/wp-content/uploads/2008/11/spidercity_template.png

The stylesheet is still very basic and you’ll need to edit it with the integrated stylesheet editor to get a consistent for all elements, but for now it’s functional and you can play around and adjust it to your needs. A good place to look for ideas is the “classic” theme in the themes folder. It’s very simple and therfore easy to understand. Have a look there to see what other tags and functionality you could add.



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


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