Account
Sign in to you account
Sign In Sign Up

How to Add New Elementor Post Programmatically?

5 minutes read

To add a new Elementor post programmatically, you can utilize the Elementor API to create a new post. This can be done by using functions such as 'wp_insert_post' to create a new post in WordPress and then adding the necessary Elementor content via the Elementor API. You can also use hooks and filters provided by Elementor to customize the post content or layout. Make sure to follow the Elementor documentation and guidelines to ensure proper implementation and compatibility with Elementor features.


How to create a new elementor post programmatically?

To create a new Elementor post programmatically, you can use the following code snippet:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

$post_data = array(
    'post_title'    => 'Your Post Title',
    'post_content'  => 'Your Post Content',
    'post_status'   => 'publish',
    'post_author'   => 1,
    'post_type'     => 'elementor_library',
);

$post_id = wp_insert_post( $post_data );

if ( ! is_wp_error( $post_id ) ) {
    // Set Elementor data
    update_post_meta( $post_id, '_elementor_edit_mode', 'builder' );
    update_post_meta( $post_id, '_elementor_data', '{}');
}


In this code snippet:

  1. Replace 'Your Post Title' with the desired title of your new Elementor post.
  2. Replace 'Your Post Content' with the desired content of your new Elementor post.
  3. Make sure to set the post_author to the appropriate user ID.
  4. The post type should be set to 'elementor_library' for Elementor posts.


After running this code, you should see a new Elementor post created in your WordPress dashboard. You can then open this post in Elementor and start designing it as needed.


How to customize the layout of the Elementor post?

To customize the layout of an Elementor post, you can follow these steps:

  1. Open the post or page you want to customize in the Elementor editor.
  2. Click on the "Edit with Elementor" button.
  3. Once the Elementor editor opens, you can start customizing the layout by adding new sections, columns, and widgets.
  4. You can drag and drop elements to rearrange them on the page, resize columns, and adjust spacing between elements.
  5. You can also customize the style of the elements by changing fonts, colors, backgrounds, and more.
  6. To further customize the layout, you can add custom CSS code by going to the advanced settings of a widget or section.
  7. Once you are satisfied with the changes, click the "Update" button to save your custom layout.


By following these steps, you can easily customize the layout of your Elementor post and create a unique and visually appealing design.


How to add a countdown timer to an Elementor post through coding?

To add a countdown timer to an Elementor post through coding, you can follow these steps:

  1. In your Elementor editor, add a new Code Widget to the post where you want the countdown timer to appear.
  2. In the Code Widget, insert the following HTML code to create the countdown timer: 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE html>
<html>
<head>
  <title>Countdown Timer</title>
  <script>
    var countDownDate = new Date("Dec 31, 2021 23:59:59").getTime();

    var x = setInterval(function() {
      var now = new Date().getTime();
      var distance = countDownDate - now;

      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);

      document.getElementById("countdown").innerHTML = days + "d " + hours + "h "
      + minutes + "m " + seconds + "s ";

      if (distance < 0) {
        clearInterval(x);
        document.getElementById("countdown").innerHTML = "EXPIRED";
      }
    }, 1000);
  </script>
</head>
<body>
  <div id="countdown"></div>
</body>
</html>


  1. Customize the countDownDate variable to set the date and time when the countdown timer should end.
  2. Style the countdown timer using CSS if needed.
  3. Preview or publish the post to see the countdown timer in action.


By following these steps, you can add a countdown timer to an Elementor post through coding.


How to add custom CSS classes to elements in an Elementor post programmatically?

To add custom CSS classes to elements in an Elementor post programmatically, you can use the elementor/element/after_save action hook to modify the saved Elementor data. Here's an example of how you can add custom CSS classes to elements in an Elementor post programmatically:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

add_action( 'elementor/element/after_save', function( $element, $data ) {
    // Check if Elementor is active
    if ( ! \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
        return;
    }

    // Check if the element is a specific widget
    if ( $element->get_name() === 'your-widget-name' ) {
        // Add custom CSS classes to the element
        $settings = $element->get_settings();
        $settings['css_classes'] .= ' custom-class-1 custom-class-2';

        // Save the modified settings
        $element->save_settings( $settings );
    }
}, 10, 2 );


In this code snippet:

  • Replace 'your-widget-name' with the name of the Elementor widget you want to add custom CSS classes to.
  • Adjust 'custom-class-1 custom-class-2' to the custom CSS classes you want to add to the element.
  • You can add additional conditions to target specific elements or posts if needed.


Add this code snippet to your theme's functions.php file or a custom plugin to apply the custom CSS classes to Elementor elements programmatically.


What are the benefits of programmatically adding new elements to an Elementor post?

  1. Automate the process: By programmatically adding new elements to an Elementor post, you can automate the process of creating and updating content on your website. This can save you time and effort by streamlining the content creation process.
  2. Consistency: Programmatically adding new elements allows you to maintain consistency and uniformity across your website. You can ensure that all elements adhere to your brand guidelines and design standards.
  3. Flexibility: When adding new elements programmatically, you have more control over the customization and placement of elements on your posts. This can help you create more dynamic and engaging content for your website.
  4. Scale: Programmatically adding new elements makes it easier to scale and grow your website. You can easily add new elements to multiple posts or pages without having to manually update each one.
  5. Integration: You can also integrate external data sources and APIs to automatically populate and update content on your website. This can help you keep your content fresh and relevant to your audience.
Facebook Twitter LinkedIn Telegram Whatsapp

Related Posts:

How to Open External Link In Elementor Popup?
To open an external link in an Elementor popup, you can add a button or text in the Elementor editor and then link it to the external URL. You can set the link to open in a new tab by adjusting the link settings in the Elementor editor. This will ensure that t...
How to Add Tabs Control In Elementor?
To add tabs control in Elementor, you can use the Tabs widget that comes with the Elementor Pro plugin. First, open the Elementor editor and add a new section to your page. Then, drag and drop the Tabs widget into the section. You can customize the tabs by add...
How to Add A Section Title In Elementor?
To add a section title in Elementor, you can simply click on the title area of the section you want to label and type in your desired title. You can adjust the font size, style, color, and alignment of the title by using the Elementor editor tools. This will h...
How to Include Global Styles to Elementor?
To include global styles to Elementor, you can use the Customizer settings in your WordPress theme to apply CSS rules site-wide. Alternatively, you can create a custom CSS file and include it in your theme to add global styles to Elementor elements. Another op...
How to Hide A Button If the User Is Logged In Using Elementor?
To hide a button if the user is logged in using Elementor, you can use Elementor&#39;s dynamic visibility feature. This feature allows you to set conditions for when an element should be displayed or hidden based on certain criteria, such as whether a user is ...