Tag: wordpress

The blogging engine that could grew up and now runs half the web. (Not an official statistic.) I write, or wrote, about WordPress a lot. You’re soaking in it right now.

Posted on

Dynamic Widget-Based Sidebars for the Thesis Theme for WordPress

It’s not uncommon for a website to want to have different sidebars on different pages, different “sections” of the site. When you use a traditional WordPress theme this is easy to accomplish, just create a new page template and away you go.

The Thesis theme for WordPress doesn’t work like that, you don’t have page templates in the same sense. You can create custom page templates in code, in the custom_functions.php file, but that’s relatively heavyweight for something that seems so simple, just changing the sidebars for certain pages of the site. And if Thesis is so powerful, shouldn’t it be easy?

Continue reading “Dynamic Widget-Based Sidebars for the Thesis Theme for WordPress”

Posted on

Thesis Custom Loop Starter Template

As an addition to my article on How to Use the Thesis Custom Loop API, here is a Custom Loop starter template you can use for your own loops. Every loop you can customize in Thesis 1.8 is stubbed in, and comments before each method provide helpful reference information. All you need to do is replace the one-line stub methods with your own custom loop code. You can delete any loop method you’re not customizing, or leave them in place for the future; they simply apply the appropriate default Thesis loop.

Continue reading “Thesis Custom Loop Starter Template”

Posted on

How to Use the Thesis Custom Loop API

In the latest release of the Thesis theme for WordPress a new feature for advanced theme customization was added called the Thesis Custom Loop API. The Thesis User’s Guide explains the basics of how to use the Custom Loop API. This article expands on that documentation, offering additional context to explain what the Custom Loop API is, what it’s good for, and examples of how to use it.

Wait! There’s more! I’ve written a follow-up to this article, Thesis Custom Loop Starter Template, which provides a complete custom loop class ready for you to customize, along with useful helper methods and additional explanations.

A Bit of WordPress and Thesis Background

To understand what the Thesis Custom Loop is, we need to take a step back, and look at just WordPress. Setting aside plugins for a moment, before the Thesis theme, there was only one way to alter the HTML and contents of your site’s theme: hack away on the theme files themselves. And once you started hacking on your copy of a theme’s files, it became a real challenge to update to a newer version of that theme.

Among other innovations, the Thesis theme made it possible to customize the theme extensively without altering the theme’s files. By isolating theme customizations into a few files in the thesis/custom directory, it became easy, almost trivial to update to newer versions of the theme. (These days child theme functionality is built into WordPress, but it works differently than Thesis, overriding theme files directly, rather than with an API, so it’s not relevant here.)

Thesis achieved this by moving the vast majority of the theme’s code out of standard WordPress theme files and into libraries and classes in the Thesis core code, and weaving into it the Thesis API–the hooks and filters we know and love.

With Thesis, you don’t hack away on the theme files, because there is nothing there. (Check out the thesis/index.php file, it has one line of code.) Instead of altering the HTML and WordPress Loop code directly, you use the hooks and filters to re-order, remove, or alter the various pieces of the Thesis HTML, post content, metadata about those posts (tags, categories, author, etc.), and so on.

What is the Thesis Custom Loop API?

If you have worked with Thesis much, at this point you’re thinking “I know all this, but what does it have to do with the Custom Loop API?”

Standard WordPress theme files don’t merely contain HTML and content tags, they also contain The Loop. The Loop is the heart of WordPress output, and it is how WordPress acquires, processes, and iterates through a set of posts (or pages, etc.) to convert them from database table rows to e.g. your blog’s home page.

When Thesis moved the contents of theme files from the files themselves to functions and classes inside Thesis, it also moved The Loop. While you can use hooks and filters to alter the HTML that Thesis generates when processing The Loop, before Thesis 1.8 there was no (good) way to use anything but a standard WordPress Loop on a Thesis site.

The Thesis Custom Loop API opens that up again. A cynic might say it just returns a built-in WordPress feature that was taken away by earlier versions of Thesis, but actually the Thesis Custom Loop can be a much cleaner way to work with The Loop. We’ll see how in a bit.

Continue reading “How to Use the Thesis Custom Loop API”

Posted on

Use Typekit with the Thesis Theme for WordPress

One of the things that drew me to evaluating and purchasing the Thesis theme for WordPress was the outstanding typography that seemed to be a part of every Thesis site I looked at.

Thesis Font Selection The settings for fonts are simple to use — you choose a single typeface for each option — but behind the scenes, Thesis builds a complete “font stack,” that is, a comprehensive collection of fonts to use, sorted in order of preference. This ensures that your text will look good, no matter what fonts are installed on a viewer’s computer.

For example, when you choose Georgia for your main font, behind the scenes Thesis specifies a series of fonts that are similar to Georgia:

font-family: Georgia, 'Times New Roman', Times, serif;

The variety of typefaces offered by Thesis is somewhat limited, due to the nature of fonts on the web today; there’s only a dozen or so that are “safe” to use, because everyone has them. But recently a few services have come along, which take advantage of new features in modern web browsers to offer more variety in type. Possibly the most “mature” of these (with mature being a relative term) is Typekit. But how do you use Typekit with Thesis, when Thesis only allows you to choose fonts from a pre-defined list?

It turns out that this is quite easy to accomplish. In a nutshell, you treat Typekit as a second custom.css file. There are three simple steps:

Continue reading “Use Typekit with the Thesis Theme for WordPress”

Posted on

Apply Thesis Styles in Print

The Thesis theme for WordPress is arguably the most advanced premium theme for WordPress-driven web sites. It combines fantastic layout flexibility (1-, 2-, and 3-columns, in various arrangements) with strong design customizability (colors for virtually every element are customizable, plus borders, padding, fonts and sizing, etc.) and terrific typography. Out of the box it looks great in all major web browsers, and can be customized wildly to achieve incredible diversity in visual design.

But, oddly, printing pages from a Thesis-based site will often remind you of how the web looked in 1996. That’s because by default the Thesis theme applies its styling only to on-screen display. Printing is entirely unstyled:

Thesis on-screen vs. printed

The gory details of the how and why are in a DIYThemes forum posting I made a couple days ago, Thesis prints unstyled by default. This is not good. Fortunately, it is possible to extend Thesis with PHP code, in ways that most themes would never dream of, and this gives us options for better printing.

The beginning of a solution is to add a stylesheet for print; the recommended placement is in thesis/custom/print.css. Then you add the link tag to your site via a hook function in your custom_functions.php file:

function add_print_stylesheet() {
    echo "\n";
    echo '<link rel="stylesheet" href="' . THESIS_CUSTOM_FOLDER . 
         '/print.css" type="text/css" media="print" />';
    echo "\n";
}
add_action('wp_head', 'add_print_stylesheet');

Now you have an active, but empty, print.css stylesheet. You still have unstyled content when you print. What’s next?

There are two approaches you can take:

  • Create a new print.css stylesheet from scratch, adding only the minimum styling required to make printouts look the way you want. Ultimately, this can produce the best results.
  • Import the on-screen stylesheets into the print stylesheet, and then add further additions, customizations, and overrides from there.

The second option will result in printouts looking exactly like your site does in a web browser. For some kinds of content this will not be ideal, but for most pages it’s better than being completely unstyled when printed, and it is a lot easier than writing a new stylesheet from scratch. If you’re looking for the quickest way to get to “pretty good,” this is the way to go.

To do it, put this in your print.css file:

@import url("../style.css") print;
@import url("layout.css") print;
@import url("custom.css") print;
#sidebars {
    display: none;
}

The #sidebars block removes your sidebars when printing. This is what most sites will want to do, but if you don’t, just delete lines 5-7.

Posted on

Make Your WordPress Blog Appear in a Non-Root Folder

The Aldosoft site is a mostly static content site, with a few pages describing who we are and what we do. When I started working on the redesign for the site, one of the main things I wanted to add was a blog for, well, articles like this one.

It’s pretty easy to use WordPress to build an entirely static content site, based on Pages. This is what the old Aldosoft site did. The setting for changing the Home page from a list of Posts to a static Page is easy to find, and obvious in use.

Putting a blog onto the site, “pushed off” the home page to a section at the same level as other pages of the site, is not so obvious. There’s a number of different settings which seem relevant, but how they all fit together is not clear. The documentation in the WordPress Codex (from which the title of this post is taken) is not written with the latest version of WordPress in mind, and makes it seem more complicated than it actually is.

Various Google searches turned up more semi-obsolete, incomplete, or just plain wrong answers. (Any article that says you need to add new files to your theme is outdated, at least for WordPress 2.8+ installations.) This article documents the simplest approach required to build a site like this one, a basic mostly-static WordPress site, where the blog is not the focus of the home page, but pushed down to the same secondary level as all the other pages.

Continue reading “Make Your WordPress Blog Appear in a Non-Root Folder”