Got some spare time this week-end?

Here's how you could make a few bucks.

Semiologic Theme and CMS

The Semiologic theme is much more than a simple WordPress theme. It is an internet marketing website building framework that was designed with ease of use in mind.

The theme's collection of features are configurable by easy to use admininstration interfaces. And in the event where these don't cover your entire needs, the theme's pluginable nature allows for ultimate customizability.

Default Usage

Customizing The Layout, Font And Skin

Under Presentation / Layout, Presentation / Font, and Presentation / Skin, you'll find an entire collection of layout, font and skin options for you to choose from when you initially set up your site.

From a canvas perspective, the layout options cover the most commonly sought for design patterns.

The skins are sometimes tweaked from a version to the next — be so kind to report browser quirk when you spot any.

You can of course override all of these options by creating your own skin, or by taking advantage of the theme's custom.css feature (see below).

Customizing The Page Elements

As a rule, page elements only appear when the relevant feature or functionality is active.

Comment links and forms, for instance, only show if you allow comments. Likewise, you won't see any trackback link unless you allow pings. Both of these are configurable on an individual post basis under its "Discussion" options. Or globally for new posts under Options / Writing.

Other page elements are available for (mass-) activation under Presentation / Features:

These include commonly sought page elements, including author images, related searches, related tags, related posts, and social bookmarking.

The most frequently asked question resolves around replacing the email link. Please mark these words before asking: You do NOT want a form that lets visitors send emails to their friends. The reason? Simple: Such a form will let spammers use your server to mass-mail viagra links. This can get you blacklisted.

Customizing The Header

The various headers under Presentation / Headers are inserted as background images, i.e. your site's name and tagline will appear on top of them. To extend this list, drop additional files into the theme's headers folder:


More streamlined options are available to you if you drop a file into your theme's folder:


When you drop a header.jpg file in this folder, the image will automagically replace your site's name. This is the easiest means to insert a logo, for instance.

When you drop a header-background.jpg file in this folder, the image will automagically be used in place of the header.

When you drop a header.swf file in this folder, the flash file will automagically be used in place of the header.

The two header image features also work with .jpeg, .gif and .png file formats. And the three features also work when you drop the files into the skin or the headers folder instead.

Keep in mind that file names and extensions are case sensitive.

Customizing The Navigation Menu

A navigation menu manager under Presentation / Nav Menus lets you insert arbitrary navigation links to your site.

The menu editor has two columns, labeled Menu Item and Smart Reference.

The menu item is whichever text you'd like to see in the navigation menu. It is used as a smart reference if you leave that field blank.

The smart reference can either be text or an arbitrary url. If you enter text in this field, the theme will do its best to locate the relevant piece of information among your site's static pages (Write / Page) with no parent, and among your non-empty categories.

Note that the theme silences menu items when it finds nothing to link to. In particular, the prepopulated menu items (Blog, About, Contact, and Archives) will appear as soon as you create the relevant category or page.

Customizing The Sidebars

The Semiologic theme makes use of WordPress widgets.

If these are disabled sidebar widgets on your site for any reason, start by activating Sidebar Widgets under Presentation / Features.

With sidebar widgets enabled, you can arrange your sidebars as you see fit using drag and drop under Presentation / Sidebar Widgets:

Almost all widgets are configurable in a way or another. To access a widget's control panel, clicking the option button to the right of their name. To hide a widget's control panel, click the close button to the top right of the panel.

DO NOT FORGET TO SAVE when you rearrange your sidebars or reconfigure your widgets!

Widgets will not always appear immediately. A few, such as the newsletter widget, need to be configured first. Others need data to work on. The Calendar, for instance, expect a post. The sidebar ad widget expects ad code.

Customizing The Captions

The copyright notice and almost every other front end caption is editable under Presentation / Captions:

You can insert some html in captions.

Customizing The Footer

The footer editor under Presentation / Footer lets you insert arbitrary html without editing a php file:

In particular, and with the proper permissions, you can insert javascripts.

Using The Advanced Templates

The Semiologic theme features a few special page templates. To use any of them, create a static page (Write / Page) and change its Page Template:

The Archives Template will replace the entry's content with an archive that makes your site's posts, and pages with the article template, reachable in two clicks.

If you create a category called "Highlights", posts within it will be highlighted in the archives.

The Article Template is useful if you feel like running an article site rather than a blog. In particular, static pages can have parents.

The Monocolumn Template strips your page of all its sidebars, except the external one. This is useful to write about a product with a huge picture, for instance.

The Links Template outputs the material within your WordPress Link manager. You can manage your links under Links / Manage Links.

The Sell Page Template is the commonly found sell letter template. The template gets rid of much everything except the main column. To put up a proper squeeze page on your site, use it on a static front page, with a subscription form for an autoresponder.

The Stand Alone Template is just here as reference material. Use it as a sample file if you need to integrate a third party component.

Inserting Advertisements

Ad Spaces is a very streamlined advertisement manager that is fully integrated with the Semiologic theme.

When active, Ad Spaces adds an extra admin screen, under Presentation / Ad Spaces. From this screen, you can insert inline ads for later use in your theme. You can also make advertisements appear in arbitrary hot spots on your site.

Advanced Usage

Getting Quickly Started With Semiologic Theme Wizards

The wizard API certainly counts among the sexier Semiologic Pro theme features.

Two built-in wizards, in particular, are of immense value if you're running more than one site.

The autoinstaller wizard is run in the background when the initially activate the Semiologic theme. On new sites, it flushes your WordPress install of the default junk (first post, blogroll, etc.), activates features and configures the site for SEO best practices, and automatically populates your sidebars with a few widgets.

The clone wizard is even more useful, at later stages. Start by setting up the site that you'd like to copy. Next, log into another site and enter the details of the site that you'd like to copy. Let the clone script do the rest: It'll import your WordPress preferences, presentation preferences, Ad Spaces preferences, and your use's preferences.

Overriding And Extending The Theme's Look And Feel

Of interest to designers is the Semiologic theme's pluginable nature. This allows to override and extend the theme's look and feel.

To start with, you can create additional skins. These are automatically detected, so the easiest way to get started is to copy and rename one of those in the skins folder:


If the default skins are a suitable starting point for you, overriding the default CSS is a matter of dropping a custom.css file into your theme's folder:


The file will automatically be inserted after the theme's CSS is loaded.

Likewise, a custom.php file lets you override the theme's php entirely.

By taking advantage of these two features, you won't need to worry about loosing your customizations during updates, since they'll be stored in a file that won't ever get overwritten.

The custom.css and the custom.php features also work when these files are dropped into your skin's folder.

You'll find detailed sample files for both of these features in the custom-samples folder:


A CSS or a php tutorials are out scope for this page. But there's plenty of resources on the web.

Frequently Asked Questions

The Sidebar Is Knocked Down!

This sometimes happens with CSS-based layouts.

More often than not, it will occur because one of your posts has an HTML error in it. Typically, this will be an unclosed <div> tag. Identify the post that is causing problems by visiting them one by one, edit it, click the source button, and remove all occurrences of <div (...)> and </div>.

If your content is fine, it may be one of your sidebars that contains content (usually a javascript) that is styled in such a way that it overrides the default behavior, which is to hide overflows. Either remove this content, or enclose it within something like:

<div style="width: 175px; overflow: hidden;">
your content goes here

It may also be that you've been messing around with CSS widths, paddings and margins. Rollback your custom width unless you know exactly what you're doing. And use something like the following to set the margins:

#main div.pad,
#sidebar div.pad,
#sidebar2 div.pad,
#ext_sidebar div.pad
  padding: 0px 20px;

Importing Your CSS Customizations From Semiologic v.3.x

For the most part, keeping your CSS customizations is a find/replace away. The CSS class names have changed from post to entry, i.e. .entry instead of .post, .entry_header instead of .post_header, and so on.

For your remaining changes, you'll find lots of useful details in the custom.css sample file which is in the custom-samples folder.


The Semiologic community forum is the best place to mention your issue.

Please note, before posting, that while a few community members and myself do our best to leave no support-related question unanswered, I am for hire as a rule of thumb.

Update Notifications

Subscribing to the Semiologic blog or to the Semiologic newsletter is the best way to receive update notifications.

Sign up to receive an occasional newsletter with insider tips, and irresistable offers.

Manual Installation

To manually install this software, download the zip and upload its contents into your themes folder, i.e.:

Then, activate the theme in your site's admin area.


Spread the word Digg Furl Reddit Help

Permalink • Print
Made with WordPress and a healthy dose of Semiologic • Sky Gold skin by Denis de Bernardy