Add HTML header tag to elementor page

sweeneycg · Feb 11, 2025

Hi, I need to edit the header tag on individual elementor pages; using the HTML widget I can place code in section/containers but not on the underlying page.
I use the free plugin, do i need the Pro version?

I have hundreds of pages and each will have its own unique meta data.
For example:
<head>
<meta name="citation_author" content="Doe, J">
<meta name="citation_publication_date" content="1818/01/01">
<meta name="citation_journal_title" content="Transactions .....">
<meta name="citation_volume" content="1">
<meta name="citation_issue" content="">
<meta name="citation_firstpage" content="1">
<meta name="citation_lastpage" content="19">
<meta name="citation_pdf_url" content="mywebsite.com/wordpress_test/wp-content/uploads/2025/02/1-Paris11-19.pdf">
</head>

Community · Feb 17, 2025

You would be better off using a custom field with something like advanced custom fields. And a function to add it to the head if the field is populated.

As the Elementor pro, although has a code editor/inserter, I dont think would be dynamic enough for what you need.

Community · Feb 17, 2025

If you wanted a single ACF custom field displayed on edit/create post pages, which you could then paste the raw meta code into each page ( Probably the most simple way ),you'd need to do this :

Step 1: Create a Single ACF Field

Install and activate the Advanced Custom Fields (ACF) plugin.
Create a new field group (e.g., “Custom Head Code”).
Add a Textarea field (e.g., custom_head_code) with these settings:
- Field Label: Custom Head Code
- Field Name: custom_head_code
- Instructions: Paste your entire <meta> tag code here.
- New Lines: Convert new lines to <br> (optional)
- Required: No
- Assign this field to Pages (or specific post types).

Step 2: Add Code to Inject the Field into <head>

Insert this PHP snippet into your theme’s functions.php or a Code Snippets plugin:

PHP:

function add_custom_head_code_to_header(){if (is_singular()){// Applies to single pages/posts
        $custom_head_code = get_field('custom_head_code', get_the_ID());
        if (!empty($custom_head_code)){echo "\n" . $custom_head_code . "\n";
        }
    }
}
add_action('wp_head', 'add_custom_head_code_to_header', 1); // Priority 1 ensures early placement

Step 3: Usage Example

On a page where you want custom metadata:

Open the page in the WordPress editor or Elementor.
Locate the Custom Head Code field (added by ACF).
Paste your full <meta> code block directly into the field:

Code:

<meta name="citation_author" content="Doe, J">
<meta name="citation_publication_date" content="1818/01/01">
<!-- ... other tags ... -->

Save the page. The code will appear in the <head> section.

If you wanted to do it based on multiple custom fields for each type of meta, you'd do it similar to this :

1. Create ACF Fields

In your WordPress dashboard, create custom fields (e.g., citation_author, citation_publication_date) using ACF. Assign these fields to pages, posts, or custom post types where they’ll be used.
Ensure each field is configured with the correct Field Type (e.g., Text, Date Picker, URL).

2. Add a Custom PHP Function

Insert the following code into your theme’s functions.php file or a custom plugin. This function checks if ACF fields are populated and injects their values into the <head> section:

PHP:

function add_custom_metadata_to_head(){if (is_singular()){// Applies to single pages/posts
        $post_id = get_the_ID();
        // Example for citation_author
        $author = get_field('citation_author', $post_id);
        if ($author){echo '<meta name="citation_author" content="' . esc_attr($author) . '">' . "\n";
        }
        // Repeat for other fields (e.g., citation_publication_date, citation_journal_title)
        $pub_date = get_field('citation_publication_date', $post_id);
        if ($pub_date){echo '<meta name="citation_publication_date" content="' . esc_attr($pub_date) . '">' . "\n";
        }
    }
}
add_action('wp_head', 'add_custom_metadata_to_head', -999); // Low priority ensures early placement in <head>

3. Key Considerations

Conditional Checks: The is_singular() condition ensures metadata is added only to individual pages/posts. Adjust this logic if you need metadata on archive pages or other templates 16.
Escaping Data: Use esc_attr() to sanitize field values and prevent security vulnerabilities.
ACF Field Types: Date fields (e.g., citation_publication_date) may require formatting via ACF’s Return Format settings (e.g., Y/m/d for 1818/01/01).

Advanced Usage 310

Dynamic Field Population

Use ACF Options Pages to manage global metadata (e.g., site-wide defaults) and override them on individual pages.
For Elementor integration, use the free version of Elementor with the Shortcode widget to display ACF values in page content. For example:

PHP:

// Add a shortcode for ACF fields (in functions.php)
add_shortcode('acf_meta', function($atts){$atts = shortcode_atts(['field' => '', 'post_id' => get_the_ID()], $atts);
    return get_field($atts['field'], $atts['post_id']);
});

Then, use [acf_meta field="citation_author"] in Elementor’s Shortcode widget 10.

Compatibility with Elementor Free

While Elementor Pro offers built-in dynamic ACF field support, the free version can still work with PHP functions and shortcodes to inject metadata 105.

Why This Works 16

The wp_head hook allows code execution in the <head> section.
ACF’s get_field() retrieves values dynamically based on the current page/post ID.
The -999 priority ensures metadata appears early in the <head>, which is critical for SEO and third-party services like Google Scholar.

Limitations & Fixes

Caching Plugins: Caching may prevent dynamic metadata from updating. Use a cache-busting plugin or exclude specific pages from caching.
Performance: For hundreds of pages, ensure your server has sufficient resources (PHP memory limits) to handle ACF queries efficiently 10.

By following this approach, you can manage unique metadata across hundreds of pages without needing Elementor Pro.

Join the Best Wordpress and Elementor Support forum

Add HTML header tag to elementor page

sweeneycg

New Member

Community

Administrator

Community

Administrator

If you wanted a single ACF custom field displayed on edit/create post pages, which you could then paste the raw meta code into each page ( Probably the most simple way ),you'd need to do this :

Step 1: Create a Single ACF Field

Step 2: Add Code to Inject the Field into <head>

Step 3: Usage Example

If you wanted to do it based on multiple custom fields for each type of meta, you'd do it similar to this :

1. Create ACF Fields

2. Add a Custom PHP Function

3. Key Considerations

Advanced Usage 310

Dynamic Field Population

Compatibility with Elementor Free

Why This Works 16

Limitations & Fixes

Share this page

Latest posts

Latest Resources

Other Elementor Resources

Quick Nav

About us

Resources

Join the Best Wordpress and Elementor Support forum

Add HTML header tag to elementor page

sweeneycg

New Member

Community

Administrator

Community

Administrator

If you wanted a single ACF custom field displayed on edit/create post pages, which you could then paste the raw meta code into each page ( Probably the most simple way ),you'd need to do this :​

Step 1: Create a Single ACF Field​

Step 2: Add Code to Inject the Field into <head>​

Step 3: Usage Example​

If you wanted to do it based on multiple custom fields for each type of meta, you'd do it similar to this :​

1. Create ACF Fields​

2. Add a Custom PHP Function​

3. Key Considerations​

Advanced Usage 310​

Dynamic Field Population​

Compatibility with Elementor Free​

Why This Works 16​

Limitations & Fixes​

Share this page

Latest posts

Latest Resources

Other Elementor Resources

Quick Nav

About us

Resources

If you wanted a single ACF custom field displayed on edit/create post pages, which you could then paste the raw meta code into each page ( Probably the most simple way ),you'd need to do this :

Step 1: Create a Single ACF Field

Step 2: Add Code to Inject the Field into <head>

Step 3: Usage Example

If you wanted to do it based on multiple custom fields for each type of meta, you'd do it similar to this :

1. Create ACF Fields

2. Add a Custom PHP Function

3. Key Considerations

Advanced Usage 310

Dynamic Field Population

Compatibility with Elementor Free

Why This Works 16

Limitations & Fixes