<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Jefferson&#039;s Newspaper &#187; static homepages</title>
	<atom:link href="http://jeffersonsnewspaper.org/tags/static-homepages/feed/" rel="self" type="application/rss+xml" />
	<link>http://jeffersonsnewspaper.org</link>
	<description>A blog about information, education, and the (digital) humanities...</description>
	<lastBuildDate>Thu, 02 Feb 2012 16:01:26 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Building a WordPress Static Homepage with Dynamic Elements</title>
		<link>http://jeffersonsnewspaper.org/2009/building-a-wordpress-static-homepage-with-dynamic-elements/</link>
		<comments>http://jeffersonsnewspaper.org/2009/building-a-wordpress-static-homepage-with-dynamic-elements/#comments</comments>
		<pubDate>Tue, 22 Sep 2009 18:07:30 +0000</pubDate>
		<dc:creator>E. Bell</dc:creator>
				<category><![CDATA[Reference]]></category>
		<category><![CDATA[category feeds]]></category>
		<category><![CDATA[code]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[dummyproofing]]></category>
		<category><![CDATA[excerpt]]></category>
		<category><![CDATA[external feeds]]></category>
		<category><![CDATA[feeds]]></category>
		<category><![CDATA[omeka]]></category>
		<category><![CDATA[rss]]></category>
		<category><![CDATA[static homepages]]></category>
		<category><![CDATA[theme functions]]></category>
		<category><![CDATA[themes]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://jeffersonsnewspaper.org/?p=421</guid>
		<description><![CDATA[One of the nice features of WordPress is the ability to create static homepages. While most blogs use the standard configuration, where users scroll vertically from the most recent to older blog posts, it often makes sense to use a static homepage instead &#8212; especially if you are looking to create a more professional looking site, or are using WordPress as a Content Management System. I recently tackled a project where we needed to create...]]></description>
			<content:encoded><![CDATA[<p><img src="http://jeffersonsnewspaper.org/wp-content/uploads/2009/09/Manhattan_Bridge_Construction_19091.jpg" width="620px" height="auto"/>One of the nice features of WordPress is the ability to create <a title="Static Homepages @ WP" href="http://codex.wordpress.org/Creating_a_Static_Front_Page">static homepages</a>.  While most blogs use the standard configuration, where users scroll vertically from the most recent to older blog posts, it often makes sense to use a static homepage instead &#8212; especially if you are looking to create a more professional looking site, or are using <a title="WP as CMS @ DevLounge.net" href="http://www.devlounge.net/publishing/things-to-consider-when-using-wordpress-as-a-cms">WordPress as a Content Management System</a>.  I recently tackled a project where we needed to create a static homepage with the following features</p>
<ol>
<li>The homepage needed to look &#8220;homepagey&#8221; (i.e. not &#8220;bloggy&#8221;)</li>
<li>Client needed room for a short introductory text, which could be edited/updated on the fly without disrupting the homepage layout</li>
<li>The homepage needed to highlight the many features on the site, so that users could quickly scan the page, see what the site had to offer, and quickly find the latest update in each area.</li>
</ol>
<p>This quick tutorial will share some code for reproducing something that meets all or some of those criteria.  You don&#8217;t need to know much code to complete this tutorial, but a little helps.  Once you create and implement your homepage template, you will need to use CSS to add styles and adjust the layout.</p>
<p><span id="more-421"></span></p>
<p><strong>The Basics of Creating a Homepage Template</strong></p>
<p>This is pretty well-documented elsewhere, but here&#8217;s what you need to know on the most basic level.  If you are using a prefab theme, find that theme&#8217;s page.php file.  Now take that file and make a copy called homepage.php (or really, whatever you like).  Next, add the five lines below to the very top of the page (before the header and sidebar calls):</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php
<span style="color: #666666; font-style: italic;">/*
Template Name: Home Page
*/</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>Now, when you edit or create the page you want to use as Home, you can choose the Home Page template and set it as the static homepage for your site in Settings >> Reading.  But this won&#8217;t get you far.  As is, this template just replicates the behavior of any page on your site.  That&#8217;s not very exciting.  Instead, let&#8217;s try adding some dynamic content to the template.</p>
<p><strong>Note on custom theme_excerpt() function used below</strong></p>
<p>Before you get all crazy and just copy-paste from the homepage code below, note that I am using a custom function to generate post excerpts. To use that function you must first create a file called functions.php and add the following code:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php
<span style="color: #000000; font-weight: bold;">function</span> theme_excerpt<span style="color: #009900;">&#40;</span><span style="color: #000088;">$num</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$more</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$more</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$link</span> <span style="color: #339933;">=</span> get_permalink<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$limit</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$num</span><span style="color: #339933;">+</span><span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$excerpt</span> <span style="color: #339933;">=</span> <span style="color: #990000;">explode</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">' '</span><span style="color: #339933;">,</span> <span style="color: #990000;">strip_tags</span><span style="color: #009900;">&#40;</span>get_the_content<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #000088;">$limit</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #990000;">array_pop</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$excerpt</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$excerpt</span> <span style="color: #339933;">=</span> <span style="color: #990000;">implode</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot; &quot;</span><span style="color: #339933;">,</span><span style="color: #000088;">$excerpt</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'...'</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$excerpt</span> <span style="color: #339933;">=</span> <span style="color: #990000;">preg_replace</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'`\[[^\]]*\]`'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">''</span><span style="color: #339933;">,</span><span style="color: #000088;">$excerpt</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'&lt;p&gt;'</span><span style="color: #339933;">.</span><span style="color: #000088;">$excerpt</span><span style="color: #339933;">.</span><span style="color: #0000ff;">''</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$more</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>This will get you a more flexible excerpt function than the default WordPress one, <code>the_excerpt()</code>.  I think I stole this from the <a href="http://bavotasan.com/downloads/feed-me-seymour-free-wordpress-theme/" title="FMS theme">Feed Me Seymour theme</a>. You can call the function with <code>theme_excerpt(n)</code> where <em>n</em> is the number of words in the excerpt.</p>
<p><em>I&#8217;m going to break this up into sections, so if you are copy-pasting, you will need to copy all the sections below or pick and choose carefully, otherwise you might end up with some unclosed tags.</em></p>
<p><strong>Preserving the Page text</strong><br />
Most of the text in a dynamic homepage is generated from feeds, posts, and database queries (i.e. not by adding it manually to the page called Home in your WordPress page list).  In some cases, your Home page could be totally blank when accessed from the default page editor.  However, you may want to give yourself the option of manually adding and updating text somewhere on your homepage.  In the example below, we keep the WordPress page text intact by calling <a href="http://codex.wordpress.org/The_Loop" title="The Loop @ WP">The Loop</a>.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php
<span style="color: #666666; font-style: italic;">/*
Template Name: Home Page
*/</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span>
<span style="color: #339933;">&lt;!--</span> get the <span style="color: #990000;">header</span> and sidebar<span style="color: #339933;">...</span> though sometimes you might want to leave the sidebar out of a Home template<span style="color: #339933;">.</span>  It<span style="color: #0000ff;">'s here just for the sake of illustration--&gt; 
&lt; ?php get_header(); ?&gt;
&lt; ?php get_sidebar(); ?&gt;
&nbsp;
&lt;div id=&quot;content&quot;&gt;
&nbsp;
&lt;!-- Homepage text from the page editor using '</span>The Loop<span style="color: #0000ff;">'--&gt;
         &lt; ?php if (have_posts()) : while (have_posts()) : the_post(); ?&gt;
		&lt;div class=&quot;post&quot; id=&quot;main-entry&quot;&gt;&lt;div id=&quot;in-border&quot;&gt;
&nbsp;
			&lt;div class=&quot;entry&quot;&gt;
				&lt; ?php the_content(); ?&gt;
			&lt;/div&gt;
				  &lt; ?php endwhile; endif; ?&gt;
		&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;</span></pre></div></div>

<p><strong>An Internal Category Feed</strong><br />
Below we have the latest one post from the &#8216;News&#8217; category.  You can repeat this with other categories as needed.  This is especially useful if you use the <a href="http://http://wordpress.org/extend/plugins/category-visibility-ipeat/" title="Category Visibility plug-in">Category Visibility plug-in</a> or some other means to hide/show certain category posts in certain areas of your site.  In a recent project, for example, we created additional page templates for displaying posts in certain categories (Calendar Events, Timeline Events, Lesson Plans), but excluded them from the blog loop.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&lt;!-- An internal feed.--&gt;
&lt;!-- The latest one post from the 'News' category --&gt;
&lt;!-- You can repeat this with other categories as needed.  --&gt;
&nbsp;
&nbsp;
&lt;li&gt;
&lt;h2&gt;News&lt;/h2&gt;
         &lt; ?php $my_query = new WP_Query('category_name=news&amp;showposts=1'); while ($my_query-&gt;have_posts()) : $my_query-&gt;the_post(); $do_not_duplicate = $post-&gt;ID; ?&gt;
&nbsp;
                &lt;!-- Link to the 'News' category --&gt;
    		&lt;div class=&quot;post&quot;&gt;
    		&lt;div id=&quot;link-contain&quot;&gt;
                &lt;p class=&quot;contread&quot;&gt;&lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> get_bloginfo<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'url'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>/news&quot;&gt;All News &amp;raquo;&lt;/a&gt;&lt;/p&gt;  
                &lt;/div&gt;
&nbsp;
    		&lt;h3&gt;Latest News&lt;/h3&gt;
&nbsp;
                &lt;!-- The post title --&gt;
		&lt;h3&gt;&lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_permalink<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; rel=&quot;bookmark&quot; title=&quot;Permanent Link to &lt; ?php the_title(); ?&gt;&quot;&gt;&lt; ?php the_title(); ?&gt;&lt;/a&gt;&lt;/h3&gt;
			&lt;div class=&quot;entry&quot;&gt;
                &lt;!-- The post excerpt using custom function from theme/function.php --&gt;		
				&lt; ?php echo theme_excerpt(30); ?&gt; 
			&lt;/div&gt;
		&lt;/div&gt;
  &lt; ?php endwhile; ?&gt;
&lt;/li&gt;</pre></div></div>

<p><strong>An External Feed</strong><br />
This code uses the WordPress core functionality that brings feeds into your Dashboard.   I&#8217;m just pulling the title and link here, but you can do more.  This is especially useful if your site incorporates another platform besides WordPress.  In the example below, I use a feed from the Omeka platform (<a href="http://omeka.org">omeka.org</a>), which I had tucked into my root directory, masquerading as a native section of the site.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&lt;!-- An External Feed  --&gt;
&lt;!-- This is especially useful if your site incorporates another platform besides WordPress.--&gt;
&nbsp;
&lt;li&gt;
&lt;h2&gt;Collections &amp;amp; Exhibits &lt;/h2&gt;
    		&lt;div class=&quot;post&quot; id=&quot;omeka-feed&quot;&gt;
    		&lt;div id=&quot;link-contain&quot;&gt;&lt;p class=&quot;contread&quot;&gt;&lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> get_bloginfo<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'url'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>/omeka&quot;&gt;View the Archive &amp;raquo;&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
			&lt;div class=&quot;entry&quot;&gt;
             &lt;!-- This code uses the WordPress core functionality that brings feeds into your Dashboard--&gt;
             &lt;!-- I'm just pulling the title and link here, but you can do more--&gt;
			&lt; ?php  
			require_once (ABSPATH . WPINC . '/rss.php');  
			$rss = @fetch_rss('http://www.myurl.org/omeka/items/browse?output=rss2');  
			if ( isset($rss-&gt;items) &amp;&amp; 0 != count($rss-&gt;items) ) {  
			?&gt;  
			&lt;h3&gt;Latest Additions&lt;/h3&gt;
			&lt;ul&gt;  
			&lt; ?php  
			$rss-&gt;items = array_slice($rss-&gt;items, 0,7);  
			foreach ($rss-&gt;items as $item ) {  
 			?&gt;  
			&lt;li&gt; 
			&lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> wp_filter_kses<span style="color: #009900;">&#40;</span><span style="color: #000088;">$item</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'link'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;
			&lt; ?php echo wp_specialchars($item['title']); ?&gt;  
			&lt;/a&gt;  
			&lt;/li&gt;  
			&lt; ?php } ?&gt;  
			&lt;/ul&gt;  
			&lt; ?php } ?&gt;  
			&lt;/div&gt;
&nbsp;
		&lt;/div&gt;
  &lt; ?php endwhile; ?&gt;
&lt;/li&gt;</pre></div></div>

<p><strong>A Special Plugin Feed (Simple:Press)</strong><br />
Lots of plugins generate their own feed.  Here we have an internal feed from the Simple:Press forum plugin (<a href="http://simplepressforum.com">simplepressforum.com</a>).  Such plug-ins generally use custom functions, such as the one below, the rules for which are defined in the plug-in documentation.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&lt;!-- An internal feed from the Simple:Press forum plugin (simplepressforum.com)--&gt;
&lt;li&gt;
&lt;h2&gt;Discussions&lt;/h2&gt;
    		&lt;div class=&quot;post&quot; id=&quot;forum-posts&quot;&gt;
    		&lt;div id=&quot;link-contain&quot;&gt;&lt;p class=&quot;contread&quot;&gt;&lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> get_bloginfo<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'url'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>/forum&quot;&gt;View Forums &amp;raquo;&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
			&lt;div class=&quot;entry&quot;&gt;
			&lt;h3&gt;Latest Topics&lt;/h3&gt;
				&lt;ul&gt;
				&lt; ?php sf_recent_posts_tag(3, false, true, true, true, 0, false); ?&gt;
				&lt;/ul&gt;
&nbsp;
			&lt;/div&gt;
&nbsp;
		&lt;/div&gt;
&nbsp;
&lt;/li&gt;</pre></div></div>

<p><strong>Listing all Pages</strong><br />
Normally, you should list all your pages in the header navigation, but in this case I had too many pages to list there, some of which didn&#8217;t belong in the navigation.  I listed only the pages that were not part of the header navigation or the footer (About, Contact) in this section.  You can find more info about <code>wp_list_pages()</code> <a href="http://codex.wordpress.org/Template_Tags/wp_list_pages" title="wp_list_pages() @ WP">here</a>.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;!--</span> <span style="color: #990000;">List</span> all parent pages and first level of child pages <span style="color: #339933;">--&gt;</span>
<span style="color: #339933;">&lt;</span>li<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>h2<span style="color: #339933;">&gt;</span>More<span style="color: #339933;">&lt;/</span>h2<span style="color: #339933;">&gt;</span>
&nbsp;
    	<span style="color: #339933;">&lt;</span>div <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;post&quot;</span> id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;more-list&quot;</span><span style="color: #339933;">&gt;</span>
			<span style="color: #339933;">&lt;</span>ul<span style="color: #339933;">&gt;</span>
			<span style="color: #339933;">&lt;</span>h3<span style="color: #339933;">&gt;&lt;</span> ?php wp_list_pages<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'title_li=&amp;depth=2exclude=1,2,3,4,5,6'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">;</span><span style="color: #000000; font-weight: bold;">?&gt;</span><span style="color: #339933;">&lt;/</span>h3<span style="color: #339933;">&gt;</span>
			<span style="color: #339933;">&lt;/</span>ul<span style="color: #339933;">&gt;</span>
	<span style="color: #339933;">&lt;/</span>div<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>li<span style="color: #339933;">&gt;</span></pre></div></div>

<p>If you are copy-pasting, don&#8217;t forget to add the footer to end your page</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php get_footer<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>Of course, there are plenty more tricks out there.  Frankly, these aren&#8217;t that special, but they seem fundamental.  If this helps you, let us know in the comments.</p>
]]></content:encoded>
			<wfw:commentRss>http://jeffersonsnewspaper.org/2009/building-a-wordpress-static-homepage-with-dynamic-elements/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

