How to Add a Background Image to Your WordPress Site

Perhaps one of the easiest ways to make your site look unique, even if you’re using a popular and well-worn theme, is to add a background image. Your header and your background are two graphical components that your visitors will definitely take note of if they’re strong.

The problem with background images, however, is that many themes still do not provide an easy way to add them or change them. And so in this tutorial, we will go over how to manually add a background image and control it with CSS.

The default TwentyEleven theme does indeed provide an easy way to add a background image in the Admin section (Appearance > Background); however, in this tutorial we’ll go through the steps for adding an image manually to TwentyEleven. The steps involved for other themes will be nearly identical; however, you may find some slight differences in your CSS file (style.css).

Step-by-Step Tutorial for Changing Your Background

Starting with the default WordPress TwentyEleven theme, I want to change the background of the site from gray to a blue background image with a white glowing center.

This is a small version of my blue background image.

Getting Your Image and Uploading It

Depending on what your background image will be, you will need to decide whether you want it to repeat itself on the page or not. In this tutorial, I don’t want my image to repeat itself. I just want it to sit behind the content portion of the site and have the “glow” peek around the edges.

Because I’m not repeating my image, I make it large enough so that it will peek around the edges, and then I upload it to the images folder in the TwentyEleven folder on my server:

wp-content > themes > twentyeleven > images

Call Your Image with CSS

Now that I’ve got my image uploaded, I need to find the section in my CSS (style.css) file that controls the background for the site.

Appearance > Editor > Stylesheet (style.css)

What you are looking for here is the “background” selector for the entire site. If you search for “background” in your CSS file, there’s a good chance you will find more than one (there may be a background defined for a sidebar, for example, or for a number of other things).

In the TwentyEleven theme, there is a section conveniently labeled “Global.” And under that, we find a background selector for the “body” section.

Now that I’ve found the section for the background, I’m going to call in my image. We will need to make a few adjustments after we do this, but I will go through this step by step to show how making these adjustments changes things.

Here is the code I add to call my background image (which is blue-glow.gif):

background-image: url(images/blue-glow.gif);

(Remember that I put the image in the images folder of my theme – that’s why I can just use image/blue-glow.gif to call the image.)

So this is what my CSS looks like at this point:

body {
 background: #e2e2e2;
 background-image: url(images/blue-glow.gif);
 }

With that CSS, this is what my site looks like. (I have increased the perspective here to get a better picture of what’s really going on with my background.)

As you can see, the background is repeating. But that’s not what I want, so I will need to add values to my stylesheet in order to control that, and so I add the following “no-repeat value”:

background-repeat: no-repeat;

And so now my complete background CSS looks like this:

body {
background: #e2e2e2;
background-image: url(images/blue-glow.gif);
background-repeat: no-repeat;
}

When I look at my site, everything seems to look all right, but when I enlarge the perspective or I scroll down the site to make sure, I see that things aren’t quite right. I can see that the image eventually ends and the original gray background takes over. In addition, while it might look all right on the sides of the site, if someone has a wider view than me, they may see the image ending on the sides as well.

In order to fix these issues, we’ll need to change a few more things.

As you can see above, the background image is actually aligned to the left. It may look OK in your browser, but it may not look OK for everyone, so we’ll want to align the image to be in the center of the screen and aligned on the top.

To do that, I add the following CSS:

background-position: top center;

That solves the potential alignment problem, but I still have the issue of the image ending and everything suddenly changing to original gray background.

In order to solve this problem, I simply change the original background color from gray to the shade of blue that my image eventually bleeds into at its edges.

The original color was #e2e2e2, and so I change that to my custom color: #6B8CC2.

And so now my complete CSS section for the body background looks like this:

body {
background: #6B8CC2;
background-image: url(images/blue-glow.gif);
background-repeat: no-repeat;
background-position: top center;
}

And when I look at the result, everything looks as it should. No matter how much I zoom out to get perspective, everything still looks fine.

Making Backgrounds Work for Your Specific Situation

As you can see, controlling your image with CSS is the most important element in getting your background to look the way you want it to. Because there are so many different things you can do with background images, and so many different situations, the tutorial above may not fit your needs exactly. However, it should give you some basics to start with, and from there you can search out the appropriate CSS for your site.

One of the more popular places to get CSS info is from W3Schools.com (here is their section on backgrounds).

Photo: Vector Website Design Template from BigStock

How to Add a Background Image to Your WordPress Site

Perhaps one of the easiest ways to make your site look unique, even if you’re using a popular and well-worn theme, is to add a background image. Your header and your background are two graphical components that your visitors will definitely take note of if they’re strong.

The problem with background images, however, is that many themes still do not provide an easy way to add them or change them. And so in this tutorial, we will go over how to manually add a background image and control it with CSS.

The default TwentyEleven theme does indeed provide an easy way to add a background image in the Admin section (Appearance > Background); however, in this tutorial we’ll go through the steps for adding an image manually to TwentyEleven. The steps involved for other themes will be nearly identical; however, you may find some slight differences in your CSS file (style.css).

Step-by-Step Tutorial for Changing Your Background

Starting with the default WordPress TwentyEleven theme, I want to change the background of the site from gray to a blue background image with a white glowing center.

This is a small version of my blue background image.

Getting Your Image and Uploading It

Depending on what your background image will be, you will need to decide whether you want it to repeat itself on the page or not. In this tutorial, I don’t want my image to repeat itself. I just want it to sit behind the content portion of the site and have the “glow” peek around the edges.

Because I’m not repeating my image, I make it large enough so that it will peek around the edges, and then I upload it to the images folder in the TwentyEleven folder on my server:

wp-content > themes > twentyeleven > images

Call Your Image with CSS

Now that I’ve got my image uploaded, I need to find the section in my CSS (style.css) file that controls the background for the site.

Appearance > Editor > Stylesheet (style.css)

What you are looking for here is the “background” selector for the entire site. If you search for “background” in your CSS file, there’s a good chance you will find more than one (there may be a background defined for a sidebar, for example, or for a number of other things).

In the TwentyEleven theme, there is a section conveniently labeled “Global.” And under that, we find a background selector for the “body” section.

Now that I’ve found the section for the background, I’m going to call in my image. We will need to make a few adjustments after we do this, but I will go through this step by step to show how making these adjustments changes things.

Here is the code I add to call my background image (which is blue-glow.gif):

background-image: url(images/blue-glow.gif);

(Remember that I put the image in the images folder of my theme – that’s why I can just use image/blue-glow.gif to call the image.)

So this is what my CSS looks like at this point:

body {
 background: #e2e2e2;
 background-image: url(images/blue-glow.gif);
 }

With that CSS, this is what my site looks like. (I have increased the perspective here to get a better picture of what’s really going on with my background.)

As you can see, the background is repeating. But that’s not what I want, so I will need to add values to my stylesheet in order to control that, and so I add the following “no-repeat value”:

background-repeat: no-repeat;

And so now my complete background CSS looks like this:

body {
background: #e2e2e2;
background-image: url(images/blue-glow.gif);
background-repeat: no-repeat;
}

When I look at my site, everything seems to look all right, but when I enlarge the perspective or I scroll down the site to make sure, I see that things aren’t quite right. I can see that the image eventually ends and the original gray background takes over. In addition, while it might look all right on the sides of the site, if someone has a wider view than me, they may see the image ending on the sides as well.

In order to fix these issues, we’ll need to change a few more things.

As you can see above, the background image is actually aligned to the left. It may look OK in your browser, but it may not look OK for everyone, so we’ll want to align the image to be in the center of the screen and aligned on the top.

To do that, I add the following CSS:

background-position: top center;

That solves the potential alignment problem, but I still have the issue of the image ending and everything suddenly changing to original gray background.

In order to solve this problem, I simply change the original background color from gray to the shade of blue that my image eventually bleeds into at its edges.

The original color was #e2e2e2, and so I change that to my custom color: #6B8CC2.

And so now my complete CSS section for the body background looks like this:

body {
background: #6B8CC2;
background-image: url(images/blue-glow.gif);
background-repeat: no-repeat;
background-position: top center;
}

And when I look at the result, everything looks as it should. No matter how much I zoom out to get perspective, everything still looks fine.

Making Backgrounds Work for Your Specific Situation

As you can see, controlling your image with CSS is the most important element in getting your background to look the way you want it to. Because there are so many different things you can do with background images, and so many different situations, the tutorial above may not fit your needs exactly. However, it should give you some basics to start with, and from there you can search out the appropriate CSS for your site.

One of the more popular places to get CSS info is from W3Schools.com (here is their section on backgrounds).

Photo: Vector Website Design Template from BigStock

How to Find Out Which Plugins are Slowing Down Your WordPress Site

It’s easy to tell if your site has performance issues. A sluggish website is oftentimes a sign of plugins that are misconfigured or demanding a lot of resources. However, for the average WordPress user it can be difficult to diagnose the root cause of a poorly performing website.

A new free tool called P3 (Plugin Performance Profiler) aims to help WordPress users to scan their own sites to find out which plugins are causing a slow performance. It measures the impact your plugins are having on your site’s load time.

How does it work?

After you install the plugin, you’ll need to go to its settings page and start the scan. The scan takes a few minutes, but it’s very thorough. During the process the scanner generates some traffic on your site and monitors your site’s performance on the server. Once the scan is finished, click “View Results” and from there you can figure out your next move, based on what you find.

Click on each of the tabs to view different charts, measuring the runtime, timelines and query numbers for your site. You can get a detailed breakdown which will help you visualize which plugins are slowing your site down the most.

The Detailed Timeline
The detailed timeline features a breakdown of how your pages are loaded, including:

• Timing information for every plugin
• Timing information for your theme
• Timing information for the WordPress core

Some plugins only run on certain pages. If you want to profile a specific link on your site, you can select “Manual Scan” and then visit that link. If you want to profile the admin dashboard, click the “X” in the top right of the scan window in order to be returned to your admin area.

What to do with the results…

One cool features of this plugin is that you can email the results to yourself, your developer or hosting support team. This can be very helpful for steering your support professional in the right direction for understanding the source of your site’s performance issues. I believe that Godaddy built this in order to help their customers and support staff work together to pinpoint issues with WordPress sites more accurately.

If your site has slowed to a crawl, it’s probably a good idea to run the P3 scanner to determine if it’s one of your plugins. You can shut the offending plugin(s) down if necessary and get in touch with the developer to find a better way to configure it or perhaps select a different plugin option for your site.

P3 has an extensive help section which details possible things that could interfere with the accuracy of the scan, other possible causes of slowness besides plugins, and many other FAQs. The plugin’s glossary of terms at the end of the help section will help you to interpret the results from your scan if you don’t know what the numbers are telling you.

P3 (Plugin Performance Profiler) is available for free from the WordPress plugin repository. It’s one of those tools you’ll want to bookmark for future reference. Try it out on your site today and find out how easy it is to track down the plugins that are slowing your site down.

Daily Tip: Add Call to Action Buttons to WordPress Posts with a Shortcode

Do you need some quick, nice-looking download, demo or call-to-action buttons on your WordPress site? Easy Shortcode Buttons makes a collection of beautiful buttons conveniently available to you inside the WordPress post editor. No coding is required for adding the buttons.

Easy Shortcode Buttons includes 6 colors, 3 styles and 2 sizes to suit your button needs. They are lightweight buttons, created with CSS3, making them very easy to customize.

If you want to define your own custom buttons, check out the quick tutorial on the plugin’s homepage. Download Easy Shortcode Buttons for free from the WordPress plugin repository.

5 WordPress Goal Tracking Plugins to Keep You Motivated

Have you broken your New Year’s resolutions yet?

No? Not yet?

That’s good to hear. But as the year progresses, it may be harder and harder to stay so steadfast. One thing that can help is public accountability. Announce your goal to the world, and then track your progress for all to see.

Tracking goal progress, it’s been found, can often be as much or more of a motivator than simply keeping your eye on the prize. Looking at what you’ve already accomplished can help you build confidence for the road ahead.

These five plugins can help you do that. Some of these plugins were not designed for personal goal tracking, per se, but most are flexible enough to be used for any type of goal tracking.

1. ProgPress (DOWNLOAD HERE)

The ProgPress plugin allows you to put simple progress meters in various places on your site (including in a text widget) via shortcodes.

An example of a shortcode for these meters might look like this:

[progpress title="My Project" goal="10000" current="1234"]

Although not fancy, it’s certainly easy enough, and it may be all you need. You can also have as many different meters as you like: just insert a new shortcode.

2.  Donate Goal ()

Donate Goal is a very clever plugin that tracks your goals by using custom images you make yourself. You simply make an image that represents the beginning stage and then a similar but “filled in” image that represents the goal-reached stage. The plugin then graphically tracks your progress toward your goal.

Take a look at a graphic that the Donate Goal Plugin uses as an example.

Although this plugin is billed as one to track donations, it doesn’t need to be limited to that. It could be set up to track all sorts of goals.

To give a quick example, I set up a system to track books read. I set the goal to read four books a month.

I then made a beginning stage graphic where none of the four books had a check mark.

Then I made a goal-reached graphic where all four books had a check mark.

In the plugin settings, I said I had read two books this month. The plugin automatically manipulated my images to show that I was halfway to my goal.

Here’s a look at the settings.

3. TDD Progress Bar (DOWNLOAD HERE)

The TDD Progress Bar plugin lets you create colorful and animated progress meters based on percentage of goal completed. You can easily set up a number of bars and then place them where you like with shortcodes.

4. Our Progress (DOWNLOAD HERE)

The Our Progress plugin tracks money goals with a various thermometer graphics. Unlike other plugins here, it cannot easily be used for multiple purposes. Because of the way it’s set up, it’s pretty much a money-tracking meter only. That said, it does its job simply with nice graphics. It is widget-based.

5. Dave’s Whizmatronic Widgulating Calibrational Scribometer (DOWNLOAD HERE)

This widget-based plugin was set up to track writing goals, and it can do that easily enough; however, it is has the flexibility to be converted for other uses.

Photo: Fundraiser Thermometer from BigStock

Literature Review: ‘WordPress 3.3 User Guide’ by Interconnect IT

With WordPress 3.3 now in full swing, authors and publishers are busy upgrading the multitude of guidebooks and manuals out there, to accommodate the latest version of the software.

This year we’ll be trying to review as much WordPress literature as we can, and we welcome suggestions from the community on any good resources that we’ve haven’t covered yet.

Today we’ve got our hands on a manual entitled the ‘WordPress 3.3 User Guide’, put together by Interconnect IT, a UK-based WordPress firm.

About the WordPress 3.3 User Guide

This 89 page manual introduces the reader to all the fundamental aspects of using WordPress 3.3. It doesn’t cover advanced topics like theme and plugin development. The focus is on the end-user experience, and the guide is aimed at a beginner, non-technical audience.

If you’re already proficient or semi-proficient with WordPress, then this document won’t be of much use to you personally. The WordPress 3.3 User Guide is for newbies, and people who need to educate newbies.

The guide is available for download from the Interconnect IT website. It comes in three flavors:

1. A free PDF version, which includes the full content with compressed, lower-quality images.
2. A paid version of the PDF document, with higher resolution images. Price: $6
3. A white label version of the guide in .docx format. This version is fully editable and can be rebranded for third party use. Aimed at WordPress professionals who want to supply documentation to their clients. Price: $120

Note: Until January 13, you can get the paid versions of this manual at a discounted price, using the code WOW33 on the download page. The code reduces the PDF from $6 to $3 and the .docx file from $120 to $80.

The team at Interconnect IT have been publishing this guide since 2006, and have overhauled the content with every new version of WordPress since then. According to their website, the new content for WordPress 3.3 includes:

• New screenshots
• Images edited for improved visibility
• Various copy improvements
• Addition of plugin list
• Addition of theme provider list
• Addition of WordPress As A Service Section

Upgrading your manual

Everyone who purchases the editable version of the manual receives a voucher entitling them to the next version, when it is released, at a discounted price of $40.

Interconnect IT will also give you a free upgraded copy of their WordPress User Guide, if a new version of WordPress is released within six weeks of your original purchase.

Our take on the guide

The Good

• Comprehensive structure. The guide gives a solid, broad sense of how WordPress works, and presents the information in a fairly approachable manner for total novice users.
• Interactive. The manual includes practical exercises, which encourage the reader to try out the things they’ve learnt as they progress through the reading material
• Cheap! If you only want the standard PDF version, you can’t really argue with a $6 price tag.

The bad

• The writing isn’t great. The use of language is a bit sloppy, and we found a handful of small typos throughout the manual. This doesn’t detract from the educational value of the guide, but it does make it less pleasant to read.
• Assumed knowledge. While the guide is intended for people with essentially zero WordPress experience, there are a handful of instances where WordPress functions are mentioned without being properly explained.

The Verdict

The WordPress 3.3 User Guide contains a lot of useful information for first time WP users. People who only need to use the platform for day-to-day blogging and CMS duties, without worrying too much about the technical aspects, could benefit a lot from this manual.

The content, while factually and logically sound, is presented in a package that could use a little more polish. With a bit of copy editing, this could be a very good WordPress resource.

Interconnect IT generously offer a free version of the PDF file on their website, so you should definitely check that out as a starting point. (And remember, you can get the high-res version for a paltry $3 if you buy before January 13).

If you buy the white label version of this guide to distribute to your clients, there’s a good chance you’ll want to do a bit of editing first. Get your hands on the PDF, read through it, and then decide if the .docx is worth the investment and something that your clients could benefit from.

Have you read the WordPress 3.3 User Guide by Interconnect IT? What did you think of it? Leave a comment below this article and share your thoughts.

_{Image credits: Open Book, Instruction Manual and Decision from Bigstockphoto.}

Interview with Brad Markle of the Memory Viewer Plugin

It’s no secret that we’re fans of killer tools that help WordPress users be more efficient.  We’ve already mentioned the new(ish) plugin, Memory Viewer, here on WPMU.org and even recommend it to members over on WPMU DEV.

So we were stoked to sit down and discuss with Brad Markle of Inmotion Hosting (virtually via email of course) and gather some of his thoughts behind this handy plugin.

First off, Brad tell us about your Memory Viewer in your own words.

The Memory Viewer plugin allows you to see WordPress’ memory usage at several points while WordPress loads, and it also gives you a summary of all MySQL activity. This is great if you have a heavy WordPress installation as it can help pinpoint where in WordPress an issue may be.

What led you to develop this particular plugin?

Working for a large hosting provider, we work with various types of clients. Being in the Shared Hosting business, many of our customers run WordPress sites, and sometimes they get flagged as using excessive server resources. While it is easy for anyone to get a website up and running with WordPress, not too many users understand what MySQL usage is or how CPU time and memory are “shared” in a shared hosting provider. This plugin was written to help users pinpoint possible bottlenecks in their WordPress installation.

How does Memory Viewer help during development?

During development, the Memory Viewer plugin is a great way to see how many MySQL queries you’re running and how long each query is running. For example, if you have a bad loop in your code, you should be able to easily pin point the excessive queries. Also, if your queries are calling too much data, for example if they call everything when they only need the `id`, they may be able to see a bump up in memory usage.

How can Memory Viewer help a regular user?

For the regular user, the Memory Viewer plugin most likely isn’t going to make too much sense to them. I can see however a ‘regular user’ being contacted by their web host about their account’s resource usage, and then passing the Memory Viewer plugin results to a developer for further review.

Anything else our readers might find useful?

The WordPress Memory Viewer plugin is still quite young, it’s only been around for a month or two. We’d love to hear comments / suggestions as we’re eager to make the plugin as good as it can be.

 To me, one of the coolest things about Brad’s interview is to see how this plugin came out of a real problem that needed a solution.  Massive props to InMotion Hosting for releasing this tool for free to all!  This kinda action shows a thoughtfulness to the community.  They even provide a thorough guide to using memory viewer right here.

Have you guys used memory viewer yet?  Be sure to send Brad and the team at InMotion Hosting some love in the comments or even provide suggestions as to what else you’d like to see :)

Build an Online Resume in Minutes with the Free zeeBizzCard WordPress Theme

In this economy it’s important to find ways to help your resume or business stand out when looking for work. zeeBizzCard is one of the latest free themes to hit the WordPress Theme Directory and it offers an easy way to get your resume online quickly with an attractive layout, integrated blog, and portfolio. The best part is that there’s no coding knowledge required whatsoever. It’s easy to set up and it won’t cost you anything.

Check out a screenshot of the demo:

The zeeBizzCard theme is ideal for personalities, freelancers, entrepreneurs, small business owners or even young people wanting to establish an online presence.

zeeBizzCard Features:

• Seven predefined color schemes and integrated color variants using colorpicker
• Extensive Theme Option Panel, including logo upload, font sizes, sidebars, layout and more
• 3 Featured Posts Slider (Horizontal, DropDown, Fade)
• Custom Page Templates
• Custom Widgets
• Custom Post Types
• Portfolio Section
• Font Manager – choose from 20 fonts
• SEO optimized Code
• CSS Styles for wp_pagenavi Plugin and contact-7 Plugin
• Compatible In All Major Browsers
• DropDown Menus

Build your online resume in minutes…

Sitting down to an empty document with the task of creating your resume can be a bit intimidating. zeeBizzCard makes it easy, as it incorporates boxes to fill in for each section of your resume and then shortcodes that allow you to arrange it in any order you like.

The theme also allows you to display and link up all of your social networks. All of the personal details and business card features are manageable via the theme options panel.

It’s fairly rare that the directory has a decent-looking theme come through, given the rigid standards one must meet to submit a theme. That’s why I was excited about the zeeBizzCard theme. You can trust that it doesn’t have any bad links or questionable code in it, as it has been thoroughly reviewed by the WordPress theme review team.

For more information make sure to visit the zeeBizzCard theme homepage. Download zeeBizzCard for free from the WordPress theme directory.

Daily Tip: How to Sort WordPress Users By Registration Date

Sorting users by registration date can come in handy, especially in terms of being able to manage and delete spam users. This is something I’d love to see added to the WordPress core for single site installations. For now you can get this in a plugin called Recently Registered. The plugin works just like it does on WordPress multisite, only it’s made for single site. It offers a new, sortable, column within your users lists, showing the date they registered.

Please note that you do NOT need this plugin if you have WordPress multisite active, as it already provides this. Once you have the plugin activated, go to your Users page and pull down the Screen Options to select Registered. You can now sort by registration date. Download the Recently Registered plugin from the WordPress plugin repository.

Daily Tip: How to Sort WordPress Users By Registration Date

Sorting users by registration date can come in handy, especially in terms of being able to manage and delete spam users. This is something I’d love to see added to the WordPress core for single site installations. For now you can get this in a plugin called Recently Registered. The plugin works just like it does on WordPress multisite, only it’s made for single site. It offers a new, sortable, column within your users lists, showing the date they registered.

Please note that you do NOT need this plugin if you have WordPress multisite active, as it already provides this. Once you have the plugin activated, go to your Users page and pull down the Screen Options to select Registered. You can now sort by registration date. Download the Recently Registered plugin from the WordPress plugin repository.

Next Page »