Modifying markup in Jupiter X is much easier than you think. Before you start modifying the Jupiter X markup it’s recommended it to enable Development Mode in Dashboard > Jupiter X > Control Panel > Settings > Enable Development mode.
After Enabling Development model you will notice data-markup-id will be added to HTML tags from frontend as shown in the screenshot below. Any HTML which has data-markup-id attribute can be modified using Jupiter XHTML Hooks.
Removing a HTML content (jupiterx_remove_output)
jupitex_remove_output will output HTML comments containing the output content id. Using that ID you can modify the output. E.g. To modify JupiterX header we have to add below code functions.php
jupiterx_remove_output('jupiterx_header');With the help of the above line of code, Jupiter X will generate content Ids around output as shown in the screenshot below. In the screenshot there are two outputs jupiterx_custom_header_template & jupiterx_custom_header_sticky_template. Once you have identified these output Ids you can easily modify the output using below filter
add_filter( 'jupiterx_custom_header_template_output', function () {
return '';
});Above filter will remove jupiterx_custom_header_template output.
Modifying a specific HTML element (jupiterx_modify_markup)
jupiterx_modify_markup will help you to modify the opening and closing tags of a specific element using its data-markup-id. E.g. JupiterX Main content is using main tag to hold the content area as shown in the screenshot http://prntscr.com/njc4vu. To change this main tag to div tag use below code snippet in functions.php
jupiterx_modify_markup('jupiterx_main', 'div');Removing HTML wrapper tag for a specific element (jupiterx_remove_markup)
jupiterx_remove_markup will help you to remove the wrapper tag without removing the content of the wrapper tag. E.g. To remove the jupiterx_header wrapper using below code snippet.
jupiterx_remove_markup('jupiterx_header');Resetting HTML tag of a specific element to the original value (jupiterx_reset_markup)
jupiterx_reset_markup will reset the modified or removed markup to its original form. E.g. if you have removed the jupiterx_header wrapper tag then you can add that wrapper back using below code snippet.
jupiterx_remove_markup('jupiterx_header');
jupiterx_reset_markup('jupiterx_header');Another use case is when you have modified jupiterx_header tag to section and you want its tag to be in the initial form.
jupiterx_modify_markup('jupiterx_header', 'section');
jupiterx_reset_markup('jupiterx_header');Adding HTML Wrapper for a specific element (jupiterx_wrap_markup)
jupiterx_wrap_markup will help you to wrap specific HTML element which has data-markup-id within the new container. E.g. I want to wrap jupiterx_header within new container whose id will be jupiter_primary_header and the tag of that new container should be section with class jupiterx-primary-header.
jupiterx_wrap_markup('jupiterx_header', 'jupiterx_primary_header', 'section', ['class' => 'jupiterx-primary-header']);Adding wrap inner HTML tag for a specific element (jupitex_wrap_inner_markup)
jupitex_wrap_inner_markup will help you to wrap the content of the specific HTML element which has data-markup-id. E.g. if you want to wrap the inner content of jupiterx_header with new wrapper whose class is jupiterx-header-content, the tag is div & id is jupiterx_header_content then use below code snippet.
jupiterx_wrap_inner_markup('jupiterx_header', 'jupiterx_header_content', 'section', ['class' => 'jupiterx-header-content']);Adding/Removing/Replacing attributes for an element: (jupiterx_reset_attributes, jupiterx_add_attribute, jupiterx_replace_attribute, jupiterx_remove_attribute)
jupiterx_add_attribute can be used to add an attribute to a specific HTML element or tag with data-markup-id. E.g. add new class primary-header to jupiterx_header using below code snippet.
jupiterx_add_attribute('jupiterx_header', 'class', 'primary-header');jupiterx_reset_attributes can be used to reset attributes of specific HTML element or tag with data-markup-id. E.g. to remove the new class primary-header to jupiterx_header added previously then use below code snippet.
jupiterx_add_attribute('jupiterx_header', 'class', 'primary-header');
jupiterx_reset_attributes('jupiterx_header');jupiterx_replace_attribute can be used to replace the attribute value of specific HTML element or tag with data-markup-id. E.g. to replace class jupiterx-main to jupiterx-main-content then use below code snippet.
jupiterx_replace_attribute('jupiterx_main', 'class', 'jupiterx-main', 'jupiter-main-content');jupiterx_remove_attribute can be used to delete attribute of specific HTML element or tag with data-markup-id. E.g. to delete class attribute of jupiterx_main then use below code snippet.
jupiterx_remove_attribute('jupiterx_main', 'class');If you want to remove a specific class value in class attribute then pass that value as a third argument.
jupiterx_remove_attribute('jupiterx_main', 'class', 'jupiterx-main');
