CODEWITHSUNDEEP
phphtmlcsswordpresscustomization
Rabia Bashir
Rabia Bashir

Reputation: 1

Can we make an image dynamic in WordPress that is set as background in Style.css?

I have converted HTML template to WP theme. and want to make everything dynamic. Firstly I want to make my slider (Slider parts i.e. img, heading, content, button) dynamic.

Now all code is available in index.php except Image so I had made all other contents(heading, text, detailed content, buttons) dynamic in that file but Image is available in Style.css. Code is below:

#HeroBanner {
        background: url(../images/banner.jpg)no-repeat 0 0 / cover;
        height: 630px;
        position: relative;
    }

Now this ID(#HeroBanner) is called in index.php to display img on slider. Code is below:-

<section id="HeroBanner">
    <div id="BannerSlider" class="owl-carousel">
        <div class="item">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <div class="banner-text">
                            <h1>Our work is dedicated to the<br /> prosperity of our clients! </h1>
                            <p> Lorem ipsum dolor sit amet, consec tetuer
                            <br /> adipiscing elit. Praesent vestibu lum molestie
                            <br />lacus. Aenean nonummy hendrerit
                            <br />maurishasellus </p>
                                <div class="bannet-cta">
                                    <div class="cta-1">
                                        <a href="#">Click Here</a>
                                    </div>
                                <div class="cta-2">
                                    <a href="#">Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

please guide me Can I make this image dynamic? If yes, then how is it possible?

Thanks in Advance.

Upvotes: 0

Views: 1147

Answers (2)

Hassaan Ali
Hassaan Ali

Reputation: 1061

I believe you're trying to make background images dynamic in your WordPress theme. You can do something like this:

In your functions.php file register a customizer and add an action hook to execute the customization.

function mytheme_customize_register( $wp_customize ) {

}
 add_action( 'customize_register', 'mytheme_customize_register' );

and if you follow the theme customization api in wordpress documentation at: https://codex.wordpress.org/Theme_Customization_API You can see we have three things in our Customization.

  1. Panels. 2. Sections. And 3rd Settings. We first have to create a Panel and inside that panel we can have a section or multiple sections and for each section we can have multiple settings and for each setting we've a controller that controls that setting. For example.

    $wp_customize->add_panel('panel_id',array(
     'panel'=>'panel_id',
     'title'=>__('Theme Options'),
     'priority'=>10,
 ));

 $wp_customize->add_section( 'Header' , array(
     'panel'=> 'panel_id',
     'title'      => __( 'Headers', 'mytheme' ),
     'priority'   => 30,
 ) );

 /*
     Background Image Custmoization
 */
 $wp_customize->add_setting('header_slider_image', array(
     'default'           => 'mydefault image link',
     'capability'        => 'edit_theme_options',
     'type'           => 'theme_mod',
     'transport' => 'refresh'

 ));

 $wp_customize->add_control( new WP_Customize_Image_Control($wp_customize, 'image_upload_test', array(
     'label'    => __('Header Image', 'gym'),
     'section'  => 'Header',
     'settings' => 'header_slider_image',
 )));

This can add the functionality to your theme customization option inside a Theme Options > Header > And Background Image. You can then call that image from customization sidebar by using the get_theme_mod('setting_name'); wordpress function inside your page.

Upvotes: 1

Osama Khawar
Osama Khawar

Reputation: 74

You should try the customizer api and also check out this plugin which allows you to add custom fields and assign them to any template. This way, you can have an image upload option on any page/template and then call it anywhere in your code. Also, it provides a theme options kind of functionality that could be used globally. You can research it here.

Upvotes: 0

Related Questions