Below, you’ll find a detailed guide on how to add the Elementor Header & Footer Builder Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Elementor Header & Footer Builder Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Elementor Header & Footer Builder Plugin and the shortcodes it provides:
"Elementor Header & Footer Builder is a powerful plugin designed to help you effortlessly create unique and dynamic headers and footers for your WordPress site."
- [hfe_template]
- [hfe_current_year]
- [hfe_site_title]
Elementor Header & Footer Builder [hfe_template] Shortcode
The Header-Footer-Elementor (HFE) shortcode is a powerful tool that renders templates. This shortcode retrieves a template based on the ID provided in the shortcode attributes. If the ID is empty, it returns nothing. It also checks for the existence of Elementor classes, enqueues the CSS file associated with the template, and finally displays the content using Elementor’s frontend builder.
Shortcode: [hfe_template]
Examples and Usage
Basic Example – The following shortcode displays a template with a specific ID, which is defined by the user. The ID corresponds to the template created in Elementor.
[hfe_template id=123 /]Advanced Examples
While the basic usage of the shortcode is straightforward, it can be adapted for more complex scenarios. For instance, you can use the shortcode in conjunction with other WordPress functions to dynamically display templates based on certain conditions.
Below is an example where the shortcode is used within a PHP if-statement. The shortcode will render a different template depending on whether the user is logged in or not.
<?php
if ( is_user_logged_in() ) {
echo do_shortcode('[hfe_template id=123 /]');
} else {
echo do_shortcode('[hfe_template id=456 /]');
}
?>
In this advanced example, the shortcode is used within a custom function. The function uses the shortcode to display a specific template based on the post’s category.
<?php
function display_category_specific_template() {
$category = get_the_category();
$cat_id = $category[0]->cat_ID;
if ( $cat_id == 1 ) {
echo do_shortcode('[hfe_template id=123 /]');
} elseif ( $cat_id == 2 ) {
echo do_shortcode('[hfe_template id=456 /]');
} else {
echo do_shortcode('[hfe_template id=789 /]');
}
}
add_action('wp_head', 'display_category_specific_template');
?>
PHP Function Code
In case you have difficulties debugging what causing issues with [hfe_template] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'hfe_template', [ $this, 'render_template' ] );Shortcode PHP function:
function render_template( $atts ) {
$atts = shortcode_atts(
[
'id' => '',
],
$atts,
'hfe_template'
);
$id = ! empty( $atts['id'] ) ? apply_filters( 'hfe_render_template_id', intval( $atts['id'] ) ) : '';
if ( empty( $id ) ) {
return '';
}
if ( class_exists( '\Elementor\Core\Files\CSS\Post' ) ) {
$css_file = new \Elementor\Core\Files\CSS\Post( $id );
} elseif ( class_exists( '\Elementor\Post_CSS_File' ) ) {
// Load elementor styles.
$css_file = new \Elementor\Post_CSS_File( $id );
}
$css_file->enqueue();
return self::$elementor_instance->frontend->get_builder_content_for_display( $id );
}
Code file location:
header-footer-elementor/header-footer-elementor/inc/class-header-footer-elementor.phpElementor Header & Footer Builder [hfe_current_year] Shortcode
The Header-Footer-Elementor (HFE) shortcode, ‘hfe_current_year’, dynamically displays the current year. This shortcode retrieves the current year using PHP’s gmdate function. It then checks if the year is not empty and returns it. This is particularly useful for copyright sections in your footer to keep the year updated automatically.
Shortcode: [hfe_current_year]
Examples and Usage
Basic example – The shortcode provided will display the current year, which is useful for copyright statements and other areas where the current year is required.
[hfe_current_year /]For advanced examples, we can add additional parameters to the shortcode. However, the function ‘display_current_year’ does not currently accept any parameters. If we modify the function to accept parameters, we could create advanced examples.
For instance, if we added a ‘format’ parameter that allows us to change the date format, we could do something like this:
The shortcode is modified to display the current year in a different format. The ‘format’ parameter allows you to change the date format.
[hfe_current_year format="y" /]Please note that the above example assumes that the ‘display_current_year’ function has been modified to accept and handle a ‘format’ parameter. The actual PHP code for this function might look something like this:
function display_current_year($atts) {
$atts = shortcode_atts( array(
'format' => 'Y',
), $atts, 'hfe_current_year' );
$hfe_current_year = gmdate( $atts['format'] );
$hfe_current_year = do_shortcode( shortcode_unautop( $hfe_current_year ) );
if ( ! empty( $hfe_current_year ) ) {
return $hfe_current_year;
}
}
This function now accepts a ‘format’ parameter that changes the format of the date. If no format is provided, it defaults to ‘Y’, which represents the full numeric representation of a year (4 digits).
PHP Function Code
In case you have difficulties debugging what causing issues with [hfe_current_year] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'hfe_current_year', [ $this, 'display_current_year' ] );Shortcode PHP function:
function display_current_year() {
$hfe_current_year = gmdate( 'Y' );
$hfe_current_year = do_shortcode( shortcode_unautop( $hfe_current_year ) );
if ( ! empty( $hfe_current_year ) ) {
return $hfe_current_year;
}
}
Code file location:
header-footer-elementor/header-footer-elementor/inc/widgets-manager/widgets/class-copyright-shortcode.phpElementor Header & Footer Builder [hfe_site_title] Shortcode
The Header-Footer-Elementor shortcode, ‘hfe_site_title’, is designed to display the title of the site. It fetches the site’s name using the ‘get_bloginfo’ function.
Shortcode: [hfe_site_title]
Examples and Usage
Basic example – A simple implementation of the ‘hfe_site_title’ shortcode that displays the site title.
[hfe_site_title /]Advanced examples
In the given shortcode, there are no parameters/attributes available to be modified directly. However, you can create a new shortcode that accepts parameters and uses them in the ‘get_bloginfo’ function. Below is an example:
Advanced example 1 – A new shortcode that accepts the ‘show’ parameter to display different types of information about the site.
function display_site_info( $atts ) {
$atts = shortcode_atts( array(
'show' => 'name',
), $atts, 'hfe_site_info' );
$hfe_site_info = get_bloginfo( $atts['show'] );
if ( ! empty( $hfe_site_info ) ) {
return $hfe_site_info;
}
}
add_shortcode( 'hfe_site_info', 'display_site_info' );
[hfe_site_info show="description" /]This shortcode will display the site’s tagline/description instead of the title.
Advanced example 2 – A new shortcode that accepts the ‘filter’ parameter to apply a text transformation to the site title.
function display_filtered_site_title( $atts ) {
$atts = shortcode_atts( array(
'filter' => 'raw',
), $atts, 'hfe_filtered_site_title' );
$hfe_site_title = get_bloginfo( 'name', $atts['filter'] );
if ( ! empty( $hfe_site_title ) ) {
return $hfe_site_title;
}
}
add_shortcode( 'hfe_filtered_site_title', 'display_filtered_site_title' );
[hfe_filtered_site_title filter="url" /]This shortcode will display the site title in a URL-encoded format.
PHP Function Code
In case you have difficulties debugging what causing issues with [hfe_site_title] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'hfe_site_title', [ $this, 'display_site_title' ] );Shortcode PHP function:
function display_site_title() {
$hfe_site_title = get_bloginfo( 'name' );
if ( ! empty( $hfe_site_title ) ) {
return $hfe_site_title;
}
}
Code file location:
header-footer-elementor/header-footer-elementor/inc/widgets-manager/widgets/class-copyright-shortcode.phpConclusion
Now that you’ve learned how to embed the Elementor Header & Footer Builder Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply