April 11, 2024 in Wordpress

Add Different Background Images for Desktop and Mobile Views in WordPress using the ACF plugin

One way to give users more control over their website’s appearance is by allowing them to change background images for both desktop and mobile views. In this tutorial, I’ll show you how to achieve this using Advanced Custom Fields (ACF) and the wp_add_inline_style function in WordPress.

Step 1: Install and Set Up ACF

Before we dive into the code, ensure you have the ACF plugin installed and configured. Create the necessary fields for your header background images in your theme options page.

In my code, I have created two fields named background image (desktop) and background image (mobile)

Step 2: Create a Custom CSS File

Start by creating a custom CSS file within your theme directory. This file will contain the CSS rules that control the header background images.

enqueue the CS file using the wp_enqueue_style function

wp_enqueue_style( 'your-theme-style', get_template_directory_uri() . '/css/style.css' );

Step 3: Retrieve ACF Values

In your theme files, you’ll need to retrieve the values of the ACF fields you’ve created to store the background image URLs. Here’s how you can do it:

// Get the ACF field values for desktop and mobile background images
$desktop_bg_image = get_field('desktop_header_background_image');
$mobile_bg_image = get_field('mobile_header_background_image');

Step 4: Generate Dynamic CSS

Now, let’s generate dynamic CSS rules based on the ACF field values. We’ll use these rules to update the header background images.

// Define the dynamic CSS rules
$custom_css = "
    .header {
        background-image: url('".esc_url($desktop_bg_image)."'); /* Desktop background image */
    }

    @media screen and (max-width: 768px) {
        .header {
            background-image: url('".esc_url($mobile_bg_image)."'); /* Mobile background image */
        }
    }
";

Step 5: Use wp_add_inline_style to Add Dynamic CSS

To add the dynamic CSS to your theme, you can use the wp_add_inline_style function. Here’s how:

function custom_header_background_css() {
    // ... (Previous code here)

    // Add the dynamic CSS to the stylesheet using wp_add_inline_style
    wp_add_inline_style('your-theme-style', $custom_css);
}
add_action('wp_enqueue_scripts', 'custom_header_background_css');

Replace your-theme-style with the actual handle of your theme’s main stylesheet.

Following is the complete function for easier reference.

function custom_header_background_css() {
    // Get the ACF field values for desktop and mobile background images
    $desktop_bg_image = get_field('desktop_header_background_image');
    $mobile_bg_image = get_field('mobile_header_background_image');

    // Define the dynamic CSS rules
    $custom_css = "
        .header {
            background-image: url('".esc_url($desktop_bg_image)."'); /* Desktop background image */
        }

        @media screen and (max-width: 768px) {
            .header {
                background-image: url('".esc_url($mobile_bg_image)."'); /* Mobile background image */
            }
        }
    ";

    // Add the dynamic CSS to the stylesheet using wp_add_inline_style
    wp_add_inline_style('your-theme-style', $custom_css);
}
add_action('wp_enqueue_scripts', 'custom_header_background_css');

With these steps, your WordPress theme will now allow users to change the background images for both desktop and mobile views using ACF. The background images will dynamically update based on the ACF field values, giving your users more control over their website’s appearance.

Now, your theme is more customizable and user-friendly, providing a better experience for your site’s visitors.