More Than a Musical, Hamilton WordPress Theme as a Top of the Domain Hub

In recent work on ushering people into a Domain of Their Own I’ve been looking for ways to have them conceptualize their domain as more than one site or blog, as more like a plot of land.

For the eCampus Ontario Extend workshops we emphasized putting some kind of calling card or simple front gate at the top, at the entrance, using the simple cPanel Site Publisher as a starter. I reworked that as well for the DML Staking a Claim workshop with expanded content on Better Calling Cards.

These include two WordPress themes I concocted, duct taped together from the design of two different HTML5 Up Themes (which are CC licensed), WP-Dimension and WP-Big Picture. It’s nice to see some other people using them.

But there is another kind of “thing” you might want at the top of your domain, especailly if you manage a sprawling set of various sites likeBryan Alexander. He emailed me recently with a subject line of “WordPress Question”:

Alan, could you recommend a theme?

I’m setting up a kind of hub or portal site. Not much content: just links out to my various projects.

Should be around 7 links.

Any WP theme leap to mind?

My first thought was like… almost any theme these days with some kind of masonry layout (links to content from featured images on the front page). But I had a thought of nice clever way he could do this himself, using a new theme from my favorite designer, Anders Noren, fashionably named Hamilton.

I had recently put it to use on a site for Marian Funes; she had chosen one of this multiplex premium themes from Themeforest that looked great in the demo, but weighed in at about 300+ files and 65 Mb (I have a future blog post about BloatPress themes). It’s like learning a new operating system. I convinced Mariana to try the much simpler, lightweight, and free Hamilton.

In thinking about Bryan’s message, I saw a simple approach to his site. He creates a blog post for every one of the sites he wants to link to; all it needs is a title and a feature image. No one will ever see the post… we use the Quick Page/Post Redirect Plugin. It’s rather simple, when you activate the redirect option that are added to every page post, instead of displaying that post when requested, a visitor is sent to the URL specified:

So Bryan just needed to activate this plugin, create a series of posts, enter the URL in this plugin’s options field, and upload a featured image.

But what about the order of the front links? Posts are organized by date created. One could create them in the reverse order they want them to appear, or fiddle with editing the published date.

The more elegant and flexible way was telling Bryan to install the Post Types Order plugin. This provides an interface where he can just drag and drop the listed posts to control the order of appearance.

Change the order of appearance on the front of the site by drag and drop interface of Post Types Order plugin

That’s pretty much it. Bryan did some extra work to add the nice background image via the Customizer. I found an icon he could use for the site icon, which generates a cute favicon.

The one thing that comes up with people using this theme is asking how to “control” the size of the front images. This is a bit of a trap of designing it to look good on your own screen. This is a responsive them, and it changes the sizes of the images as needed. The rule of CogDog’s thumb is- use a large sized image, let WordPress and the theme create the smaller size it needs. The layout of this theme is more controlled by the aspect ratio, the ratio of width to height, not the absolute size. You can see how Bryan mixed it well using a variety of image shapes, some landscape oriented, some portrait oriented.

Check out the final site Bryan created https://futureofeducation.us/

The Future of Education Observatory, the site for Bryan Alexander’s seeing of all far and wide

The linked part of the Observatory; each one was created as a post but uses a redirection plugin to send to other sites

I also recommend setting the Permalinks (in the Dashboard under Settings) to be simply Post Name

So you do not get hover URLs with uncategorized in the URL (the default WordPress permalinks setting is to put the category in the URL. A WP developer’s cat cries in anguish every time you publish posts with uncategorized in the URL.

FYI use the Customizer -> Background Image to do what he did with the observatory image, Change the Preset menu to Fill Screen (tiled backgrounds went out in the 1990s), and use the grid to experiment where to fix the image edges:

Setting up the background image. This creates a fixed image that everything scrolls over

Also experiment with the icons at the bottom of the Customizer to gauge how the site will look on other device screens (table and small phone).

I liked this approach so much I am using it for a hub of sites for my upcoming Australia workshops. Mine is not a top of domain, but it is the hub for a series of mostly subsites in multisite install, but a few of the front links go to other URLs.

That dude was me, in 2007, this is the site for a similar return trip 10 years later

The links on my site, the first two are external sites (one a google doc) the others are other wordpress sites inside this multi-site install

It’s the same approach. I added one more plugin that adds menu icons for social media links (the menus appear from the top right “hamburger” button- I’ve been surprised how many people are surprised when I name it so). The theme has two menus, one for each side. I like using the right side for social media links:

The overlay menu has links on left, social media on right

The icons on the right are enabled with the Font Awesome 4 Menus plugin which lets me add them using the class names for Font Awesome icons (you need to activate CSS Classes under Screen Options in top right to make this field visible)

Adding menu icons by using Font-Awesome CSS class names

There’s one more gotchya that comes up, and that I should have known better- many people want to customize the footer to have something different than the copyright and the credit link to the theme author. This happens a lot in themes.

In ones I make, I try to add a Customizer option to modify the footer, but in the large majority of themes, the footer is hard wired into the theme.

The recommended approach, and what I should almost always do when I start a new site like this, is to create a child theme. This lets me override parts of the main theme, and when the main theme is updated, I do not lose my modifications.

I would recommend creating a child theme for a Hamilton Hub, if only to customize the footer. It’s pretty simple. You should already have the parent theme installed on your site. Do not fear, I can show you how to birth this theme. All you need is a plain text editor, OSX TextEdit or Windows NotePad.

Create a folder for your theme, call it maybe Hamilton Hub (or Hamburger Helper whatever you like). Inside that folder, create a new file named style.css (that file name must be exact), and in that file put:

This indicates the folder is a child theme related to the parent named hamilton. Enter your own name and Author URI, it matters not. Note how it references the directory name of the parent theme (next to Template:) as well as in the path to the relative URL of the parent theme.

Now, make a copy from the Hamilton theme directory (you might want to download that so you can do this) of one file footer.php and put that in your hamilton-hub directory.

There is bunch of php code in there, but if you even have a small awareness of HTML you should see that the footer content is on two lines, each wrapped in a <p>...</p> tag:

So the first line inserts a copyright symbol (why do all themes assume we want copyright, sigh). Automatically the year, and builds the link to the blog name. This is all done through functions. We don’t need to do that. The second one provided a credit link to Anders, which I am fine with since his themes are awesome.

But now that it’s a child theme, I can edit footer.php to have the info I want. By being inside my child theme directory, it overrides the one that came with the theme. So I changed mine to be:

I don’t need to echo the site name, I just made a link to my main site and also listed a Creative Commons license. You can put whatever text and HTML you desire in your footer. If the Hamilton theme is every updated, you do not lose your mods.

Now just make a .zip of your child theme, upload it as a new theme in the WordPress Dashboard, and activate it.

Now if you have ever started building a site with a theme and want to childfy it (I’m looking at you, @NurseKillam) you can follow a similar path:

• Make a directory for your child theme
• Create a stub styles.css with proper references to the parent theme
• Copy the HTML/PHP for the footer template footer.php to your child theme directory
• Edit the copy of footer.php to have your dream footer
• Zip it, upload to themes, and activate

A few notes on converting an existing theme to a child one..

• You may lose some of your Customizer settings, si you may want to write them down so you can re-create them
• You will have to re-assign your menus (they will exist but you may have to designate to what part of the theme they belong to
• There is a possibility you may have to re-assign your widgets

Because of this, even if I don’t think so when I start, if my gut says I may want to tinker with the theme (which I almost always do) its best to start fresh with a child theme.

This is a rather viable option for a main domain as a different kind of front gate than a calling card. It’s certainly not limited to the Hamilton theme, and visual theme that puts posts on the front page represented by featured images could work the same.

But that Hamiton theme, it really sings.

Just ask Bryan.

Featured Image: Hub flickr photo by cogdogblog shared under a Creative Commons (BY) license

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