template – Learning (Lib)Tech

Branding the Library Website: Making a Flexible WordPress Theme

In moving our website to WordPress, I wanted to create a theme that could be used by our staff when working on online projects which would sit outside our main website, but in which we would host. Obviously they have the option of using other themes, but then someone (likely from our team) would have to make sure it meets accessibility guidelines, and as there are very few of those, I thought it best to just make our theme flexible.

No CLF

This is just a disclaimer that the main reason we could even do this is because we do not have a Common Look & Feel policy from the university administration, which most universities do. On the flip side, that’s one reason I wanted to do it. I would like that the library “products” are recognized as such. Doing it through a theme would also provide a more consistent user experience across the sites that use the library’s theme.

The Header

Our existing site already used a consistent header. However, it also includes the “Ask Us” logo, which would take you to the “Ask Us” page with all the myriad ways to contact the library for help. For other sites, it’s more likely that they will want to list specific contact instead, so I added an option to remove it.

new site header — New Header with Custom Menu and Google Search Bar

In addition, of course, for any sites using the theme, they will want the name of their site in the header, so I added a text box input for that in the options page and used font-face to pick a different font to make it stand out a little more.

The Menu

The navigation was built into the original theme so that you can either use a custom menu or it will fallback to using pages. However, the way our sites are made, some of the subpages menus would have been so long as to go past the end of the page, so I added the option to take out submenus.

new header with subsite title — Header with Subsite Title, Fallback Menu, and WordPress Search

Finally, the original website search bar redirects the user to the university’s Google search of the library’s directory, so I made the option to change it to the standard WordPress search bar to search within the current site.

The Footer

Since each site may have different links in the footer, I also made an option to include custom links in the footer, such that the ‘Home’ link is the only hard-coded link (which is always the link of the home page of the site you’re on).

Full Site Footer with Custom Links and Social Media Icons

While it’s possible to make the social media buttons customizable, until there is a demand or need, I decided to simply put in the option to take them all out.

Hardcoded Part of Footer

The rest of the footer (copyright) is always there. Again, unless there is a demand or need, I didn’t make the copyright holder changeable.

Templating

As many sections of our website (e.g. catalogue/OPAC, Research Guides) are not part of the CMS, I am currently working on taking the WordPress template (minus the options) and creating a plain HTML and then a ColdFusion template to use in those sections.

Putting It All Together: Creating a WordPress Theme Options Page Resources

There are some good theme option tutorials already out there, but I found a lot of them either too elaborate for my needs or incomplete. As a result, I thought I’d break it down how I used various tutorials in order to complete my page.

Loading Your Theme File

To actually load your theme options page, make sure that it is loaded as part of the theme setup. If you’re using an existing theme, you should see a:

add_action( ‘after_setup_theme’, ‘themename_setup’ );
This or something similar tells WordPress to load the themename_setup function more or less as the theme is being loaded/applied. Refer to the function reference page if necessary.

Somewhere in the function that is called, themename_setup, add a line to load your theme options:

require( get_template_directory() . ‘/inc/theme-options.php’ );
Refer to the PHP Manual require page if necessary.

All the code talked about in the tutorials would go in this one file. If a theme-options file already exist, consider whether you would rather make a new one or simply modify the existing one. If you only have 1-2 options, also consider adding options to existing options, such as Writing, Discussion, etc. if appropriate.

Recommended Create a Theme/Plugin Options Page Tutorials

Make your options page: Presscoder’s Tutorial (second half of post) or Otto’s Tutorial (simpler, less to read through, but less complete)

One thing in particular, I preferred Presscoder’s validation code.

The one thing I’ve been having problems with is setting the default options, and some other people I have found also have problems with the register_activation_hook, in which case, try using add_action as explained by Chip Bennett.

At the bottom of Otto’s post, he also briefly explains how to add options on existing pages instead of making a new one.

First half of Presscoder’s post gives a good overview of the WordPress functions and easy copy/paste example code for the various types of form options (e.g. textarea, checkbox).

A full example of an options page can also be found on Presscoder’s post near the bottom (just above “In Summary”).

To get the “Options/Settings Updated” box when a user has submitted/saved their options: Search for “Settings Updated Notice” on page 3 of Chip Bennett’s tutorial.

Displaying Your Options

Obviously, this depends on what kind of options you had (textbox, checkbox, etc.). The simplest example is if you have a textbox or textarea and you want to simply output the user’s input. In the appropriate place, insert:

<?php $array_name = get_option(‘option_name’); echo $array_name[‘key’]; ?>
Refer to get_option function reference if necessary.

More Resources

Chip Bennett obviously wrote much more than what I just refer to, but it goes into much more complex options than I cared to and covers how to implement multiple tabs on one settings page. If you’re interested in more functionality, I definitely recommend his tutorial.

If you prefer to have a prebuilt helper, Olly Benson has created a sort of template or framework with reusable code. Read more on his blog (though I haven’t actually tried using it).

For more, the WordPress Settings API page has a list of tutorials.

When Wiki and HTML Formatting Collide

So I’ve been messing around with wiki coding since obviously I’ve been working on developing content on the wiki. One of the things I was trying to do was a hanging indent (here’s another more complex one where you don’t need to set a margin and documentation is better) in order to display citation examples properly. More than that, I wanted to offset the whole citation (i.e. add an indent) in order to make it stand out from the rest of the text.

Template Code (Hanging Indent)
Whether you look at the first or second template, they both modify the CSS in order to make the hanging indent. They essentially change two attributes:

margin-left:2em;
text-indent:-2em; (shifts the first line of a paragraph)

Now in order to indent a line or paragraph, there are usually a couple of ways to do it in wiki, but throw the hanging indent template into it and it didn’t always work out so well.

Add Wiki Code
Usually the best way to do a simple indent in wiki is using a colon, such as

: Indented text

However, I suspect that rather than adding to the margin, the wiki changes the margin for that text, and the hanging indent code overrides it. So, the result is that it does nothing.

Add HTML Code
The other option was to use the <blockquote> tag. As the blockquote does not interfere with the CSS styling, this had the intended effect except that just like in this post, if I use blockquote,

you get spacing before and after the blockquote as you would with a <p> tag

My Solution
Not a very elegant solution, and rather the brute force way, but I just ended up creating a template for citation examples that hard coded the extra margin. I suppose the other solution would have been to add an extra variable to the hanging indent template but I figured that would not be worth the trouble.