Making of a New WordPress Powered Site

Hang on to your full content news feeds, this post might be a long one. I hope to try and document the under the hood as well as some of the exterior chrome work on a new site NMC just unveiled this week. This is as much for my records as anything.

But first, start with the demo, the final piece. The new site is for NMC Virtual Worlds, our new arm that provides consulting and buolding expertise in Virtual Worlds, right now focused n (but not forever) Second Life. Take a peek first at http://virtualworlds.nmc.org/ which looks almost like:

if you reload the front page, the banners as well as the case study in the lower right will change. The banner rotation is easy, something I’ve already put into the other WP power site, the NMC Campus Observer.

The needs for the site were provided rather simply as a Word document, with 6 of the present 7 major tabs. It was presented as primarily static content, but they left me room to dynamic it up, toss in some randomized aspects as well as use syndicated content. Actually, they left most of the decisions up to me, and someone else took care of the text writing (they know of my poor typing skills). I envisioned having some regularly published “news” via the blog page type, but most of the content would be static (or semi-static) WordPress “Pages” (capital P). I was also provided a logo, which gives some direction on important colors.

So the first step was looking for a template to use as a starting point.

Template Starters

I don’t look at templates as the end point, but the start of my framework. I wanted something clean, uncluttered, and not blog-like. You have to be able to look a bit past what the template provides out of the box. Sites I looked at included ThemesBase.com, WordPress ThemeViewer, BloggingThemes, and a few more I am forgetting. The colors dont matter, since I feel confident I can change that. It’s more about the types of content, how it is placed, etc.

For starters, I was drawn to the clean top button look of unsleepable, though the rest of it looked like most other WP blogs. Urban Decay was on my list, not sure why.

I liked a lot of the sophisticated features built into squible, but the site was down during my research period, and all I could scrounge was an earlier beta. It looked clever.

Just for some alternatives, I scouted a few of the items in Open Source Web Design, which are free general web templates. The downside is one would have to fold them into a proper WordPress theme, something I had not done before. But for designs, it was worth looking at a few, like a business design such as Internet Services. Industry was interesting with the fixed nav bar, and was pretty much a blog fit. Nautica 2.2 was very clean and fit with the banner and tabbed navigation approach. I really liked Underground.

Back to the WordPress themes, I was sort of leaning to something of the Hemingway variety, with content at the top, and the stuff tpypically running up the side as a sidebar, relegated to a lower division, looked at variants like Cherry Blossom and the original Hemingway.

And then luck rolled my way. On my WordPress Dashboard for CogDogBlog was a link to some new themes announced at Weblog Tools Collection — Small Studio was elegant, yet still too blog-ish, but it was Orange Web 2.0 that really clicked- the tabs worked for the page driven navigation, the sidebar at the bottom was fresher than the blog sidebar on the side look, and the grey banner left room for some graphic banners.

Draft 0.0

So that was the choice, and what I worked from. What I did to start altering the template was to save the source of the demo as an HTML file so I could change the CSS for basic layout, including increasing the height of the top orange bar (and losing the orange color, to fit our logo, finding a reasonable size for banner images in the grey bar (80×156 it turned out), and swapping out the orange colors for greens and blues that matched our logo.

I first built a site that runs from WordPress running locally on my MacBookPro– much easier to twiddle w/o having to FTP back and forth. For details on how to do this, see the article on enabling virtual hosts in OS X at evolt.

To keep things organized in my mind, the content regions on all pages are mapped out in a sketch:

The “faux” sidebar is a construct of this template, and was very hand- it is really just a split of the main content area into floated divs for a two column format; on many pages, the right side content is empty white space.

* logo header: removed text headers, and used the graphic version only, linked to the home page
* banner– filled with one sample banner image during the test phase; a directory in the blo g template is designated for the banner collection (so they can just be dropped in), as well as a copy of the image rotator script; banner rotation is done simply in the header.php template via this CSS that over-rides anything in the style sheet:

* nav tabs – navigation tabs, built automatically of WordPress Page types, some extra plugins described below enabled this cleanly.
* content – where the stuff goes
* faux sidebar – additional links, flickr streams, etc can go there, or nothing to have some white space. I learned a groovy new trick to put this to use
* sidebar – the true WordPress sidebar, in the basic template, it provides a listing of Links, Categories, and Blog Archives. Buried in my rework here is some of me more clever trickery.

Paging All Pages

WordPress Pages were at the core of what this site was going to be. The first thing was the main site’s front page was not going to be the standard blog page of reverse chronological entries- the front would be mre or less some static content, so this is a perfect job for the Static Front Page plugin, which means that a Page create with the slug name of “home” because the main page for the site. Bu what I liked about the Orange Web 2.0 template was some code I saw in the right faux sidebar area of the default home page:

have_posts()) : $my_query->the_post(); 
   $shorttitle = substr(the_title('','',FALSE),0,25); ?>


  
 
  24)
     { echo '...'; } ?>

This is some PHP and MySQL queries that runs through the database, and pulls headlines and links for the most recent X blog posts, so although the front page is “static”, this sidebar can be dynamic. I used this approach several different places in this site. So more or less I used the basic index.php template as my Page template for the front.

It became apparent I might have several different Page templates. Again, a powerful feature of WordPress is its template flow. I can set up different templates for my “About” page, the “Services” page, etc. to enable different content in that right side column. When you do this, it becomes important to add a PHP comment at the top of each template, so these templates get added to the authoring menu (when authoring a specific page, you can choose which template to apply).

The other thing I realized is that I would be creating a number of pages that I would not want on the top navigation bar; for example, I knew we would have a “Portfolio” page, but there would be linked form it 5-8 other pages that were case examples within the portfolio. There are ways to write the header.php template to exclude certain pages from the loop that builds the tabs, but I came across the Page Link Manager plugin, that adds a checkbox to the Page editing screen that allows you to indicate that the Page should not be included in any loops that build a navigation or page list output.

As I started building out the pages, some with a standard template (nothing on the right faux sidebar), it struck me that eventually I might have 15 or more different Page templates… it is not terrible, but the only difference in these is what goes in that one div that formats the faux side bar. So I thought to myself, “Self.. there must be some scripting you can do to make this more efficient…” and then it made sense to create a custom field for the pages.

Custom fields are powerful, as it lets you assign your own meta data a blog post or Page. it is way down on the bottom of the authoring menu, so for each page that I had a sidebar, I created one called contentright and gave it a value, a string that would indicate the name of a specific external file that would have all the content that needed to be put into the right side. Once I made one custom field, it is now available on other Pages, so I can just assign values as needed.

So this is a screenshot form editing the “About Us” page, and the value of this field will map to a new file I create called “about.php” (I put mine in a subdirectory of my template directory) that is just a snip of HTML and/pr PHP needed to format the contents of the right side faux sidebar. So rather than having a different Page template for each Page, I have a generic one. To insert the content, I needed some more PHP code to pull the value of the custom field, then use an include statement to load it from a designated directory. I have written this from scratch before, but once again, another plugin saves some trouble, the Get Custom Field Values plugin, and my standard code for a page with right side content is:

This is slick, since if I do not define a custom field value, it just leaves that right side area empty.

Well, I thought it was clever.

And another issue cropped up regarding Pages, though it was later as I was adding blog entries… the WordPress search tool does not search Pages! What’s one to do… look for a plugin! The Search Everything plugin allows the basic search box to include Pages within its scope.

So for the Pages, About Us, Services, and Portfolio were basic- Pages with other Stuff on the right side (Portfolio would expand shortly as we added Case Studies). The site docs had a Contact page, which was simply an addres, phone number, and email link. That’s pretty web 0.5, and yet One More Time, a plugin came to good use– the Secure and Accessible PHP Contact Form.

This well-written plugin adds a contact form to a specific WordPress Page, allows a good deal of customization w/o too much tinkering. It does not allow you to write a paragraph intro or other content to the page; the plugin completely rewrites the page. but because of my cleaver sidebar hack, I was able to add the mailing address and phone numbers to the sidebar, and still have a functioning form.

Dynamic News Headlines

We had brainstormed a bit about a way to have some aggregation or subscribing to external news sources about Virtual Worlds that we could pull in as headlines. I thought a bit about reblog, but the process of reblogging becomes overly complicated if you are not an anal techie. It had to be something that would be simple to do, to mark external stories as ones to bring into our site, but not, say ALL the stories form a source.

My solution was to create a Google Reader Account for this site, add to it a set of feeds, and on a periodic basis, quickly scan what is new and use the quick shortcut key (Shift S) to add the story to the Shared Stories collection; so we get that link to a web version, we get RSS, and the Google Reader clipping code, puts the headlines into our site. The color match is not perfect, but it feels like a reasonable way to have this be a dynamic content region — check out the news link.

Photos, Photos

Obviously we would also have a flickr account to syndicate photos to the new site. We do- http://flickr.com/photos/nmcvirtualworlds/, and with a structure for tagging, we can target photos to different pages using the flickr HTML badge. On the front page, it is a small row along the fixed text. On our Services Page, it is a larger size inserted on the right. These both are pulling random photos from the entire account.

But on a page like the Case Study of our Digital Media Symposium, we can bring in random photos just associated with the case study by its tag. Eventually, all case studies will have their own flickr stream.

Case Studies

The Case Studies are meant to highlight hte work of the project or the people involved. Links point to it from (a) random one added to the front page; (b) random 3 put in the bottom right of the true sidebar (bottom ofall pages); and (c) a listing of all available on the Portfolio Page to the right. The code for the random ones are explained below, but what becamse important was that each Case Study would be a different page, and by making them all a child page of the portfolio, we could manage them as a group.

Therefore, the Case Study Page has a specific template- see for example one for the IBM Innovation Jam. it has an extra top left header indicating it as a Case Study, it knows to pull an icon in automatically for the opening text, and each one has its own right side faux sidebar using the technique described above. I got lazy on doing the icon; each page has a database/Page id, and I used that as a naming convention for the icon files. So, to put the icon into the flow of the main text, the Page template has something like:

  
Virtual Worlds Case Study:
  

      
  
  
  

The image is just fetched form a known directory where the image for the IBM Innovation Jam, page id 12, is available at http://virtualworlds.nmc.org/images/portfolio/case-12.jpg.

Tripping the Blog

Integrating the blog component was actually the most complicated piece, kind of ironic since this is blogging software. The blog needs are simple here, there is only one category, named, of all things, “blog”. The first trick I needed to do was to make the link at the top nav bar, which says blog and should go to a WordPress Page, needed to go to a page that was a reverse chronological ordered listing of posts, and could be paged through back and forth in time.

I forgot the 3 or 4 approaches I tried, but here is te final solution. The “blog” page, is merely a category view (I created a category.php template; it uses code form above to put the 15 recent posts on the right side), and since there is but one category, that gives all blog posts — http://virtualworlds.nmc.org/blog/category/. But how to make a page that redirects there?

Ah, this is where some Apache magic comes in– I went to my web server config, and set up a permanent redirect, so that any request to http://virtualworlds.nmc.org/blog/ gets automagically redirected to http://virtualworlds.nmc.org/blog/category/ — so I do not even need to create a “page” named blog.

Tricking Out the Bottom Sidebar

The bottom of the page is simple, but took some gymnastics to get to the current display. The template has 3 divs, and in each is a different WordPress template construct to create the lists and links in there. The blog categories in the original was not something I needed, and the order needed to be different– as a comparison, se the original template (top) versus our modifications (bottom):

Cosmetically, I just used an icon of our logo’s swirl in the background of the header tags. But an issue I found is that the color background (pale orange i original, pale green in our sites) is dependent on the rightmost column (which in the flow of the HTML comes first) dictates how high the color bar is– so if there are more inks in the middle, I got an annoying white stripe through the sidebar. We did not need a large bottom sidebar, which can happen if you list all the months for an archive, so I settled in finding a way to have just 3 items under each, and a link to see more content.

The links were easy to control; I only have 3 built in to the WordPress links editor, and can use the standard function to display all the links as a list. The “more…” link was a fun diversion. This was actually added last– the other 2 columns had “more…” links at the bottom, and I was thinking of how we could make them all parallel. So another semi epiphany; we are already tagging relevant external links in a del.icio.us account that generates content syndicated to the NMC Campus Observer blog (using the del.icio.us link roll and tag cloud tools), so I thought, why not just display that same content here? Adjusting the tag cloud options, and using the link roll for the latest tagged sites, plus some adding of classes to the site’s CSS, we get this nifty links page.

the middle column is meant to list the monthly archives for the blog, but list only the 3 recent months with blog posts. This is done with built in WordPress template code:

But again, the “more…” tag stumped me a bit, I needed an easy way to list an index of all blog archives by date. I could have fiddled with a new template, but jumped to another plugin, KG Archives, which provides a reverse chronological listing of months as headers, and a list under each month with a link for a blog post from that month. A drop down menu collapses the index to a single month.

And lastly, the right side is aimed at listing 3 Case Studies at random, and a “more…” link to the rest (the Portfolio page). Getting this required a custom MySQl query, one that would pull the data for 3 Case Study pages, chosen randomly. The query relies on the fact we know that they are all child of the Portfolio page, which has an id of 5, so the code to do this bit is:

 # select 3 random case studies, page posts that are child of ID 5
 $pageposts = $wpdb->get_results("SELECT wposts.* 
    FROM $wpdb->posts wposts 
    WHERE wposts.post_status= 'static'
       AND wposts.post_parent = 5 
       ORDER BY RAND() 
       LIMIT 3", OBJECT);
 ?>






   

 
 

   more...

The beauty of this sidebar is we have it always balanced in terms of height; each list will have exactly 3 items.

More Plugins

Two plugins I always add to a new site are:
* Spam Karma 2 – the ultimate in protection from comment spammers
* Role Manager — for any WordPress site with multiple authors, it allows very fine setting of roles and capabilities. We have accounts set up for some people to write content, but we don’t need to let them get to the templates, or alter the category structure.

And I also tossed in the Audio Player plugin, so I can add a flash player by simply editing a blog or page content with:

<.pre>
[audio: http://www.blah.com/directory/podcast.mp3]

Will publish the page with a nice Flash player. Podcasting is not a major need, which s why we did not go with podPress, an excellent plug for managing podcasts.

Post Mortem

This is about all the documentation I have energy for, and may have created the fattest, longest blog post every to hang here. I probably did not explain everything as clear to make it easy to do the same things. My lessons are:

* You are not limited to the template out of the box (well you might be without an understanding of how the templates work, a solid grounding in CSS, and some PHP notions)
* WordPress can do a whole lot more than just blah blah blah blhagging.
* And I forgot lesson 3.

What I left out was a lot of time troubleshooting (and still doing it) browser specific issues, especially the floated content bugs in Internet explorer. They finally got smushed (I hope).

And there is one annoying thing with WordPress; have seen it myself a few times on this site and the NMC Campus Observer– sometimes a page form the site is generated, but the CSS is either corrupt or not sent; and people see ugly, unformatted, who cares if it is semantic HTML. If anyone has a clue, I will grant them some huge future favor.

Happy WordPressing

 Share this barking on social media

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon