One of the questions I get a lot is what will it take to make my blog look like my site or less like a blog (or both).

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!

Why Thesis? I’ve been using Thesis on my own site’s and on client sites for quite some time. (This site uses Thesis!) So what do I like about it?

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?

Did you know you can use named anchors within your pages to break up your content and make it easier for users to find what they’re looking for more quickly? Google is now using these named anchors and including these links within some search results.

Google is generating these links automatically based on your page structure – you have to have them to get these links. They’re easy to add, but there are a few things you’ll want to do to increase the chance that yours will be picked up.

Make sure your long pages with multiple topics are structured properly. What does this mean? It means use the H1 tag for the main heading, H2 for the main sections, H3 for sub-sections and so on.  Then be sure to include a table of contents that links to the named anchors in the document. This can be a simple bulleted list with the links to the appropriate section of the document.

Example: Creating Named Anchors

Here’s an example right here on this site. We’ve added the anchors and table of contents to our FAQ page.  Here is a step by step on how to add them:  (we’ll assume your page is already using a solid structure with Hx tags and such)

First: Add your anchors.

<a name="why_wordpress"></a>

Place this at the point the section starts, this is where the link in your table of contents will “jump” to when clicked.

Now link your table of contents list to the named anchors you created.

<a href="#why_wordpress">Why WordPress?</a>

Repeat for each item in your table of contents and page.  It takes a bit of extra work, but it’s worth it!

This just out, latest nasty attack aimed at self hosted WordPress:

Mashable on the Attack

How to know if you’ve been affected:

• In your permalinks, look for additions that looks like:
  ...eval(base64_decode...
• Also check your users, you may have an additional admin user – look for one you don’t recognize.

Read more details at Lorelle’s blog: Old Versions of WordPress Under Attack. There’s also detailed instructions on how to recover if you’ve been attacked and hacked.

If you haven’t, check your site and upgrade now!

Latest version of WordPress

NextGen Gallery is a plugin for WordPress that allows you to display images in Albums and Galleries. Albums contain groups of Galleries. Galleries contain groups of images.

For example: if you wanted to display your images of fishing trips to Alaska over the last several years, you’d have an Album for Alaska, and Galleries for the years. Or say you visit Disney World, you could have an Album for Disney, then include a Gallery for each of the parks: Magic Kingdom, Epcot, Studios, Animal Kingdom. Once you understand how things are organized, it’s easy.

On your settings, under Gallery, uncheck the Deactivate gallery page link – this will allow the system to use your pages as you’ve named them, not with the generic gallery naming – it’s just more friendly.

Adding images to a Gallery:

First have the pictures you’d like to add in a zip file. These will be organized into a Gallery. The zip file’s maximum size will depend on your hosting configuration. You can see this by going to Gallery > Overview and looking for PHP Max Upload Size. This is the easiest way to get images to the server since many non-technical folks have trouble with ftp clients and where things should go on the server.

Creating a Gallery and Uploading images:

To add a new Gallery: Go to Add Gallery / Images. You’ll see a tabbed interface with several choices.

Click the Upload a Zip-File tab at the top.
Browse to find your zip file on your computer.
Choose “a new gallery” if this is a new gallery, or choose the gallery you’d like to add the images to.

Click Start Upload.

This does several things: it will upload the zip file, unzip the images onto the server and enter them into the system where you can add descriptions etc. Thumbnails are also automatically created, too.

To work with your new Gallery: Go to Manage Gallery.

This shows a list of all of your galleries. You can click the link to edit or work with the individual images.

On this page you can edit the Alt and Title text for the images, tag them with keywords, remove them or exclude them from showing. This area will also allow you to move individual or groups of images to other Galleries if you need to move them. (you don’t have to re-upload)

This is also where you can assign a page to display this Gallery. Recommend using the Create a Page and selecting the Parent page for the new page to be listed under. Example: Call a page Magic Kingdom 2009 and Select Disney World as the parent. Then you can use the NextGen button (which is added to your visual editor) to add the short code for the gallery. This is nice because you can add more information and detail to the page, then display the album & galleries, to tell the whole story.

Once you’ve added your Gallery, go back to Manage Albums and add the Gallery to the appropriate Album. This will update the pages so they show the thumbnails and images.

Once you’ve gotten images added to Galleries, you can add the Gallery Widget to your sidebar. This will automatically display a number of random images in your sidebar from your Galleries.  You can control which Galleries are included and how many images to show. It’s a great way to add interest to your site.

This is just a quick overview of some of the plugin’s features,  for a more detailed look, David Potter has a NextGen Review that covers everything in minute detail.

If you’ve recently upgraded to WordPress 2.8.3, you’ll want to head over to WordPress.org and download the latest update and upgrade your install to 2.8.4. There is a security exploit that allows someone to remotely change your admin password through a special url that’s formed in the right way. It basically removes the current password, replaces it with a newly generated one and no confirmation via e-mail is required.

Highly recommend you take care of this one pronto, before the script-kiddies and other “bad guys” find you or you might just find yourself locked out. Not cool.

Color schemes aren’t technical, really, are they? You just pick what you like, right? Ah, not so fast. Color choice on your site can make or break how your site is received by it’s audience. Clash and you’ll drive visitors away with a headache from trying to read your red text on a blue background.

What you can do: use a color scheme tool to test drive your color combination. These online tools make it easy (and fun) to try out all sorts of combinations. Some allow you to use an image as the basis for your scheme, others let you play with variations of colors, the color wheel and more.

Here’s 5 color scheme tools to help you generate a color palette for your site:

ColorHunter

Get a color palette based on an image upload or image url – or just browse those already uploaded. This one is fun to play with and I really like how it picks the colors out of the image.

Kuler by Adobe

Adobe’s online tool for color. Fun to browse through other’s submissions. View by most popular, highest rated, or random. You can download these palettes, for use in Adobe CS2 & CS3.

Colr.org

pick a color scheme from selections from images found on flickr, your own uploaded image or colors from specific websites. You pick from the colors found within the image.

Color Palette Generator at CSSdrive

Generate from an image. Upload an image and this tool generates several color schemes: light, medium, dark and a complete color selection.

Color Scheme Designer

Love this, choose a color and you can preview a page example – a complete mockup page using either a light or dark background.

Color influences mood and sends a message, tells a story – and if your story being told by your color choice doesn’t match up with what you’re trying to accomplish on your site – well you just made your job that much harder. Color symbolism is a huge subject on it’s own, we’ll leave that subject for another day.

Once you’ve pinned down your color scheme – then you can provide those colors to your web designer or plug them into your css yourself. Have fun exploring colors!

WordPress is simple to use, can be complex behind the scenes – there are so many variables that can cause issues – these are some of the most common.

Sooner or later, you’re bound to run into this situation: you go to your site, prepared to make a post or update a widget and you know everything was fine when you last logged in yesterday – and yet you get some error: you see the install wordpress screen (aack!) or you see some odd php like error, but no site, or maybe you catch a database connection error…. now what?

• Grab a new backup of the database and files. this step is especially important if you don’t have a regular backup of things on your site. to do this, first grab the database: you’ll do this via your hosting control panel – look for phpmyadmin and download all the tables in the database that your wordpress install uses.
• then using your ftp client, backup all the files that make wordpress go. this will also include the uploads folder which includes all the stuff you’ve uploaded to use in posts on your site, like images, possible video, pdf files, etc.

In some cases, your hosting Control Panel will have a backup everything (all files and databases) you can use this too, the important thing is that you have a complete backup.

Now: take a deep breath and get ready to answer some questions about your site, and be honest.

What was the last thing you did on the site? were you installing a plugin, were you trying to upgrade wordpress, were you updating a theme, were you installing a theme? Be honest – I can’t tell you how many sites i’ve worked on where they swear they hadn’t done a thing – and it turns out that an upgrade process went wrong or a theme wasn’t completely uploaded.

Were you upgrading wordpress? if yes, then did it finish as expected or did you get an error of some type part way through: if you didn’t get a specific error, did you get a blank screen?

What you can try:  re-upload the same version of wordpress – manually via ftp. if you get another blank screen, these usually indicate a memory issue – you can verify this through use of your error_log files. If it’s a memory error, it will show up there. What this means:  your hostng account isn’t allocated enough memory to run whatever part of the upgrade process it was in when the error occurred. sometimes this can be manually corrected, in other cases, you may need to upgrade your hosting or try the upgrade when the server is less busy.

If you were installing a new theme – make sure all the files were uploaded to the right place. Themes go in the wp-content/themes/yourthemename folder or directory. If the files aren’t all there, then reupload them – and try to activate the theme again. If that still doesn’t work, delete the new theme and let the site go back to the default theme, then try it again. Some themes may not work with the newer versions of WordPress.

Sometimes a newly installed plugin won’t play nice – if you can’t get to wordpress admin to disable it – ftp in and delete that plugins directory and all files – wordpress will automatically deactivate any plugins it can’t locate.

If you’re still stuck, get help from your webmaster or give WordPress Angel a call. Good luck!

A question came up about getting a css multi level dropdown type menu on a Wordpress site using the Semiologic Pro theme. If you use Semiologic Pro, you know that it has a nav bar you can use in the header, but it’s a single level menu, no drop downs, just simple links. Nice, but what if you want something a little fancier, a bit more like a cms or don’t want to use a sidebar for your navigation?

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

Rae Hoffman conceived the plugin which was created by Joost de Valk, Wordpress Plugin Expert.

The CYC plugin allows your registered backend users see your branding and design on the login and profile pages. It will apply your theme to the following: registration, login, logout, lost password and profile pages. This only happens for users who are do not have editing capabilities ie. Subscribers- just for those folks who login to comment. Users who are admins, editors, etc. are not affected and will still see the usual Wordpress login and admin pages. The CYC plugin will automatically direct Subscribers who login to their profile page.

Installation was a snap, unzip and upload the plugins folder to your wp-content/plugins directory. Then activate it and you’re ready to begin using it.

Some customization may be needed to work with your theme, this varies according to the theme you’re using. You’ll want to be familiar with html, css, and be able to recognize a bit of php in order to tackle this. There is an admin settings page to make the needed changes. This plugin is all set to work with the Thesis theme.

I’ve tested it and there are still some things to work out. I was able to install and activate the plugin without error. Some customization tweaks are needed to make it play well together. Some notes on my findings:

• My Semiologic Pro skin and it’s customizations to style were shown, however the header graphic and footer area were missing.
• The sidebars were a bit out of place, with one sidebar being pushed below the content. This can be fixed with some styling tweaks.
• Had to turn off the semiologic pro meta function, just for the profile page – it generated an error when trying to make the meta keyword tag for that page. Not a big deal, and a small bit of code got rid of the error. However, I’m not crazy about mucking about in the Semiologic plugin files. There may be an easier way to do it – but I haven’t had a chance to play with it.

So, if you’re using Semiologic Pro and want this functionality – you’ve got some work ahead of you. With other themes that are less involved, you’ll probably be just fine. All in all, Customize Your Community is a really useful plugin for extending your brand.Customize Your Community (CYC) Wordpress Plugin