Tutorial: Add a Background to your WordPress Theme

Note: This is one in a series of tutorials on customizing your WordPress theme geared to the beginning or intermediate WordPress user.

One of the easiest ways to customize a basic WordPress Theme is by changing the background. Using this step-by-step guide, even novice bloggers can make small changes that will have a big impact!

When you first install WordPress the default template is loaded and it looks something like this:

WordPress background tutorial

In order to make changes to it, you need to first log in to your WordPress dashboard, choose Presentation and then Theme Editor. On the right hand side you will see a list of files you can edit. Select style.css.

WordPress background tutorial

Scroll down to the part of the code labeled body. In that code block you will see a line that says background. This is the part of the code that tells the template what color and/or background image to display. If you just want to change the background color and do not want an image in the background, you can easily change it.WordPress background tutorial

I deleted the piece of code starting with “url” and replaced the color code with one for a deep red – #990000 (see a complete list of color names and codes). Once you make your change, select Update File and go take a look at your results.

WordPress background tutorial

Let’s say you want to get a bit fancier and would prefer to use one of the many beautiful free backgrounds available on the web (check my list of 13 sites for Beautiful Patterns and Backgrounds first). In which case, you need to find the background you want to use and download it. Use an FTP program (Need help? See my FTP tutorial for details) to transfer the .gif or .jpg file into the theme’s image directory.

WordPress background tutorial

Once the file is there, go back into your WordPress dashboard, select Presentation, then Theme Editor and open up the style.css file again. Take a look at the background line of code again and change kubrickbgcolor.jpg to the name of the background image you want to use – in my case, distressed-in-blue.gif (from Din Pattern).

WordPress Background tutorial

Select Update File and take a look at your handy work.

WordPress Background tutorial

Each theme you use is going to coded a bit differently, but the majority of them should operate very similarly to this – especially the ones that are well-coded. Once you get comfortable working with the style sheet and its components, it is relatively easy to make basic customization changes.

If you are up for it and would like to learn more about the code for WordPress theme, there’s a good tutorial on creating your own WordPress theme.

I plan on adding more tutorials to this series in the near future with one on adding a graphical header, customizing your fonts and colors, as well as other basic WordPress techniques. If there is any particular topic you would like me to deal with sooner rather than later, let me know!

Uncategorized
5 mẹo thiết kế web giúp cuộc sống của bạn dễ dàng hơn

CodeKit để tải lại trình duyệt Keir Whitaker, đồng sáng lập của Viewport Industries cho biết: “Nếu bạn đang sử dụng Mac, CodeKit là điều cần thiết. “Tính năng tải lại của trình duyệt rất đáng để bạn chiêm ngưỡng. Những ngày làm mới lại trình duyệt của bạn để …

Những thiết kế website trên điện thoại di động
Uncategorized
3 Lưu ý chính khi thiết kế website trên điện thoại di động

Với sự phát triển vượt trội của smartphone, hầu hết truy cập Internet đều được thực hiện trên điện thoại tiện lợi mọi lúc mọi nơi. Tuy nhiên, trình duyệt smartphone còn nhiều hạn chế. Vì thế, thiết kế website trên mobile không thể giống như trên máy tính mà …

Uncategorized
3 yếu tố cần lưu ý để thiết kế web chuẩn

Một website chính luôn đòi hỏi sự cân bằng giữa các yếu tố: thẩm mỹ, thông tin sản phẩm/dịch vụ, trải nghiệm người dùng. Dù đôi lúc việc tối ưu tất cả 3 yếu tố này không phải là điều dễ dàng, tuy nhiên, những lời khuyên dưới đây có …