| Chapter 2: Full-On Customization with Themes and Plugins | |
| Kyle M. L. Jones | |
| Polly Alida-Farrington | |
|
|
|
| Abstract |
With a focus on how to customize WordPress to specific needs, chapter 2 leads the reader through the two most flexible areas within the software: themes and plugins. Themes modify site design and content presentation, and plugins enhance certain functionalities of the site. WordPress is renowned for excellently designed themes and numerous plugins for nearly any purpose. |
Plugins extend what WordPress can do and can be created by anyone with some coding skills. With more than 12,000 plugins in the official WordPress.org plugin directory,1 you can add a lot of additional features to your site. Need a contact form? A way to back up your data? An event calendar? A spam catcher? Yep, there are plugins for all those and more.
While plugins are wonderfully handy, the more you install, the more likely you are to run into a conflict that could cause problems. Consider carefully whether you really need a particular plugin or just want it. Plugins sometimes just make simple changes that you could also accomplish by editing your functions.php, CSS, or theme files—but only if you’re comfortable working with code.
So how exactly do you begin? Take your first step by not searching for any plugins just yet. You’ll save yourself time and headaches by creating a plugin wish list. Take these questions into consideration before choosing a plugin:
What should the plugin’s purpose be?
- Does it create content?
- Does it improve site administration?
- Does it help the user experience?
What’s the end goal of the plugin?
- Is it to improve the commenting features?
- Is it to allow e-mails to be sent to the site administrator?
- Is it to improve the site’s connectivity with social media the library uses?
- Is it to make administration of the site easier?
What are you willing to dedicate to the plugin in terms of time?
- If the plugin requires someone to work with constantly, are the resources available?
- If the plugin is new, are you willing to update it more than others as bugs arise and new features are rolled out?
- Although many of the plugins available are plug-and-play, some are not. Are you able to spend a moderate amount of testing and tweaking to meet your goals?
Part of the beauty of extending WordPress as a CMS is choosing the absolute best-fit combination of plugins that accomplish your content goals and administrative needs. While the process is exciting—and mostly enjoyable as you fine-tune your setup—your efforts include a daunting step: choosing from nearly 13,000 different plugins.2 And that’s just at the WordPress plugin repository. Premium plugins are sold by developers on their own, whereas the WordPress repository holds only freely available plugins.
Now that your wish list is set, put your masterful search skills to use by digging through the WordPress plugin repository. Don’t get too overwhelmed by the number of plugins. Know that you’ll need to dedicate some search time to finding a set of plugins that may work for your specific needs.
There are five different filters for searching for plugins:
- By relevance
- By newest added to the repository
- By recently updated
- By most popular
- By highest rated
While each filter has its advantages, we suggest using the default relevance feature, which will provide you the best fit for your search term. While the popularity and ranking filters sound similar, they are not: popularity is based on number of downloads, and ranking is selected by users. You can safely bet that the popularity filter is a better indicator of the plugin’s success than the user ranking, which is highly subjective and spotty at best. We’ve used many plugins that work wonderfully but have no or low rankings. Do your part for the WordPress community: Rank those plugins you use and test so as to enhance the quality of these ratings.
Once you’ve selected a potential plugin for use in your site, be sure to be thorough in checking out its description:
- Check that it will work with your version of WordPress.
- Read the documentation. Does the plugin have any special requirements?
- Check the version history and how recently the plugin has been updated. Both are good indicators of how active the plugin developer is.
Making these simple checks will help cut down on testing and debugging as you build your plugin framework on which to extend WordPress as a CMS.
It can’t be said enough that testing a plugin is essential. In the best-case scenario, you use a testing environment—an installation of WordPress other than your live site—on which you can run plugins without affecting visitors and staff who are working on the site. The worst-case scenario is that a plugin causes a critical issue with your site, providing you with what is commonly called in the WordPress community “the white screen of death.” That’s a misnomer, though, as nothing has died. Simply delete the plugin out of the wp-content directory wherever your site is installed and refresh your browser. In such a case, the plugin clearly had some technical issues or conflicted with another plugin. In a still-not-so-wonderful scenario, a plugin could work but require some customizing made to either your theme or to the plugin’s settings to get the optimum result. See why a testing environment might be a good thing?
If the WordPress plugin repository fails to provide you with the optimum plugin solution, look to premium plugin developers. For a great starting point in finding them, look at the sources listed in chapter 5. Prices for premium plugins vary but usually include documentation and support as well as the exceptional features of the plugin.
There’s a sentiment among some users and administrators of open source CMSs that purchasing additional elements—like plugins and themes—is somehow antithetical to using open source software. While this opinion is understandable, don’t let it deny you the chance to enhance your overall WordPress setup. Sometimes a premium plugin is just better designed and has more features than its free counterpart—and at prices like $25 and $40, they are relatively cheap.
While on the topic of cost, think of the amount of time, effort, and skill that goes into creating some of the amazing plugins available for free. If your budget allows, consider donating any sum of money to the developers. Without a doubt, they’ll greatly appreciate it.
When you create content for your site, whether it’s a news update, a page of library information, or a list of links to great research resources, the content is stored in a database without any information about how and where to display it.
Content stored in your database can then be used in a variety of ways. For example, a page listing the most recent news posts can take the latest ten post titles and the first sentence from each post to create a teaser page. And each post can also have its own individual page that has the title, full contents, and other data related to it. Similarly, a list of the latest headlines might appear on the sidebar of your pages to give people easy access to the latest news. All of that information is stored in the database just once but is used over and over in different places.
A site’s theme controls what information appears where and what it looks like. Themes make your content look good. Without theme files, WordPress wouldn’t know how to display your content on the screen.
A theme is a collection of files that creates the structure and design of your site.
A theme consists of template files (index.php, header.php, etc.) that control the structure and layout of your pages and cascading style sheets (CSS) files (style.css) that define the colors, fonts, and styles and generally make everything look great.
By separating content (stored in the database) from the structure and design (controlled by themes), WordPress and other CMSs provide a flexible framework for website development. If you want to tweak the look of your site, just make changes to the theme files. Want to redesign the site completely? Choose a new theme or create your own. All your content remains the same; it’s just displayed differently. When we started writing HTML, we couldn’t even dream of such a flexible way to create a website. We wonder what another twenty years will bring.
At a minimum, a theme must include these two files:
- index.php: the default template file that specifies what information to include on the page and where to display it. Most themes include additional template files for pages that need a different layout.
- style.css: the CSS code that makes your content look good. This code includes information about colors, fonts, sizes, margins, background colors, etc.
Some other common files are header.php, sidebar.php, footer.php, comments.php, and search.php. Each of these files contains code to display a particular piece of a WordPress page. And they all work together to create the pages you see on your site.
For example, if you take a look at the code in a theme’s index.php file, you’ll likely see a line of PHP code that looks like something like this:
<?php get_header(); ?>
This line pulls in the code from the header.php file to create the header on the page. If you want to edit something in the header area of your site, you’ll need to edit the header.php file. Look through the file, and you’ll see similar code that displays the sidebar and footer. Don’t be put off by the PHP code in the files. You don’t need to be a PHP pro to use WordPress, though it can’t hurt to learn a bit about it.
The Appearance administration panel is where you’ll select a theme for your site, search for and install new themes, customize the sidebar content with widgets, build navigation menus, and edit theme files.
In the Appearance > Themes subpanel, you’ll find previews of the themes that are currently installed on your server. Themes are stored in the wp-content/themes/ subdirectory on your server, each theme in its own subdirectory (e.g., wp-content/themes/twentyten).
To preview a theme, click on the theme image or the Preview link. The preview gives you a good idea of what your content will look like if you activate the theme. To give the theme a thorough test, use the Activate link to apply the theme to your whole site. When you’re just getting your site set up, you’ll spend a lot of time preview and testing themes.
At the top of the Appearance > Themes subpanel, select the Install Themes tab. From this panel you can search for themes in the WordPress.org Free Themes Directory by keyword, colors, layout style, and a variety of other features. You can also browse for featured, newest, and recently updated themes. To install a theme, click on the Install link, then the Install Now button in the preview window.
WordPress.org Free Themes Directory
Use the Upload option to install themes that have been downloaded from sources other than the WordPress.org directory. Though themes are usually distributed as zip files, you don’t need to unzip the file before using the upload option. However, if you’re using FTP to move the files directly to your server, you will need to unzip them first.
As Chris Coyier and Jeff Starr say in Digging into WordPress:
Sidebars are for “stuff.” … We don’t want this stuff in the footer because that’s way down there all lonely at the bottom of the page. So we put it on the side instead. Stuff = alternative navigation, ancillary content, small forms, descriptive text, advertising, blogrolls, pictures of cats … stuff.3
Widgets are how we get that stuff onto the sidebars. Widgets are little boxes that can be placed in various sidebars on your sites. Most themes have at least one sidebar, usually a narrow column on the left or right side of the page, and sometimes on both sides. It’s a bit more accurate to call these areas “widget areas” since theme designers have been building themes with customizable widget areas in the header and footer areas as well.
Widgets provide lots of ways to customize a site. They can contain all sorts of content. Widgets with a list of recent news posts, recent comments on the site, and links to various pages on the site can help your readers find their way to other content. Widgets can also display content from other websites, an RSS feed of news from your local newspaper, a stream of photos from your library’s Flickr account, your library’s Twitter updates, listings of new material from your library catalog, and so on.
Widgets are preconfigured to handle particular types of content and usually have some configuration options. For example, the Recent Posts widget creates a list of the most recent news posts from your site. You decide how many posts and what that box of content will be called.
Open the Appearance > Widgets subpanel and explore the list of widgets available to you. Some widgets are there by default in all WordPress installations, and others have been added by the various plugins your site is using.
The sidebars available in your theme are shown on the right. Drag a widget to one of the sidebars and expand the widget to see the customization options. You can use a widget as many times as needed. For example, the RSS widget could be placed on the sidebar multiple times, each instance pulling in content from different RSS feeds.
There are two lists of widgets here:
- Available Widgets are widgets that haven’t been configured yet.
- Inactive Widgets are widgets that you’ve removed from a sidebar and want to reuse later. The settings you configured will be retained.
Some popular widgets:
- Text is an incredibly useful blank box. You can put any sort of text and HTML code in this widget. Listing your library hours, address, and phone number is an easy way to display contact info on every page. You can also use it to highlight an upcoming event or add a graphic and link to one of your databases or e-book services.
- Search adds a search box to search the site.
- Links provides lists of links that you’ve added in the Links content panel.
- RSS can pull into your site anything that has an RSS feed (e.g., latest headlines from a news source, Twitter feed, headlines from a popular blog, book reviews, list of new materials in the catalog).
- Custom Menu places custom navigation menus on the sidebar.
- Archives is a menu to help readers find news posts from a particular month.
- Categories is a list of all the topics you’ve assigned to your news posts. It helps readers find content on the topics they’re interested in.
The default widgets provide many ways to add content to your sidebar, and as you add new features to your site with plugins, you’ll see even more widgets appearing in this panel.
By default, the basic sidebar in a new WordPress installation will have three widgets on the sidebar: Search, Archives, and Meta. As soon as you add any other widgets to the sidebar, those three will disappear. If you want them to appear, just drag them back onto the sidebar.
Many themes have a default navigation bar or menu somewhere across the top of the pages. In the past, these navigation bars usually just contained links to the main pages in your site. Though it was possible customize the navigation, the process wasn’t straightforward.
With the new Menus feature in WordPress 3.0, it’s now easy to build custom navigation menus with links to any combination of pages, topic categories, specific posts, external links, and more. While some themes don’t yet support this feature, the number of themes that do is growing. Even if a theme doesn’t fully support the new feature, you can still build custom menus and use the Custom Menu widget to place them on the sidebars of your site.
Open the Appearance > Menus subpanel to find out if your theme supports Menus and what options you have.
On the left side of the Menus subpanel are lists of the pages and categories used in the site. There’s also a box for creating custom links, which is handy for linking to your library’s catalog and other external resources. If you’ve created any custom post types or custom taxonomies, these will also be displayed.
- Name your menu and click on Create Menu.
- Select the items you want in your menu and Add to Menu.
- Add any Custom Links.
- Rearrange items by dragging the boxes around in the Menu panel.
- To create submenus, just drag one item onto another.
- In the Theme Locations box, select your new menu to assign it to the navigation for the site.
If your theme doesn’t fully support the Custom Menus feature, you can still build menus to appear on the sidebars.
- Build your menus as detailed above.
- In the Appearance > Widgets subpanel, drag the Custom Menu widget to the sidebar.
- Expand the widget, add a name, and select the custom menu you want on the sidebar.
It’s not unusual when looking for a theme to find one that’s almost perfect, that with just a little tweaking will be exactly what you need. And that’s one of the great things about WordPress: You can make changes to the template files and CSS code and make a theme your own.
But what happens when the original theme gets updated with some really great features that you want to take advantage of, but you still want to retain all the changes you’ve made? If you upgrade the theme, it will overwrite your customized versions of the files and there go your changes.
Creating a child theme solves this problem. Using this strategy, you create a new theme that contains all of the changes you need. That theme includes code that connects the child theme back to the parent theme. Basically, the child theme says, “Use the templates and CSS from the parent theme unless there’s something in the child theme that overrides the parent theme.”
Here’s an example. Let’s say you love the default WordPress theme called Twenty Ten. It’s a great theme, but maybe you want to change the text color for the site description at the top of all the pages.
- Create a new theme folder on your server. Name it twentytenchild.
- Create a text file called style.css.
- Include the following text at the start of the style.css file.
/*
Theme Name: twentytenchild
Description: A Child Theme of Twenty Ten
Author: your name here
Template: twentyten
*/
Here’s what that code means:
- Theme Name: the name you’ve given to your child theme (required)
- Description: description of your theme (optional)
- Author: your name (optional)
- Template: the directory that holds the parent theme—case-sensitive (required)
Unless you’re creating a completely new set of styles for your site, you’ll want to refer back to the styles in the parent theme. To load those styles, add this line of code:
@import url(“../twentyten/style.css”);
Then start adding your own styles. In this example, the text for the site description will be red (#f00) and bold.
#site-description {
color: f00;
font-weight: bold;
}
The complete style.css file now looks like this:
/*
Theme Name: twentytenchild
Description: A Child Theme of Twenty Ten
Author: your name here
Template: twentyten
*/
@import url(“../twentyten/style.css”);
#site-description {
color: f00;
font-weight: bold;
}
Put the style.css file in your new twentytenchild directory, return to the Themes panel, and activate your new theme.
When working with themes and CSS files, it helps enormously to install tools to help you identify which pieces of CSS code are used to format the different sections of your site. Two popular toolbars are Web Developer and Firebug.
Web Developer for Firefox and Chrome
http://chrispederick.com/work/web-developer
Firebug
The appearance of your site means a lot to you, and if it doesn’t, it should. The design of your site represents your library, your staff, your collection, and you. Simply put, it’s like your logo—except much more complicated. It’s part art and part function, as the colors, lines, fonts, graphics, and gradients have to complement the content that needs to get to the site visitor. So in choosing a theme, you’re met with some formidable choices.
Sometimes web design and information architecture are pushed to the side for the “I want/need a new/better website now” mentality. Yet this rush for a website ignores the fact that there’s usability testing and artistic skill that dictate what a website should look like and how it should be structured cosmetically. We urge you—no matter your CMS—to consider this fact before putting the “clothes,” so to speak, on your website. You’ll be able to consider the following when choosing a theme:
- structural elements
- number of columns, header and footer spaces, etc.
- graphical choices
- gradients, repeating images, contrasting or complementary colors, etc.
- typography
- serif, sans serif, browser-supported fonts, preloaded fonts, Google-hosted fonts, etc.
Luckily for those who choose WordPress for their website needs, its free theme choices are far superior in quantity to some comparable open source CMSs. Over 1,300 themes are available at the WordPress theme repository.4 And like plugins, premium themes are also available at extraordinarily low costs and high quality.
The WordPress theme repository has an excellent tag and filter faceted search process (much better than the process at the plugin repository) to help you find the theme that meets your needs.5 There are five ways to filter your results with accompanying options:
- By color (14 options)
- By column (6 options)
- By width (2 options)
- By features (13 options)
- By subject (3 options)
As with plugins, you should test your theme choices in an environment other than your live site. While plugins present the issue of severe conflicts that could temporarily bring down your site and disrupt your visitors, switching themes on them midvisit will just simply confound them. Use your test environment to see how theme choices affect the display of your content. You can run the theme through its paces by completing these steps:
- Add several pages of test content. (If need be, use the Lorem Ipsum text generator to create fake text for the pages.)
- Add several test posts.
- Assign categories to your test posts, and tags if you plan to use them.
- Add comments to some of those posts.
- If the theme has special page templates, give all of them a test with some Lorem Ipsum text as well.
- Work through the theme’s specially created settings.
Lorem Ipsum Text Generator
You’ll probably end up switching back and forth between themes several times as you compare.
If you have questions about how a theme works, consult any documentation that might be available from the theme developer, and check the WordPress.org forums for any discussion of the theme.
Don’t worry about the things you can easily change, like colors and font styles. These can be changed by editing the themes styles.css file. Pay more attention to page layouts and options, as these aspects are more difficult to customize.
If the WordPress theme repository doesn’t have anything to your liking, you’re left with two options: (1) purchase a premium theme, or (2) create your own. The former is by far the simpler option. Premium theme creators are abundant, and themes are priced well below what they should be, considering their quality. These themes come packed with options for customization and unique ways to present content. A fine selection of premium theme creators are listed in chapter 5.
With knowledge of PHP, HTML, and CSS and some research on WordPress’s own template tags, creating a custom theme is not out of reach. Understand, though, that this is quite an undertaking and can become quite an intense project for someone not as well-versed in PHP as in HTML and CSS. An additional option is to purchase a premium theme framework, which, as the name suggests, creates a framework or blank canvas full of WordPress-specific and general theme options, but without the colors, images, and overall branding involved in web design. Chapter 5 also lists some popular frameworks for purchase.
WordPress Codex: Template Tags
Notes
| 1. | “Plugin Directory,” WordPress.org, http://wordpress.org/extend/plugins (accessed Feb. 5, 2011) |
| 2. | Ibid |
| 3. | Chris Coyier and Jeff Starr, Digging into WordPress, version 3.0 (self-published, 2011), 74 |
| 4. | “Free Themes Directory,” WordPress.org, http://wordpress.org/extend/themes (accessed Feb. 5, 2011) |
| 5. | “Free Themes Directory: Tag Filter,” WordPress.org, http://wordpress.org/extend/themes/tag-filter (accessed Feb. 5, 2011) |
Article Categories:
|
|
Refbacks
- There are currently no refbacks.
Published by ALA TechSource, an imprint of the American Library Association.
Copyright Statement | ALA Privacy Policy