Tiling Background Image

Today, let’s tackle your background.

Sure you can use the Design Options and set the background color. And if you’re feeling really adventurous you can even check the box that adds a cool shadow effect to the site. (this keys off your background color to create the shadow effect)

But what about adding a tiling image to your background? This page has a custom tiling background, here’s how you can do it. (you can also do it for a particular post, more on that in a moment)

Enter custom.css – and a little bit of code. (don’t worry, it’s not hard to work with…)

First you’ll need an image to use as your background. Check out this site for generating background patterns: bgpatterns.com (warning this site can be fun and you might find you spent more time there than you intended) and download your background. This site’s backgrounds are nice – because they seamlessly tile to create a background. Small file sizes create really striking looks.

Got your background? Good. You can rename the file to something easier to work with – if you downloaded from the bgpattern site – it will be a randomly generated name beginning with patt_. You’ll need to ftp or upload it to your web server. It belongs in the wp-content/themes/thesis/custom/images folder.

Now for custom.css. Go to the custom file editor in Thesis and you should see the the custom.css file there ready to edit.

Here’s what you’ll paste in:

body.custom  {
  background:#F3F7FB url(images/wpa-clouds.jpg) repeat-x;
}

Now change the name of the image to your background image’s name. That works for all the pages on your site – but what if you want to assign a special background to a particular page? Thesis makes that easy, actually!  For example, say you have a page called “services”. You can apply a different background on this page by using this css, because Thesis adds a css class for each page of your site. (home would be home, contact would be contact, basically whatever you entered in as the page’s name in the permalink or slug field.

body.tiling-background-thesis {
 background:#F3F7FB url(images/patterntile.jpg) repeat;
}

If you wanted to – you could even apply different backgrounds to your category pages of your blog – the classes for these are created like this: cat_categoryname – so if you had a category called Beaches, it would be cat_beaches.

If you decide to apply this to a post, there’s one more step – after you’ve created your style, note what the class name is – that’s the part after the dot. Then edit your post, look in the SEO Details and Additional Style section for the  CSS Class field, add your class there (no dot) and update your post. That’s how I got the different background on this post! Easy!

There’s a lot more customization you can do with this system – but this is one of the simplest and easiest changes you can do to your Thesis site.  Have fun!

I like Thesis by DIYThemes for some of the same reasons I choose to work with WordPress. It’s flexible, yet solid framework. Thesis works with WordPress without messing with the the core WordPress files, this makes updates easier and less likely to cause problems. (plugins and updates of those are another issue)

Thesis as a Framework

Thesis gives you a framework for your site – it’s not like many of the other custom themes that focus more on visuals and less on flexibility. That said, if you find a premium theme you like that works for you, that doesn’t make it a bad choice.

Styling Thesis

Thesis can be styled to look like whatever you’d like to see – between custom css, custom functions and the featured content function/area – you have the ability to put together a design that can run a corporate site, an affiliate site, a product catalog, or even a blog. It doesn’t have to look like a blog. This is one of the questions I get asked over and over again – “will it look bloggy?” No, not if you want something different. You can incorporate the elements of a blog with your site, but not be left with a site whose focus are the blog posts.

SEO is built-in to Thesis, but if you choose to use one of the popular plugins – you can do that too. More on this later.

Installing Thesis

Installing Thesis is pretty standard – as themes go. You upload the Thesis folder into the wp-content/themes folder. Then activate the theme.

When you first install Thesis and visit the options panel, you may see a message about your file permissions. Don’t panic! This is easy to take care of and will allow you to manage many things from your Dashboard.

The easiest way to take care of this – open your ftp client and go to the Thesis folder. You’ll find it here: wp-content/themes/Thesis (or something similar)

Look for the custom-sample folder. First rename this folder to custom.

Now open the custom folder. Change the permission on three files to 666:

• layout.css
• custom.css
• custom_functions.php

That’s it – you’re ready to make changes to settings to Thesis from the Dashboard.

The Thesis Options Dashboard

Let’s look at some of the features of Thesis:

You can control the top Navigation on your site. Add and remove pages. Sub-pages even appear as a drop-down menu. You can add Categories to appear here, and even your own custom links.

You can control how the header, bylines, how the category and other archive pages work, how tagging works, comments (whether or not they’re on pages, etc.) all from the Thesis Options page.

Design Options

From the Design Options page you’ll find Font settings for the various elements on your site, including font sizes and a color picker which makes it really easy to select and choose colors that work with your design.

Something I like a lot: in the Body section of Fonts Colors and More: you can click a box to add a cool shadow effect to your layout – this adds a bit of a shadow effect to your layout – no graphics required. You can also turn off interior borders that appear within the page, no additional css required. Easy!

Site Layout options are also here – you can choose the number of columns and their configuration – what order they appear in and even their width.

You can also modify how post images work and how post thumbnails work on the site. These can be overridden at the individual post/page level too – giving you complete control.

Teasers are something that affect the blogging part of your site – if you’re using Teasers (settings for this found on the Thesis Options page) you can select how they appear and what they contain.

Feature Box – this is a setting that turns “on” the Feature Box – but to use it you’ll need a bit of custom code. Feature Box is an area you can use on just the home page, or on both the home page and blog page or even sitewide.  You can also select where it appears: across the content area, or full width across the top of the content area and columns or even above the header. You use a custom function to insert the content and it can contain any html along with php you’d like. We’ve used this to pull in the featured content slider on a number of sites, but there are a lot of things you can do with this area to make your site stand out.

Multimedia Box: Here’s something a lot of people miss when they look at Thesis and it’s really powerful for how you use your site. The Multimedia Box is a function that is built in to Thesis. Activating it takes just a quick select. You can have it display randomly rotating images, show a video, or show any html you’d like. The cool thing: you can turn it on or off sitewide, AND you still have the ability to configure it on a page/post basis.

What can you use this for? rotating images that change with page load, place a video on your product or service page that explains that product or service, add an opt-in or other call to action, use it for quick news or messages – anything you’d like to highlight. Nearly anything can be placed in this area. Just keep in mind that the size of the Multimedia Box will depend on your columns, column configuration (layout) and the widths of your columns)

Goodness, all this and we haven’t even talked SEO.

SEO and Thesis

Thesis builds in SEO – really built in SEO controls for so many of the options you want and need. Instead of needing another plugin – it’s already there, waiting for you to use it.

On every Page or Post you’ll find the SEO Details and Additional Style section. This section will allow you to completely control your Custom Title Tag, Meta Description and your Meta-Keywords for the page. Hand craft your Titles and Descriptions for the most response.  What if you choose to use a plugin that generates these for you automatically? Not a problem – Thesis will use the plugin instead, so if you’re using All in One SEO – no worries.

What’s New with Thesis?

What’s new in Thesis – 1.7 is in beta at the time of this writing and has some awesome new additions such as the ability to easily include other javascript libraries (jquery or mootools anyone?) This will make doing cool customizations even easier on a page level – since you can load the library you need only where it’s needed not across the entire site. Don’t worry if this is too geeky – it means you get cool stuff on your site and better performance.

Also new are Robots Meta Tags – you can choose these on a page/post basis adding noindex, nofollow, and noarchive as needed.

This review is really only scratching the surface of all that can be done using Thesis with WordPress on your site. I plan to follow with more posts on how to specifics soon! Got a question about Thesis? Let me know! Ready to Get Thesis?

What if you have pages on your site that have child pages and you want to create a sub-menu for those? You’d need to use a plugin to handle it and in many cases do a bit of editing to your theme’s files to get it all to work. Seems like the hard way since those edits would have to be made by hand each time you upgraded…

I got to thinking about the problem and thought that a plugin that could be widgetized could easily be added to a site using Semiologic Pro’s Widget Contexts.

I reviewed a number of plugins that create drop down type css styled menus and the one that I settled on, because it was most flexible and allowed you a lot of control was dTabs.

Here’s how to make the necessary changes to use it with Semiologic Pro. (Sure you could just edit your theme files, but the way I outline below makes it a widget and you don’t have to modify your theme, just add a bit of information to the plugin file)

# added to make a widget for use in
# semiologic pro theme ~ wordpressangel.com
function init_dtabNav(){
  register_sidebar_widget("DTabNavigation", "dtab_list_tabs");
}
add_action("plugins_loaded", "init_dtabNav");
#

It should look something like this:

This change will allow you to add this to Header under Design > Widgets, it will show up as a widget called DTabNavigation.

Install the Plugin

Now you’re ready to install the plugin, upload the entire dtabs folder to your wp-conten/plugins folder then go activate the plugin.

Set Up Your Tabs

• Posts Page: This is your static blog page.
• Front Page: Your home page.
• Post: link to any post
• Page: Add any page on your menu with it’s children listed in the sub menu: be sure to check the box “Show menu on hover?”
• You can also add any Category, Archive, Bookmarks to your menu too.
• If you need to link off to a shopping cart or other non wp url – use other and insert the complete url.

Style Your Menu

Expand the CSS section and set your styling – you can use the default to begin with, then tweak it accordingly.

Save your changes.

Add Your new dTab Widget to your Header

Now you’re ready to add the dTab widget to your Header. To do this, go to Design > Widgets and choose Header as the context you want to work with. Once that’s displayed on the right, click Add next to DTabNavigation to add it. Save your changes and view your site.

Now all that’s left is for you to style it to suit your site’s design. Need help? We love styling menus. (I’m planning to play with this menu and it’s styling, be on the lookout for another post with examples.)

This was tested using WordPress 2.6.2 with Semiologic Pro 5.6.2 and dTabs 1.3

With the latest WordPress and Semiologic Pro updates, a lot of things have moved around, they’re still there, just not in the same place. Here’s a quick rundown on some of the frequently used items, where they are found.

Design > Widgets

This is where the most changes have occurred. Lots of the settings that were previously scattered about and many of the things that used to be handled by custom.php are found here.

When the page loads, you’ll see a section on the right called Current Widgets. This area will show you what widgets are activated by area. When it loads, it will usually show Left Sidebar.

On the left hand side it will show you the available widgets.

To edit a widget’s settings, click edit to expand the options. This is also where the Remove button is, if you want to remove a widget. Update your settings and click Change, then be sure to click Save Changes.

• For the Top Nav Bar: Show Header Widgets, then edit the Nav Menu.
• For the Bottom Nav Bar: Show Footer Widgets, then edit the Nav Menu.

Other settings you’ll be looking for:

• Settings > Reading: Front Page Displays – this is where you set a static page for your home page and your blog page.
• Manage > Pages > Page Order – used to reorder the pages, can be used by section.
• Settings > Google Analytics
• Settings > SEO – I like to use the Append the name of the site to the title of each web page. (you set this under Settings > General)
• Settings > Permalinks – where you set what your links will look like and the get rewrite code you’ll need for your .htaccess

Page Editing:

When you’re editing a page, to change the page’s name you used to look for slug on the right hand sidebar – now it’s at the top under the title, look for Permalink. It will also display what it currently is set to use along with an edit link to change it. Note: this doesn’t show up if you aren’t using .htaccess and redirects. Scroll down and you’ll see all your other page related options.

Page Parent controls how your pages will display in the Silo Page menu system. Only parent pages show, unless you within a particular section.

This Page in Widgets: is very useful. Say you don’t want your home page, blog page, about page to appear in the silo page widget in your sidebar. Edit each of those pages, look for the This Page in Widgets section and click Exclude. This also lets you configure each pages Title and Description that get used in other Widgets.

Page Specific Header: Want a different header image on a page? This is where you upload it.

SEO - Here’s where you can over-ride the entry-specific meta fields. You can specify the Title, Meta Keywords and Meta Description on each page by using this section.

There’s a lot more to this theme, these are just the items that seem to be frequently used when setting up or managing a site. Enjoy!