wordpresselementor

Changing global elementor styling programmatically


I have built an application to quick start wordpress elementor websites for a client. The short gist of it, is that it will install wordpress on a server, install all plugins and themes (like elementor and hello-elementor), and display the pre-given page on it.

All of this works fine, easily done with WP-CLI. Now I've come to the issue that the client wants to quick start some websites with different color scheme's and fonts. When using the UI, you can easily go to global settings, colors, and edit these colors. But as I am programmatically setting this site up, I have run into the problem that I can not find the location where these settings are stored.

I've looked through the entire of wp_options, but no such options for colors. I can't find any css files in which they are defined, as I thought perhaps it was stored on the disk instead of the database.

I hope someone can help me out in where this is stored, such that I can pre-set this. I am trying to make most of the things work such that you have to do the least in the wordpress admin panel.

Many thanks and with kind regards.


Solution

  • The global settings for Elementor, such as colors and fonts, are generated dynamically and stored in the wp_options table in the WordPress database. They are not stored in static CSS file.

    You have to look for the elementor_active_kit which is an option in the WordPress wp_options table that stores the ID of the active Elementor kit being used on a WordPress site. An Elementor kit is essentially a collection of pre-designed templates and global settings for your website, which includes theme styles, colors, fonts, and other design elements.

    The actual style settings are stored as post meta data for the kit’s post entry in the wp_postmeta table. The meta key for the global colors is elementor_page_settings, and it contains a serialized array with the color settings

    Here’s an example of what the serialized array might look like for the color scheme:

    a:2:{s:6:"colors";a:3:{i:0;s:7:"#ff0000";i:1;s:7:"#00ff00";i:2;s:7:"#0000ff";}s:5:"fonts";a:2:{i:0;s:6:"Arial";i:1;s:11:"Helvetica";}}s:7:"version";s:5:"1.0.0";}
    

    To change the elementor_active_kit option in the wp_options table using WP-CLI, you would use the wp option update command followed by the option name and the new value you want to set.

    Example:

    wp option update elementor_active_kit NEW_KIT_ID
    

    Replace NEW_KIT_ID with the actual ID of the Elementor kit you want to activate. This command will update the elementor_active_kit option with the new kit ID, effectively changing the active kit for your Elementor setup

    Here's the List of all WP-CLI commands as well as the Elementor Documentation