WordPress is a tool that has various uses. It can both be used as a content management system and as a blogging platform (CMS).
This is definitely because this tool is easy to learn, use and customize. I mean, you can transform your website the way you want without putting in too much effort. You can even add different backgrounds to your WordPress posts and pages, and it's this last part that is the subject of this tutorial.
If you're looking to add some color and style to your WordPress posts and pages, this guide takes a look at the topic using a two-pronged approach. First, we are going to add different backgrounds to posts or pages using CSS and a simple PHP function.
However, if that's not your cup of tea (let's say you're the perfect beginner and the code is not your business), we will offer a plugin that will help you do it.
Either way, you won't have to waste a lot of time as it's a relatively easy project. Plus, it's always fun to learn something new.
But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog
Then back to why we are here.
How to add a background with code on WordPress
This section will be of great use if you have knowledge of PHP, HTML and CSS. Don't worry, you can always copy and paste the snippets provided here. You just need to know where the different files are located on your WordPress installation.
Discover why video backgrounds are not always a good idea
Add different backgrounds with CSS on WordPress
Much of the style that goes into WordPress articles and pages (and your entire website) is controlled by a file called "Stylesheet ". The stylesheet file on WordPress is usually renamed "style.css". You can access " style.css By accessing " Appearance> Editor On your WordPress dashboard:
We will add a background (and other styles) your articles and WordPress pages in the style.css file, so it's important to have a second open tab where you can preview the various changes.
Discover also these Some text editors for developers WordPress
When navigating to " Appearance> Editor you will also see a list of all the models in the WordPress theme on the right of the screen. If you're using a child theme, you'll need to upload your parent theme's template files.
You need to focus on the file " header.php ». Why header.php ? Because this file is added to all other pages and posts. In other words, the code inside header.php appears on every page or post you create.
Locate this code snippet:
This function has a purpose. It offers CSS classes that you can use to change the style of your articles and pages. All you have to do is target a specific CSS class to the page or article you want to customize, add your background and style. All you have to do now is to save your changes.
Viewing the source code for any post or page is easy. If you're using Chrome, right-click on an empty space on a page and click " Inspect element ". On Mozilla, right-click directly on the article / page then click on " Source of the page ". If you are using Microsoft Edge (Internet Explorer), right-click your page / articles and select " View Source ».
Learn as well How to Effectively Use Tabs in Your Web Browser
If you look at the source code of a WordPress page, the generated code is almost the same:
If you looked at the source code for a single article, the body_class function will display something similar to:
As you can see, you'll have a CSS selector set that you can use to customize the background of your blog.
How to add a custom background with plugins
You can also customize WordPress post and page backgrounds as we showed earlier, using the WordPress plugins. So if you don't have time to fiddle with the code, or follow these instructions, here's a plugin that will help you get there.
Custom Backgrounds Premium WordPress
In a few minutes, with Custom Backgrounds You will be able to create rotating backgrounds for articles, pages, custom publication formats, taxonomies and archives among others. You will even have the possibility to customize the parallax effect, the timer and more.
You can even set clickable backgrounds for your WordPress posts and pages without too much configuration. The author also allows you to test the plugin before you buy it, so you can know what to expect.
Discover also some premium WordPress plugins
You can use other WordPress plugins to give a modern appearance and to optimize the handling of your blog or website.
We offer you here some premium WordPress plugins that will help you do that.
Zxeion is a powerful WordPress Plugin which enhances the security of your website. This plugin contains a collection of patches and tools for additional protection, as well as real-time protection for your network, that can help you identify threats to your website and block them without having to do anything. anything.
Its features are among others: real-time protection, the ability to hide the admin section, automated firewall banning, file protection, IP blocker, protection against Brute Force attacks, detection of server errors, spam protection and many more
Le WordPress Plugin SearchAzon allows you to integrate Amazon Search functionality into your website. This will give you the option to choose whether to display Amazon search results on your website and redirect visitors to Amazon.
By using SearchAzon, you will earn commissions and your customers will be delighted. It's a very simple concept that will generate revenue from the automatic piloting of your website. Suppose you already have an online store that only offers a certain product niche, such as: Apple. A customer searches for "Samsung S8 +" what will happen is that you will lose that customer. This is where SearchAzon comes into action.
If a customer searches for a product that cannot be found on your website, based on that keyword / phrase, an automatic search will run on Amazon and your customer will get the best results from Amazon directly to your website. So, no more lost or disappointed customers. Everyone will find what they want on your website and you will generate additional income from Amazon.
3. Master Slider
It's no wonder the WordPress Master Slider plugin is a perennial favorite on CodeCanyon. This tactile and responsive slider offers more than 70 templates that are highly customizable and also easy to use.
You will have the option to insert or embed HTML text, links, images or videos directly into each slide, then independently animate each layer. With over 70 configuration options, Master Slider remains one of the highly customizable plugins in this niche.
Its features are: a visual slideshow builder, ease of use, the presence of navigation keys, the ability to load and view galleries from services such as Flickr and WooCommerce, and many more
Other recommended resources
We also invite you to consult the resources below to go further in the grip and control of your website and blog.
- How to manage the URLs of the images of your WordPress blog
- How to configure the CloudFlare CDN for your WordPress blog
- How to update your WordPress themes bought on Themeforest
- How to create custom templates on WordPress
Here ! That's it for this tutorial, I hope it will allow you to change the backgrounds easily on WordPress. If you liked this article then feel free to Share with your friends.
But, in the meantime, tell us about your Comments and suggestions in the dedicated section.