Building the Main UdG Agora Web Site

Alas, my pile of things to blog about the UdG Agora project is more like the pile of stones than the finished end piece. Here I will describe what went into the main project web site http://udg.theagoraonline.net/ — and as all my web sites go, they are never quite done; some organization needs to happen.

This is the typical kind of rolly scrolly web site that seems to be the norm these days- a jQuery powered slideshow of images at the top, and roll down sections of icons and things as links, and a three column footer. WordPress Theme shopping these days is often more chore than pleasure, as themes get to be more like theme operating systems, its hard to know how the innards work, and what from the slick demo you can easily change and what needs code tweaking under the hood.

Here is the way it looks on the iPad, in portrait orientation the slide title gets clipped a little, I can live with it:

And on the iPhone small screen it’s pretty good too.

The Theme

I feel lucky with the choice here- this is the Wall Street Business Theme from Graph Paper Press. That’s the thing about themes, just because it is billed as “a responsive WordPress business theme for savvy entrepreneurs and startups” does not mean the functionality can be used for a project. You have to look at theme demos are structural parts of the house, not the paint and trim.

I’ve had an account with Graph Paper Press for a while; first using them for the MIDEA site I built while at NMC (still running, good). Their themes are HTML5 enabled, responsive, and mostly what I like, more geared to display of media (i use another one of theirs on my Photography site).

The top slideshow is easily set up, and you can use options to provide link buttons, so I use it to point to four main sections of the site. The text on top of images looks great (in demos); in practice you need to choose images for say mostly dark tones if the text is light. And with responsive design, you are never quite sure where the text will sit.

For the left side “UDG Agora” text (we did not have a logo, and the name looks good there) I added some custom CSS To give the default black text a bit of a white halo. On multisite WordPress I almost always Network activate the Simple Custom CSS plugin as themes do not always consistently provide this in their interface. I have found I can do a fair bit of customization by hiding or changing CSS easier than changing theme templates. For this text effect, I added the white with a text-shadow and bumped the size and weight:

Home Page Sections

The sections on the front page, are configured in the Theme Settings. I like that the theme avoids custom post types, all of these content types are controlled by post categories, using featured images in the posts for the different ways they are displayed. I just have to keep track that the section for “Work” (on a business site used to describe projects, etc) is really the part where I list the Studios. Ones that read “Chose Category” are thus de-activated. And you can drag them to change the order.

The different sections have either 3 or 4 or 5 icons across, and differ a bit on if they display an excerpt or not. I ended up manual editing some of the template files to make them do what I wanted. I broke my usual role of Child Theming this site (I was in a rush to get it ready for July), but see little reason I’d ever update the core theme (those might be words to be eaten later). When themes have parts spewed about in all kinds of content and part files in various sub directories, I find child theming gets to be a headache.

I organized studies in a category, and created sub-categories for different groups used on the menus

Ordering them in reverse chronological order serves no purpose, and leads to changing the published dates to manually force the sort you want, so I wrote a custom function (in functions.php) to make the studio categories picked from the database in alpha order. The best way to do this (according to the Codex) is to run a query mod before it gets done with pre_get_posts

The one cheat I do is to put a “*” in front of the title of the three Foundational studios so they will be first listed when listed among the others.

As much of the content- studios, the people profiles — are organized as posts but the date is not really important, I made some mods to override the display of a post date, which is not all that relevant.

In digging around the theme code, I find that a lot of the content is referenced in places like archive.php (the template the displays the category archives, etc) is written as

This is the construct most modern themes use, the format comest from a content.php template. I’ve seen some themes that require about 4 jumps through various templates, includes to actually find what is being output. But here is pretty simple, in the main content.php template, how stuff is displayed on most archives, I find that the post meta data (the date and author that appears under the title) is done by an external function.

This means I have to rummage around the inc directory to find this function inside another file template-tags.php (this is a case where BB Edit’s multifile search really handy).

Geez what a pile of mumbo jumbo- it’s doing some work to assemble a time stamp, and also uses some functions ot generate the link for the post author. My strategy is to modify this function, so I can say “sometimes I want you to print the post date (e.g. for news stories) and sometimes not.”

I make this happen by creating a new variable the function expects, and assign a default value that makes it work the current way the function does- so if somewhere the theme calls wallstreet_posted_on(); it still works the same way. I call this $showtime and if it is not defined, it’s assume to be true, meaning “show the time”!

I then put a conditional around the part of the function that builds the time stamp, so it only does this is $showtime is true; if I use elsewhere in a template wallstreet_posted_on(false); then the timestamp should not be displayed.

Here is my modified function

So when $showtime is false, $time_string is null, and the first sprintf has nothing to print.

Is anyone left reading this?

This means that the news listings do show date and author:

And the Studio Categories, say for Learner Selected Studios, show only the author:

And the ones for our people profiles… WAIT A MINUTE THERE IS NOTHING THERE!

I am tricky. The listings for people do not need a date or an author displayed (each of us wrote our own profile on the site). I did some CSS to just hide this content, adding in my custom CSS editor

Page Structuring

I set up a structure for static information, what I called “How To Participate” which is really a guidebook, as a page structure, where I use subpages and subpages of subpages to create outlines.

This is a thing I have done on the DS106 Handbook and for the You Show and other sites. I let the page structure define the relationships, and use the Page List plugin to display them as indices / table of contents. It’s a super flexible plugin with a heap of options.

But the idea is that these are generated dynamically, so adding or removing a page from the site affects anywhere the shortcode is used. For the How to participate Guide, it is all generated by this shortcode

The options are to display children of the current page (it’s id is 86, the parent option is required to keep it from doing the while sub page structure). Pages are sorted by the Menu Order option on each page, so I can control the display by giving pages higher on the list a low number. And the image options tell it to use the featured image.

You can use these shortcodes in widgets too; and for entire page structure, you simple put something like this in a page:

For a complete hierarchal listing of all pages on the site (this is in fact used on a page where I have a Map of all links — everything in the list starting with Welcome to the Agora is done with this plugin.

But Wait, There’s More!

And I did not even talk about the footers and its widgets (I modded the footer template to include sponsor logos and a Creative Commons statement. The “back door” is actually the admin login/logout link. My colleagues kept asking for the login link and did not like it when I said “just slap /admin on the end of the site URL

I also have some tricks for using custom fields to hold a URL so that a load of the page links elsewhere, it was a way to set up the Challenge Icons listing on the front page- the posts are used to display the titles and featured image, but the URL when clicked is defined by the contents of a custom post field.

There are a few more tricks in the site, but I’ve babbled on a bit much. I have a lot to write up, next (I think) a bit on the Daily Try site and some insight into what my Studio sessions included.

But I am super pleased with the style and feel of this site, there might be some things to tweak still for the sidebars.

---

Top /Featured image credit: Wikimedia Commons creative commons licensed image https://commons.wikimedia.org/wiki/File:Dry_stone_wall_building.JPG