There is no custom code to display.

How to Set a WordPress Site Background and Create Photo Galleries

modern-homesteading-site

I’ve had some questions recently about the best way to put backgrounds into WordPress sites if your theme doesn’t already have a place for that.  I’ve also had questions about the best way to include a photo gallery and/or portfolio.

So I thought I’d tackle the questions head on and make some recommendations for plug-ins that can handle it easily – no coding required.

Let’s start with backgrounds.

WordPress Site Background Images

Some premium themes, like Thesis (by DIYthemes), Headway, and Canvas (by Woothemes), have places where you can upload custom background images for your site with a simple drag and drop or browse for the image you want to use, and settings for repeating/seamless backgrounds or fullscreen backgrounds.  If not, there are a couple of way to do it in the WordPress:

  1. WordPress offering something called ‘custom backgrounds for WordPress themes‘ starting in WordPress 3.0. Now, even though this feature is included in the core WordPress files, it will only show in your Appearance dashboard tab if your theme actually supports it (which those listed above do).  If not, and you’re an intermediate WordPress user, you can set this up by amending your functions.php file.  If you’re not comfortable fiddling around with php files, you’re better off using a plug-in or a theme with that supports backgrounds.  Here’s a good tutorial should you want to tackle it yourself.
  2. Another option is to simply add your chosen background image via amending your theme’s custom.css file (if it has one -  if not, it’s the theme’s primary stylesheet).  If you’re not familiar with CSS or amending CSS files, I wouldn’t recommend it, but here’s a tutorial should you want to give it a go: How to Add a Background Image to Your WordPress Site
  3. If you’re not keen on messing with your php and css files, which I’m pretty sure most of my clients are not, there is another option:  WP-Backgrounds Lite.  This is the plug-in I use (the premium version) on my modernhomesteading.ca site.  I love how easy it is to use – and it works without a whole lot of fiddling around with settings.  I don’t have time for plug-ins that require a lot of time investment, which is why this one fits the bill for me.  Here’s what it can do (text taken from the developer’s website):
  • Set fullscreen background images for posts and pages.
  • Apply a link to each background image (in themes where it’s possible).
  • You can deactivate the plug-in for certain pages and posts.
  • Compatible with all major and modern browsers.
  • Can be used with nearly every theme (premium and free ones). For the most themes it works out of the box (I’m currently using it with Thesis 1.8.5 on modernhomesteading.ca). A background color option helps you to adjust the body background color.
  • Vertical & horizontal image centering.
  • Small fingerprint, only a few kb filesize.
  • Easy installation, works out of the box.
  • And more.

They also have a premium version with a lot more features.  Here’s the demo page to see what it looks like in action.

So there you go – you can easily add background images to your WordPress site to give it more punch and pizazz.  Have fun with it!

Photo Galleries in Pages & Posts

There’s also a super easy way to add photo galleries to pages and posts. Here’s an example of what it can look like out of the box:

Now, the steps:

  1. Open the page/post you want to insert the gallery into.
  2. Click on the ‘Add Media’ tab at the top of the editing window.
  3. Click on the ‘Add Gallery’ button.  At this point, all of the pictures in your Media Library will show.  You’ll also have the opportunity to add new images from your computer.
  4. Click on the photos you want to include in the new gallery.
  5. Insert any URLs/pages you’d like the photos to link to if someone clicks on them.
  6. At the bottom of the page, click the button ‘Create Gallery’.  At this point it will give you an option to save the gallery and insert it into your page.  Click it and voila, you’ve got a photo gallery in your page or post!  Couldn’t be easier.

You can also view this in a video tutorial here:  How to Create WordPress Photo Galleries

If you want a fancier look, you can edit the CSS for the default display of the galleries, but the easier way would be to use a plug-in – there are various ones that will create effects for your photo galleries, but the method listed above is the most basic, quickest way to get it done.

Tips for Creating Images for Your Site Backgrounds

Things to keep in mind when creating and uploading images to your website:

  1. Your background images need to be optimized for the web – the smaller the better (preferably under 100kb each).  There’s a bit of a trick to this, but tools like befunky.com can optimize your images for the web fairly well.  That’s if you have something like a photo that will reach across the background (what they call ‘full-screen’).  If you’re using ‘seamless patterns’ that will repeat in the background, you still need to make sure the image is small, but you won’t be dealing with those massive pictures that need to be optimized.  Every photo will be different, so you’ll need to play with the settings a bit to get the best resolution for the smallest file size.  This is really a post unto itself, so I won’t go into too much detail, but suffice it to say, there is no ‘one size fits all’ answer to image optimization.
  2. How to optimize – try to get the actual dimensions as close to the size of the image you’ll need as possible – this will automatically reduce the file size.  Then in Photoshop, befunky.com or your other photo rendering tool, make sure you ‘save for web’ as a jpg (creates the smallest file size).
  3. For large photo backgrounds, it’s best recommended practice to use large images, above 1700 pixels in width, which will cover most display sizes.

So there you have it!  I hope this was helpful – if you have other ways you’ve found to easily add images to your WordPress site background, or plug-ins for photo galleries that have worked well for you, let us know in the comments below!  And if you know anyone who might find this post info useful, please share it with them.

Leave a reply