A page template is often used to display complex layouts sometimes seen on the homepage for a blog. This page regularly features the most recent post before displaying the remainder. We created such a template for use with our WordPress theme.

Making a page template

In functions.php we registered another image size referenced as ‘featured’, a larger landscape size to use with the WordPress post thumbnail function
We copied and pasted our index.php into a new PHP document and saved as home-template.php
In home-template.php, we declared the document as a page template with PHP inside CSS comments
Above the sidebars and main content we added another div classed as ‘featured’, including a loop with the following queries for posts found.
Show one post from a specific post category ID, in our case the ‘featured’ category.
Show the post thumbnail but use the size referenced as ‘featured’ in functions.php
Display the title, excerpt and a link to the post on the text “Read more”
Between the divs for sidebars, we inserted another loop into the main content retainer with the following instructions.
Show all the remaining posts
For these show the thumbnail image at the size referenced as ‘home’ in functions.php
Then show the title, the excerpt and a link to the posts on the text, “Read more”

After completing these actions we were able to go into the admin screens for WordPress and edit our homepage. In the page template dropdown we were able to select the page template we had defined, home-template, and in WordPress settings, under reading settings, we defined our frontpage as a static page with instructions to display our homepage.

The PHP functions we used in our template rendered HTML that we needed to target and position in our style.css document, doing so gave our homepage a spiffy customised layout that features one post above the remaining posts.

Click for larger view

Widget styling

There are a number of widgets that come standard with WordPress and it is important that a theme has styling specific to these widgets. Our Friends of Design lecturer was kind enough to compile a CSS section for styling purposes, we just copy and pasted these into our style.css document and applied a few styles here and there.

Code

home-template.php

<?php

/*Template Name: Home*/

?>

<?php get_header( ); ?>

	<div id="featured">

		<?php query_posts('cat=5&showposts=1'); ?>

		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

			<a href="<?php the_permalink(); ?>">
			<?php the_post_thumbnail('featured'); ?>
			</a>

			<h2><?php the_title(); ?></h2>
			<?php the_excerpt(); ?>

			<a href="<?php the_permalink(); ?>">Read more</a>

		<?php endwhile; ?>
		<?php endif; ?>
		<?php wp_reset_query(); ?>
	</div>

		<div id="content">

			<?php get_sidebar(); ?>

			<div id="middle-column"><!-- Main Content Begins Here -->
				<?php query_posts('cat=-161'); ?>
				<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
					<div class="post">
						<?php the_post_thumbnail('home'); ?>
						<div class="post-entry">
							<h2><?php the_title(); ?></h2>
							<?php the_excerpt(); ?>
							<a href="<?php the_permalink(); ?>">Read more</a>
						</div>
					</div>
				<?php endwhile; ?>
				<?php endif; ?>
			</div>

			<?php get_sidebar('two'); ?>

			<div style="clear:both;"></div>

		</div><!-- Content Ends Here -->

<?php get_footer(); ?>

in style.css for widgets

/* == WordPress CSS - Default WordPress Widgets == */

.widget {}

/* links widget */
.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}

/* meta widget */
.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}

/* pages widget */
.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}

/* recent-posts widget */
.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}

/* archives widget */
.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}

/* tag-cloud widget */
.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}

/* calendar widget */
.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {font-weight:bold;border:1px solid #c1c1c1;padding:4px}
#calendar_wrap td {border:1px solid #c1c1c1;padding:4px}
#wp-calendar tr td {}
#wp-calendar caption {font-weight:bold; padding:0 0 10px;font-size:14px;}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {border:none;}
#wp-calendar #next {border:none;}
#wp-calendar .pad {border:none;}
#wp-calendar #next a {}
#wp-calendar #prev a {}

/* category widget */
.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {}
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}

/* recent-comments widget */
.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}

/* search widget */
#searchform {}
.widget_search {}
.screen-reader-text {}

/* text widget */
.textwidget {}
.widget_text {}
.textwidget p {}

Follow Iggi’s journey on our blog every week for the next month as he learns to master this popular content management system. WordPress.

• Getting to grips with WordPress at Friends of Design
• Friends of Design WordPress training – Day 1
• Friends of Design WordPress training – Day 2
• Friends of Design WordPress training – Day 3
• Friends of Design WordPress training – Day 4
• Friends of Design WordPress training – Day 5
• Friends of Design WordPress training – Day 6
• Friends of Design WordPress training – Day 7
• Friends of Design WordPress training – Day 8
• Friends of Design WordPress training – Day 9 & 10

Registering comments in functions.php

This is one of the first things you should do when building your theme, an easy cut and paste procedure.

The PHP that turns on comments:

	function mytheme_comment($comment, $args, $depth) {
	$GLOBALS['comment'] = $comment; ?>
	<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
		<div id="comment-<?php comment_ID(); ?>">
		<div class="comment-author vcard">
			<?php echo get_avatar($comment,$size='96'); ?>

			<?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
		</div>
		<?php if ($comment->comment_approved == '0') : ?>
			<em><?php _e('Your comment is awaiting moderation.') ?></em>
			<br />
		<?php endif; ?>

		<div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),'  ','') ?></div>

		<?php comment_text() ?>

		<div class="reply">
			<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
		</div>
		</div>
	<?php
			}

The course teaches beginners how to theme a WordPress site. Pasting the above into your functions.php is all a beginner really needs to know, so a detailed explanation of the complicated php code above is not necessary. But basically, this code allows readers of a blog to reply in comment. It also renders the comment data into a HTML layout that can be styled very specifically, even as far as adding class names to elements that offer great styling flexibility.

styling the comments

The CSS targets taken from our style.css are all possible for styling WordPress comments in entirety. Comments are scripted to mark-up into a list that can get quite complicated on a popular post with plenty responses. A comment, or list item is bound to have “children”, be both a “child” and a “parent”, or get deeply nested. We styled our list very simply, but it is possible to get highly technical in styling a list.

This is the entire list of comment styles, but we only needed to use some of them:

	/*------Comments---*/

	.children {  }
	ol.commentlist { list-style:none;margin-left:0;padding-left:0; }
	ol.commentlist li { border-bottom:1px dotted #000;padding:0 0 10px;margin:0 0 10px; }
	ol.commentlist li.alt { }
	ol.commentlist li.thread-alt { }
	ol.commentlist li.bypostauthor {}
	ol.commentlist li.byuser {}
	ol.commentlist li.comment-author-admin {}
	ol.commentlist li.comment { }
	ol.commentlist li div.comment-author { float:left; }
	ol.commentlist li div.vcard {  }
	ol.commentlist li div.vcard cite.fn {  }
	ol.commentlist li div.vcard cite.fn a.url {  }
	ol.commentlist li div.vcard cite.fn a.url:hover { }
	ol.commentlist li div.vcard img.avatar { vertical-align:top;margin:0 15px 0 0;border:4px solid #000;border-radius:5px; }
	ol.commentlist li div.vcard img.avatar-32 {}
	ol.commentlist li div.vcard img.photo {}
	ol.commentlist li div.vcard span.says {}
	ol.commentlist li div.commentmetadata {float:right;}
	ol.commentlist li div.comment-meta {  }
	ol.commentlist li div.comment-meta a { }
	ol.commentlist li p {clear:both;margin:0 0 10px 55px;}
	ol.commentlist li ul {  }
	ol.commentlist li div.reply {margin:0 0 0 55px; }
	ol.commentlist li div.reply:hover { }
	ol.commentlist li div.reply a {  }
	.commentlist li ul.children{}
	ol.commentlist li ul.children li { }
	ol.commentlist li ul.children li.alt {}
	ol.commentlist li ul.children li.bypostauthor {}
	ol.commentlist li ul.children li.byuser {}
	ol.commentlist li ul.children li.comment {}
	ol.commentlist li ul.children li.comment-author-admin {}
	ol.commentlist li ul.children li.depth-2 { }
	ol.commentlist li ul.children li.depth-3 {  }
	ol.commentlist li ul.children li.depth-4 {  }
	ol.commentlist li ul.children li.depth-5 {}
	ol.commentlist li ul.children li.odd {}
	ol.commentlist li.even {  }
	ol.commentlist li.odd {  }
	ol.commentlist li.parent { }
	ol.commentlist li.pingback { }
	ol.commentlist li.pingback.parent { }
	ol.commentlist li.pingback div.vcard {  }
	ol.commentlist li.thread-even {}
	ol.commentlist li.thread-odd {}
	.cancel-comment-reply {}
	em.comment-awaiting-moderation {}

Browser interpretation

Follow Iggi’s journey on our blog every week for the next month as he learns to master this popular content management system. WordPress.

• Getting to grips with WordPress at Friends of Design
• Friends of Design WordPress training – Day 1
• Friends of Design WordPress training – Day 2
• Friends of Design WordPress training – Day 3
• Friends of Design WordPress training – Day 4
• Friends of Design WordPress training – Day 5
• Friends of Design WordPress training – Day 6
• Friends of Design WordPress training – Day 7
• Friends of Design WordPress training – Day 8
• Friends of Design WordPress training – Day 9 & 10

In WordPress content can be stored on a page or post, but in order for WordPress to display any one page or post there are two documents your theme must contain. These are page.php and single.php. Pages are generally used for static types of content, that will not be updated frequently, like an about page. Where posts are used for “blog” content, a collection of articles about a particular interest that is constantly aggregated with regular posts about the subject.

We simply copied our index.php and pasted into two new PHP documents, stripping out the content section, from there we saved these as page and single.php respectively, then we tailored each with PHP and HTML necessary for displaying a page as opposed to a single post.

page.php

Here we inserted a basic loop containing simple instructions to display the following:

• the post thumbnail
• the title
• and the content

The loop in page.php

	<div id="middle-column"><!-- Main Content Begins Here -->
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
			<div class="post">
				<?php the_post_thumbnail('home'); ?>
				<div class="post-entry">
					<h2><?php the_title(); ?></h2>
					<?php the_content(); ?>
				</div>
			</div>
		<?php endwhile; ?>
		<?php endif; ?>
	</div>

single.php

For displaying single posts we called the following in for display

• The post thumbnail
• The title
• the post date and time
• the content
• the tags
• the category
• the author

The loop in single.php

	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="post">
			<?php the_post_thumbnail('post'); ?>
			<h2><?php the_title(); ?></h2>
			<div class="post-meta">
				Posted on <?php the_date(); ?> at <?php the_time(); ?>
			</div>
			<?php the_content(); ?>
			<div class="tags">
			<?php the_tags(); ?>
			</div>
			Categories: <?php the_category(''); ?>
			<?php the_author(); ?>
		</div>
		<?php comments_template( 'type=comment' ); ?>
	<?php endwhile; ?>
	<?php endif; ?>

Browser interpretation

after adding some styling in our stylesheet

A page

Click for larger image

A post

Click for larger image

Follow Iggi’s journey on our blog every week for the next month as he learns to master this popular content management system. WordPress.

• Getting to grips with WordPress at Friends of Design
• Friends of Design WordPress training – Day 1
• Friends of Design WordPress training – Day 2
• Friends of Design WordPress training – Day 3
• Friends of Design WordPress training – Day 4
• Friends of Design WordPress training – Day 5
• Friends of Design WordPress training – Day 6
• Friends of Design WordPress training – Day 7
• Friends of Design WordPress training – Day 8
• Friends of Design WordPress training – Day 9 & 10

A blog usually has the kind of page that displays a list of posts, or what is commonly refered to as a post archive. Each list item usually has an image or thumbnail, a title, a short description or excerpt from the post with a link to the full article. To get this kind of page into a theme we needed to register post thumbnail support and use “The loop” inside our index.php document.

Registering thumbnails and image sizes

You can just ad thumbnail support, but for more flexibility you can set many different sizes for thumbnails as needed in your theme.

In functions.php we:

• added theme support for post thumbnails
• added an image size of 130px by 130px referenced as ‘home’

	//Add thumbnail support
	add_theme_support( 'post-thumbnails' );
	add_image_size( 'home', 130, 130, true );

The loop

In WordPress the loop is a piece of PHP code that tells WordPress to look for posts and if it finds them, display them, it is probably the principal php function in WordPress. The most basic version of the loop will display all posts in reverse chronological order, but it is infinitely customizable to display posts exactly the way you want. This is what the most elementary version of the loop looks like:

	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		/* ---HTML and PHP for the loop goes here--- */
	<?php endwhile; ?>
	<?php endif; ?>

The above will find posts, but no posts will display untill the loop specifies the kinds of data that the loop needs to display. We customised our loop by placing additional functions inside it, marked up with a little HTML. This instructs WordPress to display only particular kinds of data for every post that it finds.

In index.php

• We inserted the loop into our index.php document.
• Inside the loop we inserted the following WordPress php tags:
• The following PHP

  <?php the_post_thumbnail('home'); ?>

  note the post thumbnail tag references ‘home’, a particular image size we registered in functions.php

• The following PHP

  <?php the_title(); ?>

  inside h2 heading tags

• The following PHP

  <?php the_excerpt(); ?>

• The following PHP

  <?php the_permalink(); ?>">

  as the reference to a link on the text “Read more…”

This is our completed loop in index.php

	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="post">
			<?php the_post_thumbnail('home'); ?>
			<div class="post-entry">
				<h2><?php the_title(); ?></h2>
				<?php the_excerpt(); ?>
				<a href="<?php the_permalink(); ?>">Read more</a>
			</div>
		</div>
	<?php endwhile; ?>
	<?php endif; ?>

Browser interpretation

after adding CSS styles in our stylesheet.

Click for larger image

Follow Iggi’s journey on our blog every week for the next month as he learns to master this popular content management system. WordPress.

• Getting to grips with WordPress at Friends of Design
• Friends of Design WordPress training – Day 1
• Friends of Design WordPress training – Day 2
• Friends of Design WordPress training – Day 3
• Friends of Design WordPress training – Day 4
• Friends of Design WordPress training – Day 5
• Friends of Design WordPress training – Day 6
• Friends of Design WordPress training – Day 7
• Friends of Design WordPress training – Day 8
• Friends of Design WordPress training – Day 9 & 10

Includes

Websites generally have some global elements, or elements that remain the same on any page or post the user is viewing. Two good examples of this is the header and footer of a website. The modern convention is that a site logo tagline, and navigation is displayed in the header. Today site search and social media integration is usually also found in the header. The footer customarily includes additional navigation, copyright info, maybe contact details and affiliate logos also. Best practice for creating global elements in WordPress is not to include them in the index.php document itself, but include them as seperate PHP documents within the theme.

We created the necessary PHP files for the header and footer, but also the sidebar document, which we would learn more about at a later stage in the course.

These were the steps we took:

We created the necessary PHP files for the header and footer, but also the sidebar document, which we would learn more about at a later stage in the course.

These were the steps we took:

• Created the following PHP documents (by cutting elements from index.php to the clipboard and pasting them into new PHP documents)

• header.php (this included the menu (navigation) in HTML)
• footer.php
• sidebar.php
• Edited our index.php document replacing HTML elements with the following PHP template tags. (these tags look for and “get” specified PHP documents, pulling them into the index.php document)

• The header section, was replaced with

  <?php get_header(); ?>

• The footer section, was replaced with

  <?php get_footer(); ?>

• The sidebar (2) sections, was replaced with

  <?php get_sidebar(); ?>

Registering menus and sidebars

Rather than coding menus in HTML, WordPress allows you to create your own menus and allocate them to specific areas on your site, using the UI. If you are creating your own theme, this functionality is not available in a WordPress install out of the box. Menus have to be registered first, before the functionality can be accessed. When registering more advance functionality features like menus, you do so in the functions.php document, which is another file a complete theme must include.

We realised that basic theming in WordPress is mostly a cut and paste affair. The course cannot pursue to teach us PHP in it’s entirety, at first glance that fact became immediately apparent. The code in functions.php can be complex and understanding it not essential to basic WordPress theming. It is unlikely that a beginner would ever need to change these functions. There is reference to registering functions on the WordPress codex.

These were the steps we took:

• created a new PHP document within out theme folder
• Registered two menus by copy pasting the code into functions.php
• Created menus via the WordPress UI and allocated them to locations specified in functions.php
• Edited our header.php to call and display one menu
• Edited our footer.php to call another menu

The code

functions.php

<?php

//Register Custom Menus

if ( function_exists( 'register_nav_menus' ) ) {
	register_nav_menus(
		array(
		  'primary_menu' => 'Primary Menu',
		  'footer_menu' => 'Footer Menu'
		)
	);
}

?>

header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php bloginfo('name'); ?> | <?php bloginfo('description'); ?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

<?php wp_head(); ?>
</head>

<body>

	<div id="container">

		<div id="header"><!-- Header Begins Here -->
			<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
			<h2><?php bloginfo('description'); ?></h2>
		</div>

		<div id="menu">
<?php wp_nav_menu( array('menu' => 'Primary Menu', 'theme_location' => 'primary_menu' )); ?>
		</div>

footer.php

		<div id="footer"><!-- Footer Content Begins Here -->
        	<?php wp_nav_menu( array('menu' => 'Footer Menu', 'menu_class' => 'footer-menu', 'theme_location' =>  'footer_menu' )); ?>
			<p>&copy; <?php bloginfo('name'); ?> <?php echo date('Y') ?></p>
		</div>

	</div>
<?php wp_footer();?>
</body>

</html>

sidebar.php

<div id="sidebar" class="left"><!-- Left Sidebar Begins Here -->
				<h4>Sidebar Header</h4>
					<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : // begin  primary sidebar widgets ?>

                            <!--
                            DEFAULT SIDEBAR
                            The content below will be shown by default if no widgets are added to the sidebar in your wordpress admin.
                            In your wordpress admin go to Design, Widgets and add sidebar widgets to sidebar 1 in order to create a dynamic sidebar
                            -->
                            <!-- The wp_list_cats() generates a list of the categories which were created in the wordpress admin
                            It only generates a list of <li>'s with their contents so needs to be wrapped in a <ul> to complete the list c*de
                            -->
                            <ul>
                            	<?php wp_list_cats(); ?>
                            </ul>
                    <?php endif; // end primary sidebar widgets  ?><!-- Dynamic Sidebar 1 c*de ends Here -->
			</div>

index.php

<?php get_header(); ?>

		<div id="content">

        	<?php get_sidebar(); ?>

			<div id="middle-column"><!-- Main Content Begins Here -->
				<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                	<div class="post">
                    	<h2><?php the_title(); ?></h2>
               			<?php the_excerpt(); ?>
                        <a href="<?php the_permalink(); ?>">Read more &raquo;</a>
                    </div>
                <?php endwhile; ?>
                <?php endif; ?>
			</div>

            <?php get_sidebar('two'); ?>

			<div style="clear:both;"></div>

		</div><!-- Content Ends Here -->

<?php get_footer(); ?>

Follow Iggi’s journey on our blog every week for the next month as he learns to master this popular content management system. WordPress.

• Getting to grips with WordPress at Friends of Design
• Friends of Design WordPress training – Day 1
• Friends of Design WordPress training – Day 2
• Friends of Design WordPress training – Day 3
• Friends of Design WordPress training – Day 4
• Friends of Design WordPress training – Day 5
• Friends of Design WordPress training – Day 6
• Friends of Design WordPress training – Day 7
• Friends of Design WordPress training – Day 8
• Friends of Design WordPress training – Day 9 & 10

Drupal to WordPress Migration

The old Bicycling site was built on Drupal and had no community component or forums. We had to come up with a solution to easily migrate the content from Drupal to WordPress and we tested all the migration scripts advertised online, but nothing worked. Ultimately Chris, our resident database wizard, created a custom SQL script that converted 5492 Posts, 2175 Tags, 216 Categories, 2984 Users and 7213 Images from the Drupal CMS to WordPress without any loss.

Bicycling Magazine’s shiny new WordPress powered home on the web.

The LightSpeed Publisher Theme

Our experience with Runners World helped towards the development of our WooThemes’ Canvas powered Publisher Theme, and the Publisher Theme was used as the base for the redesigned Bicycling Magazine.

Other features include a WPtouch Pro mobile Theme and the Feedmymedia WordPress specific hosting platform. Bicycling and MyBicycling is hosted on their own dedicated server on our Feedmymedia Hosting Platform due to the high amounts of traffic.

Unique Publisher Theme Modules:

• LightSpeed Ad module using Custom Post Tags for Adtags

• LightSpeed Events module for Canvas – We used the events module for the Race Calendar on Bicycling.co.za. We’ll talk about that in a bit.
• LightSpeed Recipes module for Canvas – (Not used on Bicycling.co.za)
• LightSpeed Q&A module for Canvas - (Not used on Bicycling.co.za)

The new Bicycling.co.za’s awesome WordPress features:

1. Bike Buyer’s Guide

CSV Importer

The Bike Buyer’s Guide on Bicycling Magazine is a key feature of the publication and presents a wide variety of bikes that readers can search for, compare and review. Each Bike has an editor’s review and rating.

The Bike Buyers Guide

The Bike Features that can be searched for are custom taxonomies, which makes it better for search.

Once a year Bicycling Magazine receives large amounts of Buyer’s Guide data from Bike companies in excel format that Kirsten (Bicycling’s online editor) needs to upload to the site. LightSpeed was tasked to develop a CSV importer allowing the magazine to easily upload the large quantities (100s to 1000s) of Bike information in one go. This functionality means that each bike no longer has to be uploaded manually, saving time and effort.

This has been our first step towards making a dynamic CSV importer for the Publisher theme.

Advanced Search

The Bike Buyer’s guide also needed some advanced search functionality to make comparing bikes easier. Warwick implemented the WooCommerce Pricing Slider to search bikes for specific price ranges.

Advanced Search with WooCommerce Price Range Slider

We used custom non-hierarchical taxonomies (tags) for the different types of bike parts. Prospective buyers can search on all taxonomies like Forks, Frame material, Wheelsets and Components to narrow down the search for their perfect ride.

The Bike Buyer's Guide Allows Search on different bike parts

2. Race Calendar

For the Race calendar we utilized the Events module developed for our Publisher theme.

The module was updated to included advanced search functionality that allows users to filter dates to search for races around a specific year and month. In the backend we upgraded the way all our algorithms work to use wp-query to work faster and more efficiently, instead of using a SQL call to find matches.

3. List Tools

Bicycling Magazine publishes a lot of content in the form of lists. These are articles with headlines like: “5 Sunscreens Tested & Rated”, “Cardinal Rules Of Cycling Fitness” and “How not to crash”. These articles are displayed on one page, with tabs to navigate to the next list item.

We developed this functionality as a Content type (Custom Post Type)  on request by Bicycling Magazine. In order for content to display in this format, the content has to be marked in the “List Tools” category (it can be part of other categories as well) and put in specific structure to work:

CODE:

Intro text</pre>
<!--more-->
<pre>Text</pre>
<!--nextpage-->
<pre></pre>
<h4>Headline or List Item</h4>
&nbsp;
<pre>Text</pre>
<!--nextpage-->
<pre></pre>
<h4>Next Headline or List Item</h4>
<pre>More Text

4. Gallery and Video

The site’s top navigation bar has a dedicated Media section with a dropdown for Video and Galleries. We implemented the Canvas Portfolio module for the Galleries on Bicycling.co.za. Like the videos, galleries can be sorted and filtered by categories.

The Video Category on the old Bicycling.co.za

The new dedicated Bicycling Video Page

The Design

BuddyPress powers new Bicycling community

We have extensive experience using BuddyPress to build community capability around online magazines and we were asked to introduce a community site element to the new Bicycling site, much like we did with Runners World and MyRunners World.

The big difference between the two magazines is that Runners World had an online community to start with. Runners World had two existing forums (on phpBB2 and NING) that had to be shut down and the users had to migrate to the BuddyPress powered MyRunners World community site. Due to the BuddyPress features and strong editorial support for the online community (like placing ads for the online community in the print magazine) Runners World has been able to grow their online community on this new platform.

The MyBicycling Home page

Our aim has been to do the same for Bicycling, by drawing on our Runners World experience and even improving on it to create a comfortable online home for Bicycling Magazine’s readership.

The MyBicycling Forum is based on HubSA, the largest cycling forum in SA and we have used BuddyPress and bbPress to build our own. Forums are powered by the bbPress 2.0 plugin, unlike the Runners World website where we used the bbPress stand alone.

BuddyPress Features on MyBicycling:

• User sign up
• Profiles
• Forums

Conclusion

The LightSpeed Publisher Theme has been created to cater for the specific needs of online magazines and with WordPress and BuddyPress spinning the gears on the new Bicycling Magazine and the MyBicycling community site, we are confident that South Africa’s cycling enthusiasts will find great value in their new online home.

Contact us today for a quote and let our experience and skill guide you to get the most out of your online magazine.

How it works

What wordpress basically does is store data that the user inputs on a server database. On the one side there is the data, text and images etc, on the other side there is the theme data, that is the code that controls the functionality and appearance of a WordPress website. You can change the theme data, the way in which the data is presented, without effecting the data, the data remains the same (well, until the user changes it). WordPress essentially only looks for data, fetches it from a server and the theme makes it look.

But how does WordPress know what data to find. In a post, as a bare minimum, you are likely to find a title and main body content associated with the post. All WordPress does is look for elements in association to a post or page, and it does this by recognising the PHP cues embedded in the theme. So at the very least, when the user asks for a page or post, WordPress collects and displays the title and content in association.

We had already been introduced to the index.php document that forms an integral part of a theme, you can think of this file as the homepage of a WordPress website. If you are familiar with HTML, the index.php file should not look too different from a normal HTML document, except that the HTML will contain PHP tags that instructs WordPress to fetch particular bits of data.

In order to understand the mechanics of a WordPress site we started inserting some PHP tags into our index.php document.

The PHP finds the data

The site title and tagline is defined in the WordPress backend, via Settings » General, but in order to display this data, we needed to insert the relevant PHP tags into our index.php document. These are the PHP tags in question:

• <?php bloginfo('name'); ?>

  (displays the site name/title)

• <?php bloginfo('description'); ?>

  (displays the site description/tagline)

These two tags were wrapped by us inside HTML heading tags, the PHP replacing the former marked-up text data. Then we viewed the file in a browser, the result being that whatever title and tagline we defined in WordPress was called and displayed in the same fashion the theme already defined. This is important to note, the HTML structure didn’t really change, neither did the CSS, we essentailly removed the text data from the HTML, instead using PHP tags that can fetch data from a WordPress server instead.

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php bloginfo('name'); ?> | <?php bloginfo('description'); ?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

<?php wp_head(); ?>
</head>

<body>

	<div id="container">

		<div id="header"><!-- Header Begins Here -->
			<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
			<h2><?php bloginfo('description'); ?></h2>
		</div>

		<div id="menu">
			<ul>
<?php wp_list_pages('sort_column=menu_order&title_li='); ?>
			</ul>

		</div>

Browser interpretation

Click for larger view

Follow Iggi’s journey on our blog every week for the next month as he learns to master this popular content management system. WordPress.

• Getting to grips with WordPress at Friends of Design
• Friends of Design WordPress training – Day 1
• Friends of Design WordPress training – Day 2
• Friends of Design WordPress training – Day 3
• Friends of Design WordPress training – Day 4
• Friends of Design WordPress training – Day 5
• Friends of Design WordPress training – Day 6
• Friends of Design WordPress training – Day 7
• Friends of Design WordPress training – Day 8
• Friends of Design WordPress training – Day 9 & 10

A theme and how to install one

A theme is basically a collection of php and CSS files that either cohere to or extend the functionality and design of a CMS powered website. In our case, the thoroughbred, WordPress. We started the day off by downloading a few free WordPress themes, and started using them straight away. Just google free WordPress themes, we are spoilt for choice. There are two ways to get a theme into WordPress.

• Use the WordPress UI to locate and install the theme in a zipped format
• Or transport the theme into the themes folder located within your site’s WordPress root folder

This will imediately change the entire look of your site, and depending on the theme, even extend the functionality of your site. The basic anatomy of a WordPress theme is:

• a index.php file
• and a style.css file

We learnt how to control these files to create a basic theme. Essentially all you need to do is take a page of HTML and rename it as a .php file and put that into a folder with an associated style.css file. This folder would then need to be transported to the your site’s theme folder, located inside the site’s wp-content folder. The file path should look something like:

C:\ » Mamp (or your prefered virtual hosting directory) » htdocs » your-site-folder » wp-content » themes » your-theme

Creating your own theme

Once installed, your theme will have to be activated via the WordPress UI, under Appearances » Themes, where all your installed themes can be switched on or off.

Click for larger view

If you want your theme to display with a featured image and short description, do as we did and include a screenshot of the frontpage and make a few edits to the style.css file. You can take an existing screenshot.png image from an existing theme, get the correct size and aspect ratio and then ensure that your screenshot conforms to these standards.

In the CSS stylesheet, you need to include a comments section with a very specific structure, this “code” merely defines the theme title, description, version and author to be displayed in the backend of WordPress.

These are the very basic requirements and only really serves as a platform from which to start building the rest of the theme.

Code

/*
Theme Name: Learning Theme 0.0.1
Theme URI: http://localhost
Description: A theme to teach theme development
Version: 0.1
Author: Emma du Plessis
Author URI: http://www.nomad-one.com
*/

/* This stylesheet is split up by Category to make it easier to find the styles you might want to change

1. Standard Styles - body, container, a, h2, h3, h4, h5
2. Header Styles
3. Menu Styles
4. Content Styles
5. Sidebar Styles
6. Footer Styles

*/

body {
	text-align: center;
	padding: 0;
	margin: 0;
	background-color: #698181;
	background-image:url(images/2692904990_8bde57388b_2.jpg);
}

By the end of the day our theme folder included the essential PHP and CSS files, plus the screenshot and description so that we can put our very own WordPress theme into action. Albeit very basic, it’s a good start, because from here on out we would get into the php nitty gritty that makes WordPress tick.

Browser interpretation

Click for larger view

Follow Iggi’s journey on our blog every week for the next month as he learns to master this popular content management system. WordPress.

• Getting to grips with WordPress at Friends of Design
• Friends of Design WordPress training – Day 1
• Friends of Design WordPress training – Day 2
• Friends of Design WordPress training – Day 3
• Friends of Design WordPress training – Day 4
• Friends of Design WordPress training – Day 5
• Friends of Design WordPress training – Day 6
• Friends of Design WordPress training – Day 7
• Friends of Design WordPress training – Day 8
• Friends of Design WordPress training – Day 9 & 10

>

WordPress Meetups serve as opportunities for WordPress communities to come together and share their love and interest of WordPress, build relationships and learn from each other.

LightSpeed will once again be hosting WordCamp Cape Town this year, and Meetups also serve as a launchpad for WordCamps, allowing local WordPress fanatics to get to know each other, discuss relevant topics and helps set the tone in preparation for an upcoming WordCamp.

The format of this inaugural WordPress 2012 meetup is informal. The aim is to get WordPress lovers together so they can mingle and sit down and chat to one another. Members of the LightSpeed and WooThemes teams will be in attendance and we’re looking forward to meet you!

Come by and share a beer, a joke and your WordPress insights.

Note: Attendees will be expected to pay for their own food and drinks.

Please RSVP for the event here.

Find us on Twitter:

LightSpeed/Feedmymedia – @feedmymedia

WordCamp Cape Town – @wordcampct

WordPress infrastructure and logistics

WordPress runs on the PHP scripting language, which means it requires a server environment to run. You can upload and install the WordPress files straight on to a PHP capable web server, but if you are trying WordPress for the first time, it is much better to install a virtual server on to your local machine. This serves as a brilliant testing environment before uploading WordPress to an actual web hosted server.

What is PHP?

It is the server based code that WordPress runs on. To explain it in a nutshell, PHP is not a mark-up language like HTML, but a scripting language for developing dynamic websites that change as a result of interaction with the user. PHP is a significant technology, especially relevant to the advances made in Web 2.0.

Installing a server application

Wamp

Mamp

Xamp

These are the server solutions developed for PHP & mysql, you can download a free copy at the following online destinations. Since Friends of Design is kitted out with iMacs, we all installed the Mamp server.

• Xampp – www.apachefriends.org/en/xampp.html (For Windows)
• Wamp – www.wampserver.com/en/ (For Windows)
• MAMP – http://www.mamp.info/ (For Macintosh)

A single WordPress install

These are the steps we took to get our WordPress website running locally, so that we can operate it through a browser. Every step is essential.

• After installing the server, we moved our download of WordPress into the htdocs folder for the server
• We then launched the Mamp application which opens it start screen in a browser
• Selecting the tab, allowed us to create a new database
• We then went back to the htdocs folder and renamed the wordpress folder, I used my eventual site title
• Back to the browser, we each entered http://localhost:8888/what-each of us-named-our-wordpress-folder into the address bar
• Then back to the WordPress folder, we renamed wp-config-sample.php to wp-config.php and opened that file in a text editor, performing the following tasks
• line 19, changed the database name to what we callled our databse in PHP my admin
• line 22, changed the database username to root
• line 25, chageed the database password to root
• line 45-52, we grabbed the authentication keys from a link in the comments above this section, copied that into a browser, got the new keys and copied them over the lines, save! (ctrl+s is really a healthy developer tick)
• Went back to http://localhost:8888/what-each of us-named-our-wordpress-folder/ and refresh
• Filled in the WordPress activation form and clicked install.

That’s it, we were all able to login after defining a site title, administrative email address and password. We actually did this exercise a second time as practice, but also to evince that multiple WordPress installs are possible on our locally installled server. There is plenty more documentation about this, noteably, the support wing of wordpress.org. Here is a post about installing WordPress locally using Mamp.

Follow Iggi’s journey on our blog every week for the next month as he learns to master this popular content management system. WordPress.

• Getting to grips with WordPress at Friends of Design
• Friends of Design WordPress training – Day 1
• Friends of Design WordPress training – Day 2
• Friends of Design WordPress training – Day 3
• Friends of Design WordPress training – Day 4
• Friends of Design WordPress training – Day 5
• Friends of Design WordPress training – Day 6
• Friends of Design WordPress training – Day 7
• Friends of Design WordPress training – Day 8
• Friends of Design WordPress training – Day 9 & 10