Categories
Blog

Making the Site

Discussion of creation of the Hellicar & Lewis website including links to source code and Wordpress tips.

Pete and I decided to use WordPress for the new version of our site, after the super minimal previous version.

I spotted that the new version of WordPress gave a new thumbnail feature that I was very keen to utilise:

http://markjaquith.wordpress.com/2009/12/23/new-in-wordpress-2-9-post-thumbnail-images/

I was interested in using the Thematic Theme Framework, but also wanted to add custom typography, via the new CSS Fontface feature, beautifully explained in the article linked to below:

http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

Particularly great is the @font-face kit generator, linked to in the article. As for font conversion, after downloading X11 for OS X, I downloaded the superlative and free font utility, FontForge.

I used this post to learn how to remove the side bar from the site for non-front pages, and the following code to generate the front page:

<?php
/*
Template Name: HellicarAndLewis Front Page
*/

global $options;
foreach ($options as $value) {
 if (get_option( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; }
 else { $$value['id'] = get_option( $value['id'] ); }
 }
?>
<?php get_header() ?>

 <div id="container">
 <div id="content">

 <?php thematic_navigation_above();?>
 
<?php get_sidebar('index-top') ?>

<?php thematic_above_indexloop() ?>

<?php
$my_query = new WP_Query('category_name=Selected&posts_per_page=-1');    

while ($my_query->have_posts()) : $my_query->the_post();  // Start the loop:
// This is just what we decide to show in each post ?>
<div id="post-<?php the_ID() ?>">
 <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
 <?php thematic_postheader(); ?>
 </a>
 <div>
 <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
 <?php the_post_thumbnail();  // we just called for the thumbnail ?>
 </a>
 <?php the_excerpt();  // we just called for the excerpt ?>
 <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
 <p>Read more...</p>
 </a>
 </div>
 <?php thematic_postfooter(); ?>
</div><!-- .post -->
<?php
endwhile; // loop done, go back up?>

<?php thematic_below_indexloop() ?>

<?php get_sidebar('index-bottom') ?>

 <?php thematic_navigation_below();?>

 </div><!-- #content -->
 </div><!-- #container -->

<?php thematic_sidebar() ?>
<?php get_footer() ?>

And the category pages for Blog and Project posts:

<?php
/*
Template Name: HellicarAndLewis Projects Page
*/
global $options;
foreach ($options as $value) {
 if (get_option( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; }
 else { $$value['id'] = get_option( $value['id'] ); }
 }
?>
<?php get_header() ?>

 <div id="container">
 <div id="content">

<?php the_post() ?>

<?php thematic_page_title() ?>

<?php rewind_posts() ?>

 <?php thematic_navigation_above();?>

 <?php
 $my_query = new WP_Query('category_name=Project&posts_per_page=-1');    

 while ($my_query->have_posts()) : $my_query->the_post();  // Start the loop:
 // This is just what we decide to show in each post ?>
 <div id="post-<?php the_ID() ?>">
 <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
 <?php thematic_postheader(); ?>
 </a>
 <div>
 <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
 <?php the_post_thumbnail();  // we just called for the thumbnail ?>
 </a>
 <?php the_excerpt();  // we just called for the excerpt ?>
 <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
 <p>Read more...</p>
 </a>
 </div>
 <?php thematic_postfooter(); ?>
 </div><!-- .post -->
 <?php
 endwhile; // loop done, go back up?>

 <?php thematic_navigation_below();?>

 </div><!-- #content .hfeed -->
 </div><!-- #container -->

<?php thematic_sidebar() ?>
<?php get_footer() ?>

One reply on “Making the Site”

Leave a Reply

Your email address will not be published. Required fields are marked *