How to change wordress header image and background dynamically

Hello wordress lovers,

Wordpress theme development is a popular task in marketplace. For this purpose most of developers a created wordpress theme and customizing wordpress theme also developing new wordpress theme. Though wordpress known as the king of blog but now it's for various types of site. We can make personal site, business site, eCommerce site, news site with wordpress. The functionality of wordpress gives us to change everything and every part dynamically.


What we learn from this post:


  • How to change header image dynamically in wordpress.
  • How to change background image dynamically in wordpress.

So lets go to point 1: 


How to change header image dynamically in wordpress:


  1.  open  functions.php      file .
  2. write this code in  php tag.  

<?php

    add_theme_support('custom-header');

?>

we can set a default background image for fallback. for this.



<?php

    add_theme_support('custom-header' , array(

     'default-image'   =>  get_template_directory_uri().'/images/bg.jpg',
));


?>



After set this code in function, you can notice a change in your wordpress dashboard. Reload the dashboard and you will see the Header option under appearance.




Now go to the header.php or where you want to change the header-image. Suppose we change the background of  header section. so we have to set a code
there. 

    <?php header_image(); ?>


Let's see where to set the code easily. 


   <header class="header"  style="background-image:url(<?php header_image(); ?>)">
       
          <h1> Hello World</h1>
  </header>



It will give you the chance to change background image.





How to change Background image dynamically in wordpress:

functions.php

in functions.php  add this below code.


<?php

     add_theme_support('custom-background');

?>

You will see a new Background option in wordpress dashboard.






Click on that Background option. there the more options has to set background image.



here is another task that will fix many errors in wordpress. Add a function in body .  

the code is:     <?php body_class(); ?>



Example:   

<body   <?php body_class(); ?> >




</body>


If you need any help to  change header-image with custom header or background, just comment here. I will give you the solution.

Thanks 








      

Comments