Themler theme utilizes own custom header functionality. Therefore the WordPress plug-ins which utilize the built-in custom header functionality of WordPress may not work.
This article describes a workaround on how to make these plug-ins work with Themler themes. For example, Unique Headers plug-in.

This workaround is based on using CMS Code control. This control is used to add custom php code to the theme's templates. In our case this control will output the custom header image.

  1. Let's start from adding CMS Code control to the theme. To emulate Header "background image" you should add this control inside Header area. To make it look like background image CMS Code control should cover Header area:
    • access CMS Code Arrange menu:

      cms-code-arrange.png

    • change control's position to absolute. and set negative z-index:

      cms-code-arrange-properties.png

      You can also set width and height to 100% if you want the CMS Code control to stretch to the width and height of the Header area.

      If you want Header area to adapt to the size of the custom header image you need to set only width. Please note that it's possible if you're using html <img> to output custom header (see below).

      Now the CMS Code control covers Header area and appears under the Header area controls. Just like background image.
  2. Next, we need to output the custom header defined in the WP admin panel:
    • go to Themler Settings >>add the following code into the CMS Code area to register WP Custom Headers:
       add_theme_support( 'custom-header', array(
              //default image (empty to use none).
              'default-image'          => '',
      
              // Set height and width, with a maximum value for the width.
              'height'                 => 250,
              'width'                  => 960,
              'max-width'              => 2000,
      
              // Support flexible height and width.
              'flex-height'            => true,
              'flex-width'             => true,
          ) );
    • go back to the CMS Code Control. Please note that this control has negative z-index. Therefore it may not be accessible in the Themler Preview area. You can access this control using Outline tree under the Home tab.

      So, navigate to the CMS Code control and insert the following code:

      <?php if ( get_header_image() ) : ?>
      <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" /></a>
      <?php endif; ?>
      
      This code will output custom header image as image link that navigates to Home page. If you do not need header image to be clickable you can remove link tags and keep only image:
      <?php if ( get_header_image() ) : ?>
      <img src="<?php header_image(); ?>" class="header-image" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
      <?php endif; ?>
      
      If you want this image to be a css background image you can use the following code:
      <?php if ( get_header_image() ) : ?>
      <div class="header-image" style="background-image: url(<?php header_image(); ?>);"></div>
      <?php endif; ?>
      
      and add appropriate css to stretch this DIV to fit CMS Code Control:
      .header-image
      {
        height: 100%;
        width: 100%;
        background-size: cover;
      }

Result

Single page - About - with custom header:

result-about-page.png

Home page without custom header:

result-home-page.png

Themler theme utilizes own custom header functionality. Therefore the WordPress plug-ins which utilize the built-in custom header functionality of WordPress may not work. This article describes a workaround on how to make these plug-ins work with Themler themes. For example, [Unique Headers][1] plug-in. This workaround is based on using **CMS Code** control. This control is used to add custom php code to the theme's templates. In our case this control will output the custom header image. <ol> <li>Let's start from adding <b>CMS Code</b> control to the theme. To emulate Header "background image" you should add this control inside <a href="https://answers.themler.com/articles/4466/header">Header area</a>. To make it look like background image CMS Code control should cover Header area: <ul> <li>access CMS Code <b>Arrange</b> menu: <p>!cms-code-arrange.png!</p></li> <li>change control's position to absolute. and set negative z-index: <p>!cms-code-arrange-properties.png!</p> <p>You can also set width and height to 100% if you want the CMS Code control to stretch to the width and height of the Header area. </p> <p>If you want Header area to adapt to the size of the custom header image you need to set only width. Please note that it's possible if you're using html <code>&lt;img&gt;</code> to output custom header (see below).</p> Now the CMS Code control covers Header area and appears under the Header area controls. Just like background image.</li> </ul> </li> <li>Next, we need to output the custom header defined in the WP admin panel: <ul> <li>go to Themler Settings >>add the following code into the CMS Code area to register <a href="https://codex.wordpress.org/Custom_Headers">WP Custom Headers</a>: <pre> add_theme_support( 'custom-header', array( //default image (empty to use none). 'default-image' => '', // Set height and width, with a maximum value for the width. 'height' => 250, 'width' => 960, 'max-width' => 2000, // Support flexible height and width. 'flex-height' => true, 'flex-width' => true, ) );</pre> </li> <li>go back to the CMS Code Control. Please note that this control has negative z-index. Therefore it may not be accessible in the Themler Preview area. You can access this control using Outline tree under the Home tab. <p>So, navigate to the CMS Code control and insert the following code: </p> <pre> &lt;?php if ( get_header_image() ) : ?&gt; &lt;a href="&lt;?php echo esc_url( home_url( '/' ) ); ?&gt;"&gt;&lt;img src="&lt;?php header_image(); ?&gt;" class="header-image" width="&lt;?php echo esc_attr( get_custom_header()->width ); ?&gt;" height="&lt;?php echo esc_attr( get_custom_header()->height ); ?&gt;" alt="&lt;?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?&gt;" /&gt;&lt;/a&gt; &lt;?php endif; ?&gt; </pre> This code will output custom header image as image link that navigates to Home page. If you do not need header image to be clickable you can remove link tags and keep only image: <pre> &lt;?php if ( get_header_image() ) : ?&gt; &lt;img src="&lt;?php header_image(); ?&gt;" class="header-image" width="&lt;?php echo esc_attr( get_custom_header()->width ); ?&gt;" height="&lt;?php echo esc_attr( get_custom_header()->height ); ?&gt;" alt="&lt;?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?&gt;" /&gt; &lt;?php endif; ?&gt; </pre> If you want this image to be a css background image you can use the following code: <pre> &lt;?php if ( get_header_image() ) : ?&gt; &lt;div class="header-image" style="background-image: url(&lt;?php header_image(); ?&gt;);"&gt;&lt;/div&gt; &lt;?php endif; ?&gt; </pre> and add appropriate css to stretch this DIV to fit CMS Code Control: <pre> .header-image { height: 100%; width: 100%; background-size: cover; }</pre> </li> </ul> </li> </ol> #### Result Single page - **About** - with custom header: !result-about-page.png! **Home** page without custom header: !result-home-page.png! [1]: https://wordpress.org/plugins/unique-headers/