Anastasia MykytiukEnlightener
Tutorials

JetThemeCore: setting header and footer templates for any theme

The header and footer templates are the ones that make your website look complete, usually meeting a visitor when he enters the page and helping him navigate through the website. Of course, it’s evident that building a header and footer templates with Elementor is a natural decision since this page builder makes adding content and styling it up a lot easier.

To add a new header template to your website with JetThemeCore you’d naturally navigate to CrocoBlock > My Library, and here click Add New button to add a new template.

Then you fill in the form that allows you to choose the type of the template you’d be creating, and define its name.

Then you just build a header or footer template the way you normally do, dragging and dropping the widgets into place.

Finally, when the template satisfies you, you click the cogwheel icon in the bottom left corner and set the proper conditions that will define on which pages the header or footer template is supposed to appear (e.g., Entire site condition allows displaying a header on all pages of the website at once).

Once this is done, you navigate to your website’s frontend, but… whoa. Where is the header you’ve just built? If you’re seeing a default header template instead of the one you’ve created, then most likely your theme doesn’t allow the template you’ve created to replace the one that is set in it.

So, what should we do to let the header and footer templates from JetThemeCore work with the theme that doesn’t support custom headers and footers? Here’s the step-by-step guide.

  1. Let’s navigate to wp-content/themes directory using cPanel or FTP client. Here check if you’ve got a Child theme for the theme that’s active on your site (having it will prevent the changes that we’ll be adding into its code from disappearing after the update.
  2. Open the Parent theme and here copy header.php and footer.php files. Then return to the Child theme’s older and paste these files in it.
  3. Open the header.php file in a notepad or any code editor that’s available for you. Here we should look for the part of code that defines the way the header is to be displayed. It should look something like this:
  4. Now what we need to do is wrap this code in the condition that will check if there’s a header template created with JetThemeCore. And, if the answer is positive, the header for JetThemeCore will be applied instead of the default one.Here’s an example of how this can be done:
  5. Repeat the same actions when working with the footer.php file. The code that determines the way the footer is displayed should look as follows:We should wrap it up in the condition as shown below: Please, note, that these code samples are made based on Astra theme. If you’ve got OceanWP theme, the code that needs to be wrapped in conditions is: In GeneratePress these parts of code are:
  6. Let’s check if the conditions are working now. Navigate to your website’s frontend, make sure no cache is applied and the child theme is currently active on your site. The header and footer templates are in place, as you can see.

Now you can easily create more header and footer templates, assign them to the needed pages, or edit the ones you’ve already got.

2 Comments

  1. victor

    amazing content, i love using jet elements

    1. croco-admin

      Hi, Victor!

      Thanks! We are glad you are satisfied with our product.

Leave a reply

Your email address will not be published. Required fields are marked *