Tag Archives: wordpress theme tutorial

How to Build a Great WordPress Site Using the Twenty Fourteen Theme

With its latest 3.8 “Parker” update a couple of months ago WordPress released a new default theme, Twenty Fourteen. The developers called it a “beautiful magazine theme,” emphasizing its strong visual elements, which make Twenty Fourteen stand out in comparison with the platform’s prior native themes. The bold new approach to the default design meant that the theme won’t work for every site or satisfy every user’s taste, but that didn’t seem to be the idea behind it. It looks like with every new theme, WordPress developers attempt to showcase a different aspect of the content management system, and Twenty Fourteen did just that in showcasing what WordPress can do for magazine-style sites and blogs.

Continue reading

WordPress Code to Change Background Image of Your WP Theme

This is a short and sweet step by step tutorial for changing the background of your WordPress theme. Read the WordPress CSS Basics: Changing Body Background Image article for a more detailed tutorial on changing background of your theme. Continue reading

How to Create an Option Page for Your WordPress Theme

You should consider adding a theme options page for your theme in order to make your theme more user friendly. This will help the users of your theme to customize various aspects of the theme by choosing the options from this settings page.

It also enables your user to easily change and update information such design template, color, font family, font size etc. Creating custom options panels in WordPress is very easy and in this article I will show you how to add an option page to your WordPress theme. Continue reading

WordPress CSS Basics: Changing Body Background Image

Customizing your WordPress theme can be pretty simple once you master some WordPress CSS basics. In this tutorial you will learn:

How to Change the Body Background Image in WordPress

The first thing a lot of people want to customize in WordPress is the background image. With the right background image your blog will certainly stand out from the crowd.

Below is what the typical body background CSS code looks like in your WordPress stylesheet:


body {
background: #fff url(images/tile.jpg) fixed;
}

When editing the background image you will want to keep a few things in mind:

  • Sometimes the background image and/or the CSS styles is located within the header of a theme.
  • Seamless tile background works best when adding it to your theme, and is the simplest form of editing the background image.
  • Be creative by using the background-repeat, and background-attachment properties.

Adding Image URL

As you will notice in the code above, you will see how the image URL is coded into the CSS file. Really all you need to do is create the image, upload it to your sever via FTP to your themes “image” or “img” folder.

Then you can code the image into your CSS file with the following code:

url(images/NameOfYourBackgroundImage.jpg)

Once you have uploaded and coded in your background image to your theme you will want to edit the image properties – this just tells the image what to do.

Background-repeat

The background-repeat simply tells your image which way to go.

The background-repeat property can be added after the image URL in the “background” property before the “;” like this:

background: #fff url(images/tile.jpg) repeat;

Or you can create an entirely new body background property like this:


body {
background: #fff url(images/tile.jpg);
background-repeat: repeat;
}

  • If you want your image to repeat horizontally (across the width of the page) you will code in: repeat-x
  • If you want your background image to repeat vertically (across the length of the page) you will code in: repeat-y
  • If you want your background image to repeat both horizontally and vertically you will code in: repeat
  • If you do not want your image to repeat, then really it’s not necessary to code anything, but if you want you can code: no-repeat

Background-attachment

Background-attachment just tells whether or not the body background image scrolls with the body of the website as someone scrolls the page, or if it stays fixed and doesn’t move. This is great to use if you have an image that needs to cover the background of the page, but it isn’t designed to repeat. Or in other words it’s not a seamless background, or it’s a full body background.

You can code the background-attachment property the same way you code the background-repeat property (see above.)

If you would like to add a totally new body background property you can do so with the following code:


body {
background: #fff url(images/tile.jpg) repeat;
background-attachment: fixed;
}

  • If you would like the image to scroll you will want to code: scroll
  • If you want the image to be fixed you will code: fixed

Thesis Theme Tips

You can certainly use what you’ve learned in this tutorial to add a custom background image to the Thesis Theme. To add the background image to your theme you will want to edit your custom css file.

When editing your Custom CSS file you will want to be sure to add the custom “body” class like this:


body.custom {
background: url(images/tile) repeat;
background-attachment: fixed;
}

Once you add the body.custom class to your custom CSS stylesheet in the Thesis Theme you will then be able to edit your Thesis Theme background!

I sure hope you enjoyed this tutorial. Be sure to leave a comment letting us know you’ve been here!

Disclosure: Some links used within this post are affiliate links.

Check out the how to use a background image for your WordPress theme tutorial.