Jupiter X for developers

Beans/JupiterX Workflow

When the theme loads following actions happens in a sequence.

1. The API files are loaded, making all the functions available.
2. All the APIs are available in jupiterx/lib/api. APIs are mostly used when some functionality can be reused throughout the theme e.g HTML API can be used to customize HTML of the page(adding/modifying/removing attributes, tags). APIs are loaded before every component so that every part of the theme that loads after API could reuse it to achieve some functionality. Check the list of APIs available in Beans API https://www.getbeans.io/documentation/api-overview/
3. We have developed some custom APIs apart from beans built in
4. a) Customizer API: It will help developers to Add new functionality to the Jupiter X customizer.
5. b) Custom Fields: It extends the ACF plugin.
6. The render files are loaded, which prepares the page (setting up the layout, registering the menus, widget areas, etc.).
7. This part of the theme helps us to set up the basic structure so that we can render the visual parts of the theme. Which part of the theme like menu, widgets, header, footer, etc will be placed at which location is decided by the render step. This step is dependent on the following two steps to actually show something to the users e.g pages, menus, widgets, etc. This functionality is defined in jupiterx/lib/render folder.
8. The structure files then load, which handle the pages structural markup (HTML, head, body, etc.) and hooks.
9. After rendering the structural components/templates e.g Header, Footer, WordPress Loop, Comment section are loaded. These templates will be loaded by the render step. These templates are defined in jupiterx/lib/templates/structure. We have also added some custom structures of Woocommerce in jupiterx/lib/templates/structure.
10. Lastly, the fragment files load, which attach the page content to the structural hooks.
11. After structures are loaded by the render we have hooks i.e actions/filters defined in the structure templates and with the help of those hooks we insert/modify some structures through fragments. Fragments are used to customize the already loaded structures. All the fragments are defined in jupiterx/lib/templates/fragment.
12. These above fours steps that happens every page load.

Kirki

Our Customizer is built on the Kirki framework for WordPress Customizer. We use this framework instead of using WordPress Customizer directly because we then have to repeat a lot of code which is unnecessary and time consuming for us. Kirki abstracts all those pieces which could waste our lot of time and also Kirki provides extra 30 custom controls that are not available in WordPress Customizer by default. It also helps us to generate CSS on the fly and apply to a certain element on the page by just using CSS selectors.

Compatibility & caching.

Beans framework is 100% compatible with all the plugins. There is no any known issue with plugins. All the functions and APIs are prefixed beans which avoids any kind of conflict and it doesn’t modify any plugin or file outside it’s domain.

Beans Compiler API takes care of all the assets enqueued. It improves performance by compiling CSS/Less & JS assets into one file. Which also improves the network bandwidth by combining them into one. All compiled files are cached and stored in a shared folder (‘wp-content/uploads/beans/compiler/’ by default), For more details https://www.getbeans.io/documentation/compiling-assets/

You will find the Compiler API files in Jupiter X Core plugins instead in the Jupiter X theme because Compiler API is not allowed in the WordPress standards. This kind of functionality shouldn’t be provided with theme, so we moved it to the core plugin.

There is no constant size of the theme asset that I can share because we add new assets or remove old ones so it keeps changing. But with the help of Compiler caching assets it improves the performance very much.

Adding Child Theme

To add a child theme you have to create a folder with the name jupiterx-child and then add two files as shown below

1. style.css

/*
Theme Name: JupiterX Child
Description: Jupiter X Child Theme
Author: Artbees
Author URI: https://jupiterx.com
Template: jupiterx
Version: 1.0.0
Text Domain: jupiterx-child
Domain Path: /languages
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

2. Functions.php

<?php
// Include Jupiter X.
require_once( get_template_directory() . '/lib/init.php' );

Some examples to modify the theme from the child theme

/**
 * Example 1
 *
 * Modify markups and attributes.
 */
// jupiterx_add_smart_action( 'wp', 'jupiterx_setup_document' );
function jupiterx_setup_document() {
	// Header
	jupiterx_add_attribute( 'jupiterx_header', 'class', 'jupiterx-child-header' );
	// Breadcrumb
	jupiterx_remove_action( 'jupiterx_breadcrumb' );
	// Post image
	jupiterx_modify_action_hook( 'jupiterx_post_image', 'jupiterx_post_header_before_markup' );
	// Post read more
	jupiterx_replace_attribute( 'jupiterx_post_more_link', 'class' , 'btn-outline-secondary', 'btn-danger' );
	// Post related
	jupiterx_modify_action_priority( 'jupiterx_post_related', 11 );
}

/**
 * Example 2
 *
 * Modify the sub footer credit text.
 */

jupiterx_add_smart_action( 'jupiterx_subfooter_credit_text_output', 'jupiterx_child_modify_subfooter_credit' );
function jupiterx_child_modify_subfooter_credit() { ?>

	<a href="https//jupiterx.com" target="_blank">Jupiter X Child</a> theme for <a href="http://wordpress.org" target="_blank">WordPress</a>

<?php }