Header Footer Builder With Gutenberg Block WordPress Plugin

Header Footer Customizer is a versatile WordPress plugin designed to give users complete control over the header and footer areas of their website using the Gutenberg editor. This plugin makes it simple to design and customize site headers, footers, and navigation menus without any coding knowledge. Additionally, Header Footer Customizer provides several powerful features like a megamenu builder, SVG icons, and an intuitive Gutenberg block to shortcode converter, making it an ideal solution for users seeking advanced customization options.

With Header Footer Customizer, you can easily create engaging and functional headers and footers that perfectly match your website’s branding. The plugin also supports multilingual setups by integrating with WPML, making it easier for users to create multilingual websites. Whether you are a beginner or a seasoned developer, the Header Footer Customizer plugin offers the flexibility and tools you need to build visually stunning headers, footers, and menus with ease.

Key Features

1. Header and Footer Builder for Gutenberg: Design headers and footers using Gutenberg blocks.
2. Megamenu Builder: Easily create advanced navigation menus with the Gutenberg editor.
3. Block to Shortcode Converter: Convert Gutenberg blocks into shortcodes for added flexibility.
4. Block Visibility Integration: Control the visibility of header and footer elements using the Block Visibility plugin.
5. SVG Icons and Icon List Block: Use scalable vector icons and add icon lists to enhance your design.
6. Multilingual Support with WPML: Use WPML to create multilingual headers and footers, making it ideal for international websites.

Use Case

The Header Footer Customizer plugin can be used in various scenarios to enhance the functionality and design of your website:

1. Custom Header and Footer Design: Use the Header and Footer Builder to create fully custom header and footer sections for your website using Gutenberg. This feature is perfect for users who want to go beyond the default theme options and create unique branding for their site.
2. Building Advanced Navigation Menus: The Megamenu Builder allows you to create advanced dropdown menus that can display images, icons, and a variety of content types. This is particularly useful for websites with many categories or sections, such as e-commerce stores or content-heavy sites.
3. Flexible Reusability with Shortcodes: With the Block to Shortcode Converter, you can easily reuse Gutenberg-designed elements throughout your website by converting blocks to shortcodes. This feature is helpful when you want to use a specific design in multiple areas of the site without recreating it from scratch.
4. Controlling Header and Footer Visibility: Integrate with the Block Visibility Plugin to control when specific elements are shown or hidden in the header and footer. For example, you might want a promotional banner to only be visible to logged-in users or during a specific time period.
5. Multilingual Support for Headers and Footers: If your website caters to a multilingual audience, use the WPML integration to ensure that your headers and footers are translated correctly. This feature is useful for websites that operate globally and need to serve different languages seamlessly.
6. Enhancing Visual Appeal with SVG Icons: Add SVG icons and create icon lists using SVG Icons and Icon List Blocks to make headers, footers, and menus more visually appealing. This can help guide users more effectively through your site, adding emphasis and improving navigation.

The Header Footer Customizer plugin made it incredibly easy to design stunning headers and footers for our clients. The Gutenberg integration and megamenu builder are fantastic additions!

Sarah Johnson (Web Developer of CreativeTech Solutions)

How to setup Header Footer Customizer

Step 01: First we have to go to the WordPress dashboard.

Step 02: Then we have to click the Plugins option from the dashboard. Then we have to click  “Add New Plugin” button, from there we have to click “Upload Plugin”. Then we have to choose the plugin from our device. Then we have to click install button. Here we can Active The Plugin or we may active it later from Plugins options

Step 03: After activation we will see HFC Options in our dashboard like

Step 04: Then we can add Header or Footer as our need like below. Here we want to take Header

Step 05: Clicking on Add Header we can add a header from different design like below

Step 06: I have Added Header 3 here . Each header has huge customization options and we can customize like below

Step 07: As like Header we can add Footer too and customize like below.

Mega Menu Builder

The Mega Menu Builder feature of the Header Footer Customizer plugin allows you to create beautiful, advanced navigation menus with the Gutenberg editor. This tool is designed to help you build feature-rich, highly customizable mega menus, providing a more engaging and user-friendly navigation experience for your website visitors.

Key Features of the Mega Menu Builder:

• Drag-and-Drop Interface: Use the intuitive Gutenberg blocks to create and arrange your mega menu items effortlessly. Add multiple columns, images, icons, and more to make your menus stand out.
• Rich Content Support: Include a variety of content types within your mega menu, such as text, images, icons, links, and even embedded videos to provide more information directly within the menu.
• Customizable Columns and Layout: Create multiple columns in your mega menu and easily customize the layout to suit your brand's look and feel.
• Icon Integration: Use SVG icons to add visual cues next to your menu items, making it easier for users to identify categories and links.
• Responsive Design: The mega menu created with this builder is fully responsive, ensuring it looks great on all devices—from desktops to mobile phones.

When to Use the Mega Menu Builder

The Mega Menu Builder is ideal for:

• E-commerce Stores: Display multiple categories and subcategories in a visually appealing manner to make browsing easier for your customers.
• Content-Heavy Websites: Use mega menus to organize and present extensive content, such as blogs, news, or articles, allowing users to navigate through different sections efficiently.
• Service-Based Websites: Showcase a wide variety of services or offerings under a single, easy-to-access menu to enhance the user experience.

Mega Menu we can be add to a specific menu item. There are few megamenu designs

We can add a megamenu under a header and customize like below

Gutenburg Block to ShortCode Converter

The Gutenberg Block to Shortcode Converter feature of the Header Footer Customizer plugin is designed to provide greater flexibility when using Gutenberg blocks. This feature allows you to convert any Gutenberg block into a shortcode, making it easy to reuse blocks across different areas of your WordPress site, even in places where the Gutenberg editor is not available.

Key Features of the Gutenberg Block to Shortcode Converter:

• Flexibility in Placement: Once converted, shortcodes can be used in widgets, classic editor areas, and even within other Gutenberg blocks.
• Efficient Reusability: Save time by reusing content, such as call-to-action buttons, custom-designed sections, or contact forms, without needing to recreate the block each time.
• Simplified Content Management: Manage and update content in one place. If a change is made to the original block, it is automatically updated everywhere the shortcode is used.

Generate Shortcode for a block , we need to Add blocks option. like below

We can use this shortcode anywhere to show the content that the blocks have

After save and publish we can see the blocks contents like below. I have added an image gallery to the Short code block. That's why it's showing the gallery

More screenshots

Live Demo

Click the button below to view a live demo of the Header Footer Customizer plugin. Explore how the plugin allows you to easily build and customize headers, footers, and megamenus using the Gutenberg editor. The live demo will give you a hands-on experience of the various features and flexibility that the plugin offers for creating unique and engaging website elements.

Download

Ready to enhance your website with powerful header and footer customization tools? Click the button below to download the Header Footer Customizer plugin. With its user-friendly interface and advanced features like megamenu builder, SVG icons, shortcode conversion, and multilingual support, this plugin is perfect for building a professional and unique website. Download now and start creating custom headers and footers effortlessly!

Developer area

The Developer Area provides a comprehensive guide for developers looking to extend or customize the Header Footer Customizer plugin. By offering a variety of hooks, filters, template overrides, and other advanced techniques, this plugin is designed to be highly extensible. Below are some key ways that developers can interact with and customize the plugin.

1. Hooks and Filters

The Header Footer Customizer plugin offers various hooks and filters, enabling developers to modify or add to its core functionality without directly editing the plugin’s files. Below are some of the available hooks and filters:

• hfc_before_header: This action hook allows you to add custom content before the header block is rendered.

add_action('hfc_before_header', 'my_custom_before_header_content');
function my_custom_before_header_content() {
    echo '<div class="custom-before-header">Welcome to My Website!</div>';
}

hfc_after_footer: Use this hook to add content after the footer is rendered.

add_action('hfc_after_footer', 'my_custom_after_footer_content');
function my_custom_after_footer_content() {
    echo '<div class="custom-after-footer">Thank you for visiting!</div>';
}

hfc_megamenu_items: This filter can be used to customize the items within the megamenu.

add_filter('hfc_megamenu_items', 'modify_megamenu_items');
function modify_megamenu_items($items) {
    // Add, remove, or modify the megamenu items
    $items[] = array('title' => 'New Item', 'link' => '#');
    return $items;
}

2. Custom Gutenberg Blocks

Developers can create custom Gutenberg blocks that integrate seamlessly with the Header Footer Customizer plugin. By registering new blocks or modifying existing ones, you can create custom header, footer, or megamenu elements that match your specific needs.

Example: Registering a custom block to use within the header.

function register_custom_header_block() {
    wp_register_script(
        'custom-header-block-js',
        plugins_url('/js/custom-header-block.js', __FILE__),
        array('wp-blocks', 'wp-element', 'wp-editor')
    );

    register_block_type('custom/hfc-header-block', array(
        'editor_script' => 'custom-header-block-js',
    ));
}
add_action('init', 'register_custom_header_block');

3. Template Overrides

If you need to modify the default templates used by Header Footer Customizer, you can copy the relevant files from the plugin directory (header-footer-customizer/templates/) to your theme directory and make your changes there. This ensures your modifications are safe from future plugin updates.

• Copy the desired template file to your theme folder (e.g., your-theme/header-footer-customizer/).
• Modify the template as needed to add or change content or structure.

4. Adding Custom Styles and Scripts

Developers can add custom CSS or JavaScript to enhance the appearance and behavior of headers, footers, and megamenus created with Header Footer Customizer.

Example: Enqueuing custom CSS to style the header.

function hfc_enqueue_custom_styles() {
    wp_enqueue_style('custom-hfc-styles', get_stylesheet_directory_uri() . '/css/custom-hfc-styles.css');
}
add_action('wp_enqueue_scripts', 'hfc_enqueue_custom_styles');

5. Integrating Third-Party Plugins

The Header Footer Customizer plugin supports integration with popular third-party plugins like WPML and Block Visibility. Developers can create integrations with other plugins or services by utilizing the provided hooks and filters.

Example: Integrating with a third-party analytics tool to track clicks on menu items.

add_filter('hfc_megamenu_link_attributes', 'add_tracking_to_megamenu_links', 10, 2);
function add_tracking_to_megamenu_links($attributes, $menu_item) {
    $attributes .= ' data-tracking-id="megamenu-' . $menu_item->ID . '"';
    return $attributes;
}

6. Customizing Block Visibility

Developers can control the visibility of header and footer blocks using the Block Visibility Plugin. By using hooks or by adding conditions, you can determine when specific blocks are visible or hidden based on user roles, page conditions, or custom logic.

Example: Making a header block visible only for logged-in users.

add_filter('hfc_block_visibility', 'set_block_visibility_for_logged_in_users', 10, 2);
function set_block_visibility_for_logged_in_users($is_visible, $block) {
    if ($block['name'] === 'hfc/header-block' && !is_user_logged_in()) {
        return false;
    }
    return $is_visible;
}

Associate Plugins

• Block Visibility —By Nick Deigo

By this plugin you can hide a block from the Header Footer Easily.

After installation and activation a new you will see a option called Visibility like below by this you can hide a block

I have hide an image block from the mega menu like below

So that, the image is hidden in view page like below

• WPML Multilingual CMS WordPress Plugin

After install we have to setup WPML plugin

Then we have few setting at Header Footer Customizer

Then we have to add headers for different language like below. I have added two header. One for Bengali and Another for English

Now in view page we can switch between languages

Request for new features

We are always looking to improve! If you have any suggestions for new features or improvements to the plugin, feel free to reach out to us. Your feedback helps us make Easy Job Listing even better.(Contact form , Telegram, Whatsapp, Messenger)

Donate

If you enjoy using Header Footer Customizer and would like to support its continued development, please consider making a donation. Your contributions will help us add more features, provide regular updates, and continue offering support to all users.