Adding Theme Support For Video Headers In WordPress

WordPress, as CMS, let’s you create header image support for your builtin WordPress project. However, since WordPress is constantly evolving, it will introduce new feature within it as well as the bug fixes too in each of the update. One of the update on WordPress includes the feature for video headers support since WordPress version 4.7. And hence here, we will study about how to add theme support for video headers in WordPress.

What is video headers in WordPress?

Since WordPress 4.7 update, it has introduced the video headers feature within it, which represents the video in the home page by default if the current theme and page supports it. And also, it is the extended version for header image, ie, when you add support for this, the header image support will be changed.

Now, since you know that video header extends the header images in WordPress, you now may already know that adding theme support for video headers requires extra parameter in support for header image, right? Well we will discuss on it a bit later and we will move forward to learn about more on this video header, shall we?

First of all, video headers are considered as the decorative elements for your site with motion, as video suggest to be in motion. Also, it will get displayed in the home page only by default with no sound at all along with the play/pause button.

Video header will only get displayed with the screen size of greater than 900 * 500 pixels resolution, means it will not get displayed within the mobile devices currently viewed with. It is due to consideration of the bandwidth for your site. Also, if you are hosting your own video for this purpose then, the maximum video size is of 8Mb.

Now since you know some of the features for the video header in WordPress, we will move about adding theme support for video headers in WordPress, shall we?

How to add theme support for video headers in WordPress?

As we have already discussed for adding theme support for video headers in WordPress, since it extends header image, we just need to add extra parameter in the custom header image support. So, for the basic header image support, you just need to add the code: add_theme_support( 'custom-header' ); or with default parameter overwritten, the below PHP code:

Now, to add the header video support for WordPress, you only need to add the parameter: 'video' => true, in the above code. So, for the basic support with only default value overwritten for same, you just need to paste the below PHP code in the functions.php file of the theme:

However, if you want to add up default header image and the provide other extra stuffs for same then, you can try the below PHP code instead for same:

Also, you need to hook it inside the after_setup_theme() WordPress hook. After you have added the extra parameter as discussed above, you will see that the Header Image in the customize section is not displayed anymore and you will see Header Media section instead, isn’t it? Well, that is what is the expected behavior.

When you support header video in WordPress, since it extends header image, the header image is replaced via the header media in customize section.

Now, since you know about how to support video header in WordPress, is the work totally completed? Will it get displayed in your site without any further process? Well, the answer to it is no. You will need to do extra stuff to make it display for your site, which we will be learning now, shall we?

How to display video headers in WordPress?

Since you have added support for video headers in WordPress through the above steps, now you just need to display this for your site. To do this, you just need to open up your required file in which it resides and in our case, it is header.php file of the theme.

Now, after opening up the required file for your theme, you just need to paste the below PHP code inside that file and it should get displayed:

Now, as in above PHP code, we have commented out the function name as needed. As from above, to display the header video, you need to use the function: the_custom_header_markup(); for same, which displays the video header for your site where it is supported and in not supported pages, it will display the header image only. And regarding the other function, that will display the header image only and was first introduced in WordPress 4.4.

By now, you already know about how to add theme support for video headers in WordPress and how to display it for your site. Hence, you may be eager to know about how the output will be for same, isn’t it? Well for that, let’s move ahead and see the outcome of same below.

Output of adding theme support for video headers in WordPress

Now, if you have followed up the tutorial properly and then became successful on implementing the video headers in your currently builtin WordPress theme then, you will see the similar output for same in your site too as below:

You may also want to read:

  1. How To Change Login Logo In WordPress?
  2. Selective Refresh In Customizer Options
  3. Solve Maximum Execution Time Of 60 Seconds Exceeded
  4. Remove WordPress Admin Bar Except For Administrator
  5. Make YouTube And Vimeo Video Responsive In WordPress

Conclusion

If you have followed up the tutorial properly and now can add theme support for video headers within your WordPress theme with ease then, we can say that you are now more familiar on this than before. However, if you are still confused on the same and want to know more about it then, do drop the comment below in the comment box and we will follow it up.

Post navigation

Bishal Napit

Bishal Napit is a WordPress theme developer from Tansen, Palpa, with a passion to learn more on WordPress.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.