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 }

Raven Development Tips

How users can Extend Raven elements?

In Raven, we have 22 elements and every one of them could be extended and changed as per the developer requirements. In Raven, we are using modules for managing elements. Usually, every element/widget is managed by a specific module and a module can manage multiple elements/widgets e.g posts module manages Post element & Post carousel element.

Every module is defined or maintained with raven/includes/modules. Every module folder has widgets folder and widgets can one or more element/widget e.g alert module has alert widget/element & post module has a post & carousel element/widget.

To extend a particular widget you should follow the below steps

  1. Lets extend the alert module. First of all inside raven/includes/modules/alert/widgets create a new file alert-custom.php.
  2. Extend Alert widget/element class as shown below

<?php
namespace Raven\Modules\Alert\Widgets;

use Raven\Base\Base_Widget;
use Raven\Modules\Alert\Widgets\Alert;

defined( 'ABSPATH' ) || die();

class Alert_Custom extends Alert {

    public function get_name() {
        return 'raven-alert-custom';
    }

    public function get_title() {
        return __( 'Alert Custom', 'raven' );
    }
}

It’s important to override get_name function of a widget and change the name of widget to something unique. Name of widgets must be unique.

3. You must also register new widget in raven/includes/modules/alert/module.php as shown below

<?php
namespace Raven\Modules\Alert;

defined( 'ABSPATH' ) || die();

use Raven\Base\Module_base;

class Module extends Module_Base {
    public function get_widgets() {
        return [ 'alert', 'alert-custom' ];
    }

}

I have added ‘alert-custom’ in get_widgets to register new element/widget and it should be the name of the element from get_name method inside alert-custom.php

To change controls or output content in a widget you have to override methods from an Alert Class as per your requirements.

Is it free and GPL?

No, it’s not free and GPL.

Is there any possibility to change them inside a child theme?

No, it’s not possible right now but it could be done if there is a need for it.

Use hooks to develop raven.

We don’t have any added custom hooks in Raven for customization. There is only one hook registered ‘raven/init’ which is triggered when raven is initialized. Raven is developed on top of Elementor and you could use every hook from Elementor inside raven https://code.elementor.com/php-hooks/

Add a new hovering style to Portfolio element.

To add new Hover effect go to raven/includes/modules/posts/classes/post-base.php. Add new option inside options property e.g. we will add rotate effect as shown below.


$this->skin->add_control(
    'post_image_hover_effect',
    [
        'label' => __( 'Hover Effect', 'raven' ),
        'type' => 'select',
        'default' => '',
        'options' => [
            '' => __( 'None', 'raven' ),
            'slide-right' => __( 'Slide Right', 'raven' ),
            'slide-down' => __( 'Slide Down', 'raven' ),
            'scale-down' => __( 'Scale Down', 'raven' ),
            'scale-up' => __( 'Scale Up', 'raven' ),
            'blur' => __( 'Blur', 'raven' ),
            'grayscale-reverse' => __( 'Grayscale to Color', 'raven' ),
            'grayscale' => __( 'Color to Grayscale', 'raven' ),
            'rotate' => __( 'Rotate', 'raven' ),
        ],
        'prefix_class' => 'raven-hover-',
    ]
);

Adding rotate option won’t do anything on its own. But you should be able to see new Hover Effect in the Style section of post element.

Due to prefix_class option above when we select a particular effect then post element will be applied a class as raven-hover-rotate if the rotate effect is selected or raven-hover-scale-down if the scale-down effect is selected.

After adding new rotate effect we have to do sass mixin for that effect in raven/assets/src/scss/_mixins.scss as shown below.

@mixin raven-effect-rotate($selector: img) {
   & #{$selector} {
       transform: rotate(0deg);
   }

   &:hover #{$selector} {
       transform: rotate(360deg);
   }
}

After mixin for zoom effect you have to include this in raven-hover-rotate class in raven/assets/src/scss/widgets/_posts.scss as shown below.

.raven-hover-rotate {
   .raven-post:not(.raven-post-inside) {
       .raven-post-image {
           @include raven-effect-rotate
       }
   }

   .raven-post-inside {
       @include raven-effect-rotate('.raven-post-image img');
   }
}

Now, when you hover over the post featured image it should rotate 360deg.

Integrate Raven Form with another third-party service.

This part is actually a simple example. The Raven form is already compatible with MailChimp and has proper options. Also since Raven 1.3, the Webhook feature is part of Raven and you won’t need to add the webhooks as a new feature.

To integrate Form with Third party services we use actions which are executed once the user submits the form. Multiple actions can run after the form is submitted e.g send form data as an email or store user email address in the MailChimp etc.

Let’s add a webhook action in our form. Webhooks are very useful for notifying external systems about the form submission, sending data to external systems.

All the actions are added in raven/includes/modules/forms/actions. To add a webhook action follow below steps.

  1. Add new action option in raven/includes/modules/forms/module.php  as shown below
public static function get_action_types() {
        return [
            'email' => __( 'Email', 'raven' ),
            'mailchimp' => __( 'MailChimp', 'raven' ),
            'redirect' => __( 'Redirect', 'raven' ),
            'slack' => __( 'Slack', 'raven' ),
            'hubspot' => __( 'Hubspot', 'raven' ),
            'download' => __( 'Download', 'raven' ),
            'webhook' => __( 'Webhook', 'raven' ),
        ];
}

2. Add new file webhook.php in raven/includes/modules/forms/actions. Every action must extend Action_Base class and implement update_controls, run, register_admin_fields methods.

update_controls: In this method, you have to register Actions settings e.g Webhook action has only one setting i.e URL.

In webhook action we have to register URL option as shown below

public function update_controls( $widget ) {

        $widget->start_controls_section(
            'section_webhook',
            [
                'label' => __( 'Webhook', 'raven' ),
                'condition' => [
                    'actions' => 'webhook',
                ],
            ]
        );

        $widget->add_control(
            'webhook_url',
            [
                'label' => __( 'Webhook URL', 'raven' ),
                'type' => Controls_Manager::TEXT,
                'placeholder' => 'http://webhook-endpoint.com',
                'description' => __( 'Enter the webhook URL where you want to send your Form data after submit e.g. ', 'raven' ) . sprintf( '<a href="%s" target="_blank">%s</a>.', 'https://zapier.com/apps/webhook/integrations', __( 'Integrate with Zapier Webhook', 'raven' ) ),
            ]
        );

        $widget->end_controls_section();

    }

run: This method will be executed when the user completes the form submission. When a user completes the form submission this method should send form data to the Webhook URL so that external system will receive the form data and process it according to its usage e.g Zapier service will receive this data in webhook app and send to other apps e.g Google sheets, Slack, Active Campaign.



    public static function run( $ajax_handler ) {
        $settings = $ajax_handler->form['settings'];

        if ( empty( $settings['webhook_url'] ) ) {
            return;
        }

        $body = self::get_form_data( $ajax_handler, $settings );

        $args = [
            'body' => $body,
        ];

        $response = wp_remote_post( $settings['webhook_url'], $args );

        if ( 200 !== (int) wp_remote_retrieve_response_code( $response ) ) {
            $ajax_handler->add_response( 'admin_errors', __( 'Webhook Action: Webhook Error.', 'raven' ) );
        }
    }

register_admin_fields. In this method, you can register any global settings for an API key in Dashboard > Elementor > Settings. E.g

In webhook action, we don’t need to implement this method.

Hooks, Actions and filters

Jupiter X uses the Beans Framework so all the hooks in that framework are supported in Jupiter X https://www.getbeans.io/code-reference/

These hooks are already categorized on the page e.g Admin hooks, API hooks. Besides the above hooks, we have also registered our custom hooks in Jupiter X.

Note: replace all the hooks prefix beans_ with jupiterx_

Control Panel Hooks

Actions

  1. jupiterx_control_panel_init is triggered when you view Jupiter X control panel in the Dashboard.
  2. jupiterx_control_panel_get_started is triggered in Control Panel Home pane before Getting started.
  3. jupiterx_control_panel_after_theme_settings is triggered after theme settings before Donut settings in Control Panel settings pane.

Filters

  1. jupiterx_control_panel_pane_{$slug}
  2. jupiterx_widget_settings is used for filtering widget settings while importing them in control panel import/export pane.
  3. jupiterx_template_download_url is used for filtering the template download link when we install a particular template.

Custom Fields Hooks

Filters

  1. jupiterx_post_options_post_types is used to filter the post types where Jupiter X acf local meta fields will be shown.

Setup Wizard Hooks

Actions

  1. jupiterx_print_templates Used for rendering templates in setup wizard.

Customizer Hooks

Actions

  1. {$id}_before_panel Run action before section added.
  2. {$id}_after_panel Run action after panel added.
  3. {$id}_before_section Run action before section added.
  4. {$id}_after_section Run action after section added.
  5. {$args[‘settings’]}_before_field Run action before field added.
  6. {$args[‘settings’]}_after_field Run action after field added.
  7. jupiterx_before_customizer_register Fires before customizer settings are registered.
  8. jupiterx_after_customizer_register Fires after customizer settings are registered.

Initialization Hooks

Actions

  1. jupiterx_init Load Jupiter framework.
  2. jupiterx_before_load Fires before Jupiter loads.
  3. jupiterx_after_load Fires after Jupiter loads.
  4. jupiterx_after_load_api Fires after all the api components are loaded.

Plugin Hooks

Filters

  1. jupiterx_check_plugin_conflicts This filter is applied to the  Jupiter X maintained plugins that may cause conflicts on updating them based on the currently installed plugins version & a Jupiter X theme version.

Child theme and API

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.

Jupiter X Markup


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

Jupiter X markup IDs
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.

Adding HTML Wrapper for a specific element
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.

Adding wrap inner HTML tag for a specific element (jupitex_wrap_inner_markup)
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');

Overriding WooCommerce templates

Normally, when we override Woocommerce templates we create a folder named woocommerce in a theme folder and copy those templates there that we want to override but in Jupiter X we have changed this path to jupiterx/lib/templates/woocommerce/. Now, any template you want to override should be inside jupiterx/lib/templates/woocommerce/

e.g. To override a content-single-product.php from plugins/woocommerce/templates/content-single-product.php.

Create a template with same name content-single-product.php in jupiterx/lib/templates/woocommerce folder and modify as per your requirements.

Same applies for the Child theme jupiterx-child/lib/templates/woocommerce

Change number of related posts

By default, Jupiter X doesn’t have option to change the number of related/recommended posts inside the single posts pages. It will calculated the number of related posts based on the layout you chose. 3 related posts for when you have one sidebar, and 2 related posts for when you have two sidebars. Also, 4 posts for when you don’t have no sidebar (full width). 

Tip: Use Growmatik to show personalized blog lists based on user behavior and history without touching Jupiter X settings.

However, you can easily change that number by adding this snippet to your child theme’s functions.php file:

add_filter( 'jupiterx_post_related_count', function() {
   $post_count = [
       'posts_per_page' => 2,
       'columns'        => 6,
   ];

   return $post_count;
} );

The columns value inside the $post_count array is the number of Grid columns. So, setting it as 6, will actually give you two columns. (number of grid cells is 12)

Regenerating Thumbnails

When new image sizes are added in the theme using Image Size option under Dashboard > JupiterX > Image Size in the Jupiter X theme, it only applies to the newly uploaded images. In that case, the old images need to be updated with the new dimensions before it’s visible on the page/posts. The thumbnails can be regenerated using the Regenerate Thumbnails plugin.


How to install a plugin, you can read in this article.

The plugin allow you to regenerate all images at once as well as individual thumbnail images.

Regenerate All Thumbnails at Once

1. From WordPress left menu, go to Tools > Regenerate Thumbnails.

2. Click on the Regenerate All Thumbnails button and wait for the process to complete.

Regenerate a Specific Image

You can regenerate specific images (rather than all images) from the Media page.

1. From WordPress left menu, go to Media > Library.

2. Click on the list icon on the Media Header filter to show the media items as a list. Hover over the thumbnail to show the Regenerate Thumbnails option. Click on it to regenerate thumbnails for that image only.

Hiding Control Panel tabs in Jupiter X

How to hide some tabs like Templates, Plugins, etc. in the Control Panel in Jupiter X

There is possibility you can hide tabs like Home, Plugins, Templates, Updates, etc. in Jupiter X > Control Panel.

To achieve this, you’ll need to edit files of your WordPress site via FTP. 

1. Connect via FTP using some FTP client like FileZilla.

2. Go to the directory where WordPress installation is located.

3. Open wp-config.php file and add one of the below strings depending on what tab you want to exclude:

Home – define( 'JUPITERX_CONTROL_PANEL_HOME', false );
Plugins – define( 'JUPITERX_CONTROL_PANEL_PLUGINS', false );
Templates – define( 'JUPITERX_CONTROL_PANEL_TEMPLATES', false );
Image Sizes – define( 'JUPITERX_CONTROL_PANEL_IMAGE_SIZES', false );
System Status – define( 'JUPITERX_CONTROL_PANEL_SYSTEM_STATUS', false );
Updates – define( 'JUPITERX_CONTROL_PANEL_UPDATES', false );
Settings – define( 'JUPITERX_CONTROL_PANEL_SETTINGS', false ); 


By default Import/Export tab is disabled in the Control Panel, and if you want to use these features, you need add this code:

define( 'JUPITERX_CONTROL_PANEL_EXPORT_IMPORT', true );

Inserting Custom JavaScript Codes

Sometimes you find yourself needing to add custom JavaScript to add or override a functionality or visualization.

Magic: Have your custom WordPress project done by Artbees experts for a competitive price.

Writing JS code

For the purpose of this article, we’ll write some custom JavaScript codes that change the “Read More” button text in the Posts element.

Note: It’s assumed that you are already familiar with using the developer tool in browsers to inspect elements. To learn more about it, read the Inspecting elements article.


 
To change the “Read More” button text in the blog:

1. Open your site and go to the blog page.

2. Inspect the “Read More” button to find the correct class name.

3. Write the appropriate JS code.

jQuery(".raven-post-button-text").text(function () {
    return jQuery(this).text().replace("Read More","Check it out!");
});

Note: Replace the class .raven-post-button-text with the one you found when inspecting the button.

4. Take note of these codes and add them to the theme as explained in the next section.

Inserting the JS Code

After writing the JS codes, it’s time to insert them into Jupiter X theme. 

1. You can use Custom Header Footer Scripts for Customizer plugin to add Custom JS script in Customizer. Once installed, go to Appearance > Customizer > Custom Scripts from the WordPress left menu.

2. Paste the code you wrote in the Header Script or Footer Script section.

Note: Your code should not be wrapped in <script>....</script> tags.

3. Click the Publish button to save the changes.

Or you can add it to your child theme in jupiterx-child/assets/js/script.js file. How to create a child theme, refer to this article.

Adding custom JS code in Page Settings in Elementor

1. Open a page to which you want to add custom JS code (it will be applied only to that page).

2. Click on Edit with Elementor button.

3. On the left side click on a gear icon to open Page Settings and go to Advanced tab.

4. Open Custom CSS/JS section and add your code into Custom JS box.

Note: When you add a JS code in Page Settings, you’ll see the result on frontend only, on backend it’s not visible.

Customizing the elements using Custom CSS

How to add custom CSS codes to style an Elementor element.

Sometimes you find yourself needing to add custom CSS codes to add or override some stylings. There are several places to add the custom CSS in the Jupiter X theme.

Note: It’s assumed that you are already familiar with using the developer tool in browsers to inspect elements. To learn more about it, read the Inspecting elements article.

To Style an Element

1. Open your page on the frontend which has the element that you wish to style.  In this example, we’ll change the Button background color.

Note: It is possible to change the button background color without usage of custom CSS codes and this is just for example purpose.

2. Inspect the button and take note of it’s HTML class.

3. Write the appropriate CSS codes.

.raven-button, a.raven-button {
    background-color: green !important;
}

4. Take a note of these codes and add them into the theme as explained in the next section.

Inserting the CSS Codes


After writing the CSS codes, you can insert them into the Jupiter X theme. There are several locations to add the custom CSS.


Child Theme

1. First, enable your child theme.

2. Paste the codes you wrote into jupiterx-child/assets/less/style.less file.

Note: You can edit style.less file via dashboard in Appearance > Editor or via FTP client and go to wp-content/themes/jupiterx-child folder.

3. Save the file and clear your theme cache.

Customizer

1. From the left menu, go to Appearance > Customize.

2. From the left menu, choose Additional CSS.

3. Paste the codes you wrote and click Save.

Page Settings in Elementor

1. Open a page to which you want to add custom css code (it will be applied only to that page).

2. Click on Edit with Elementor button.

3. On the left side click on a gear icon to open Page Settings and go to Advanced tab.

4. Open Custom CSS/JS section and add your code into Custom CSS box.

Modify the sub footer text in Jupiter X

Jupiter X theme lets you use a default customizer footer or create a new custom footer from scratch using Elementor. To find out the differences between default footer and custom footer in Jupiter X, you can refer to this article

If you’re using the default footer for your website, you can add a sub footer to it. That enables you to have a copyright text and also a menu for your website.

Note: Parent Jupiter X must be installed first before installing the child theme.

Note: Before modifying the Jupiter X child theme, make sure you’ve activated JupiterX Child from WordPress left menu > Appearance > Themes

Modifying The Sub Footer Text in Jupiter X

Changing sub footer text can be done via the Jupiter X child theme. 
Jupiter X’s child theme inherits all features, functionality, and styling from the main Jupiter X theme, which is called the parent theme. Please check out this article to learn more about installing the Jupiter X child theme.

To change the copyright text in sub footer with Jupiter X child theme

1. Use an FTP clients (like Transmit or FileZilla) to access your host web server:

2. Navigate to /wp-content/themes/jupiterx-child



3. Open functions.php with a text editor (like SublimeText or Notepad++)


4. Add the following snippets at the end of the functions.php file:

jupiterx_add_smart_action('jupiterx_subfooter_credit_text_output', 'jupiterx_child_modify_subfooter_credit');

function jupiterx_child_modify_subfooter_credit() { ?>
<!--Your HTML content must be added here->
<?php }


You can add your desired html content inside the callback function to display it as a copyright text in sub footer. For example to replace the default text with this content:

 Jupiter X Child theme for WordPress 

which include two anchor links, all you need to do is add its HTML code to the callback function:

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 }


So at the end, your functions.php should be something like this:


5. Save the functions.php file or upload it in jupiterx-child folder.

Changing “portfolio” slug for Portfolio post type in Jupiter X

You may notice that by default our Portfolio post type uses portfolio slug in the URL, so when you open a single portfolio post, you’ll see this address in the URL: http://yourdomain.com/portfolio/post-name.

But what if you want to use the same name for your custom Portfolio page and show portfolio posts with Elementor widgets and add some other content? If you name your page “Portfolio”, you’ll have the same slug – “portfolio”, but it’s already assigned to default Portfolio post type in the theme and you won’t be able to edit the page with Elementor and get an error.

To fix this, you have 2 ways:

  • The first one is to change your page’s slug to something like “portfolios” or “projects”, so you don’t have the same “portfolio” slug. 
  • The second way is to change default “portfolio” slug for our Portfolio post type, so you can use “portfolio” slug for your custom page:

1. Install the child theme.

2. Go to Appearance > Editor and open functions.php file. Or you can edit it via FTP in wp-content/themes/jupiterx-child directory.

3. Add the code in the functions.php file:

add_filter( 'register_post_type_args', 'wpse247328_register_post_type_args', 10, 2 );
function wpse247328_register_post_type_args( $args, $post_type ) {

if ( 'portfolio' === $post_type ) {
$args['rewrite']['slug'] = 'projects';
}

return $args;
}


4. Go to WP Dashboard > Settings > Permalinks and save changes without editing anything. This is needed to refresh the permalinks so that the new changes take place.

After that, you are free to use “portfolio” slug for a custom Portfolio page.

Adding Custom Fields to a single blog post

To be able to add custom fields to a single blog post, you need install the plugin Advanced Custom Fields PRO. It’s bundled with Jupiter X and can be installed via Jupiter X > Control Panel > Plugins as described in this article.
If you want to add some link or text to post meta section, at first you need create a field to show it in the backend editor of your post like a setting where you’ll be able to insert your text, link or other field type.


Note:
 Another plugin that can be used to create custom fields is JetEngine which is also bundled in Jupiter X and can be installed via Jupiter X > Control Panel > Plugins.
How to add custom fields using this plugin, refer to the 
official documentation and also watch their video tutorial.

The Advanced Custom Fields plugin makes it very easy to add custom fields to a Post, please follow the steps below.

1. From the Custom Fields admin screen, click the Add New button to create a new field group.

2. Add the fields you would like to see when editing a Post. You can select any field type: text, link, image, button, etc. See more here.
For example we want to add an author email in the meta section. We select Email as Field Type. Configure other settings for your needs.


3.
 Under Location, select one of the Post related rule types (such as Post Type) and then select the corresponding value to show this field group. In our case we select Post.


Note:
 Leave the Style setting as ‘Standard’ if you wish for the field group to appear within a WP Postbox.

4. Publish the changes.

Now you can edit a post and you’ll see the option to add an email address.

Don’t forget to update the post after making changes.

Now to be able to show this email address on a single post page in post meta section, you need install the child theme and edit functions.php file.
It can be edited via FTP in wp-content/themes/jupiterx-child/functions.php or via WP Dashboard in Appearance > Editor.

Add this code in the functions.php file:

add_action( 'jupiterx_post_header_after_markup', function() {
    echo the_field('email');
} );


Change email to your custom field name that can be found in the Custom Fields settings:

If you want to add some text to beside the email address, the code should be like this:

add_action( 'jupiterx_post_header_after_markup', function() {
    echo 'Author email: ';
    echo the_field('email');
} );

This way the custom field will be added under the post meta section:

Note: You can use the following suffixes with the markup-ids:
// _after_markup
// _before_markup
// _append_markup
// _prepend_markup
For example, if you want to show a custom field before featured image on a post, you can use this code:

add_action( 'jupiterx_post_image_before_markup', function() {
    echo 'Author email: ';
    echo the_field('email');
} );

You can look for other markups of a single blog post in wp-content/themes/jupiter/lib/templates/fragments/post-single.php


Note: To get more details on ACF plugin usage, refer to their documentation.

How to create Custom Post Type in Jupiter X

Using Custom Post Types, you can build different kinds of websites. 

Along with Elementor, you can use some plugins which help you manage custom post types and create custom content for your needs. 

Note: In order to create templates for your custom post types, you need to use check this article.  

What Are Custom Post Types?

Post Types is a term used to refer to different types of content in a WordPress site.

WordPress by default comes with the following types:

  • Post
  • Page
  • Attachment
  • Revision
  • Nav Menu

You may want to build some custom content with custom URLs that are not related to the default WordPress or Jupiter X post types. In this case, you can create your own Custom Post Types.

Note: Jupiter X provides only one custom post type – Portfolio by default. However, you can create as many post types as you want using custom coding or third-party plugins. More information about it, you can find in this article.

Create Custom Post Types With JetEngine

JetEngine is the ultimate plugin to create and manage custom post types in any WordPress theme, here is how it works in JupiterX

  1. Install and activate JetEngine plugin from JupiterX control panel > Plugins
  2. Navigate to WordPress dashboard JetEngine > Post types

On this window you will see options to create new custom post types or view existing post types you already created them:

3. Click Add new button to create new custom post type, and a new screen with the custom post type configuration will appear.

General setting – here you have to provide the name of your post type and the slug

Labels – this setting is for labeling your post type in the different areas of the WordPress, here you can define settings such is a singular name, adding new item name, name in search, default featured image and other labels

Advanced Settings – you will be able to configure settings, such as publicity, appearance in the admin menu/ nav menu, a rewritten slug, capability type, a menu icon, select which default field types the custom post type should support (e.g., you can choose the Title, Editor, Comments, Thumbnail, etc.)

Meta fields – in this field you can define custom meta fields for your CPT, To learn more about creating different types of meta fields for the CPT take a look at this tutorial.

Admin Columns – This option provides the ability to add additional admin columns to the custom post type, it will be displayed in the WordPress dashboard

4. Once you configure all these settings click on the Add post type button, new post type will appear in the WordPress dashboard menu

In-depth review and step by step process including video tutorials about JetEngine custom post types can be found at authors website here.

Create Custom Post Types With Plugins

There are some plugins you can use to create a custom post type:

  • CPT UI. This is one of the most popular plugins for adding custom post type. Also the plugin Advanced Custom Fields can be used with it to add custom fields. ACF plugin is already bundled in the theme.
  • Toolset TypesAnother plugin to create custom post types. Toolset has a wider range of solutions than other plugins. For example, you can use it to create an advanced search form for your custom post types.
  • PodsThis plugin gives you the ability to add custom content that includes custom post types and custom fields.


We describe the use of CPT UI plugin.

1. To install the plugin, you can follow the instruction that is suitable for any free 3rd-party plugins and described here.

2. Once you installed CPT UI, go to the CPT UI dashboard on the left side of your dashboard and fill in all the required fields, for example:

Post type slug: employees
Plural label: Employees (notice the capital E)
Singular label: Employee

3. Under Additional labels you can customize the names of other native WordPress fields, but on this example, we’ll leave it as the default. You can also read CPT UI documentation.

4. Under the Built-in taxonomies setting, check Categories and Tags, so you can order your posts under parent categories and a user will be able to browse through posts using tags and categories.

5. Once you configured the settings, just click Add post type button. 


You’ll see a CPT label appearing as a new WordPress dashboard item.

Click on it, and you’ll see it behaves the same as Posts and Pages, and you can create a new Employee item. 

The next step is to add custom fields to make CPT structure different from posts and pages.

Note: Under Dashboard > Elementor > Settings, make sure your post type (like Employees) is checked as a supported CPT. This way Elementor page builder will be enabled on the custom post type you created.

Create Custom Fields Using ACF

Advanced Custom Fields plugin is already bundled in the theme and can be installed via Jupiter X Control Panel.

1. In the WordPress dashboard, under ‘Custom Fields’, add a new custom field and call it ‘Employees Settings’, for example.

2. Set Field Label to ‘Position’ or any other name you need. The field name will automatically get filled as ‘position’.

3. Set the Field Type to ‘Text area’.

4. Under Location, set a rule to show this field group if Post Type is equal to Employees (select the post type you created).

To find out what field type to use and to learn the other settings of ACF, refer to their documentation.

Create Demo Content

To add content to a custom post type:

 1. Go to your custom post type from the Dashboard menu on the left and click on Add New

2. Add atitle to your post and create some content. You can use Elementor page builder to add any widget to a post.

Note: Under Dashboard > Elementor > Settings, make sure your post type (like Employees) is checked as a supported CPT. This way Elementor page builder will be enabled on the custom post type you created.

Under the custom Position field add the position for your employee, separating each position with a new line.

Displaying CPT Content in Single & Archive Templates

You can create Archive and Single Post templates for your Custom Post Types. for more information please refer to this article.



Displaying Jupiter X Post Options in a Single Custom Post Type Editor

When creating a post for a custom post type, you may notice there is no Post Options section as on the pages, blog and portfolio posts where you can change the page layout, edit header/footer, etc.

You just need to enable the custom post type in Jupiter X -> Control Panel -> Settings to be able to see these options. After that Post Options will appear in a single editor of a custom post type and you’ll be able to change settings for each post.


Note:
 This code block adds the meta options for defined custom post type but some meta options may not work for some custom post types because of some technical limitations (for example it’s not possible to set sidebar for single product page via this Post Options section). Other options will work fine.

Tracking “Button onClick” Event

Tracking the “Button onClick” event is useful for Facebook Pixel, Google Analytics or Google Tag Manager.


Note:
 It’s assumed that you are already familiar with JavaScript, and using the developer tool in browsers to inspect elements. To learn more about it, read the Inspecting elements and Inserting Custom JavaScript Codes articles.

Follow the steps bellow to track Button onClick events:

1. Using the browser developer tool, inspect your Button element and get its ID.

2. From the WordPress left menu, go to Jupiter X > Control Panel > Settings > Tracking Codes.

3. Paste the following codes:

<script>document.addEventListener("DOMContentLoaded", function(event) { 
jQuery('#My_Button a').click(function(){
// tracking code here
// for example Facebook Pixel:
fbq('track','AddToCart');
});
});
</script>


Note:
 Replace #My_Button a ID with the ID or class name that you found in the Inspector Tools.

4. Click on the Close and Publish the changes.

Use Growmatik to measure the performance of your Jupiter X website and get actionable insights to promote growth.

Inserting Custom JS

Sometimes you find yourself needing to add custom JS codes in order to add or override some sections.

In this article, we’ll explain how to add custom JS using an example about overriding the single blog post.


Writing JS Code

The custom JS section has a text box where you can write your custom JS code. You can write 2 types of JS code in this box. You can either type jQuery code or simple JavaScript code.

jQuery is already available in the theme and you just need to make sure to write the jQuery code into the jQuery ready function which is pre-available in the text box.

jQuery(document).ready(function(){
//Write your jQuery code inside this function

});

In case, you want to write the simple JavaScript code, you can write that outside of the jQuery ready function like below example.

jQuery(document).ready(function(){

});

//Simple JavaScript code outside the jQuery ready function
console.log('Hello this is normal JavaScript code writter outside jQuery ready function');

Or you can also remove the jQuery ready function from the textbox to write the simple JavaScript code.

For the purpose of this article, we’ll write custom JS code that hides the metadata of a single post.

To Hide the Metadata:

1Open one of your single posts. In this example, we’ll use our live demo page.

2There are three types of metadata: post date, post category and comments/likes. To disable all of them you’ll need to inspect them first.

custom js

3Inspect the above mentioned meta data and take note of its HTML class, which here is entry-meta.

custom js

4Write the appropriate JS code.

jQuery(document).ready(function(){
    $('.entry-meta').hide();
});

5Take note of this code and add it into the theme settings as explained in the next section.


Inserting the JS Code

After writing the JS code, you can insert them into The Ken theme. You can add the JS code in Theme Settings.

Theme Settings

To add the custom JS code into Theme Settings:

1From the WordPress top menu, go to Theme Settings > Custom JS.

2Paste the codes you wrote into the Custom JS section and Save the changes.

The contents of this textbox are automatically added to a script tag to ensure it’s working. The script is then placed in the footer of the document/page/site.

API Integrations

API integration is an option that allows you to use widgets such as a Twitter feed, MailChimp or other third-party plugins related to social media or Google Analytics. You will need to set some options on those third-party websites and enter keys into the Theme Options > Global Settings > API Integrations section of Jupiter.

api integrations

In this article we’ll describe the options available in API integrations and how to get API keys.


Twitter Settings

To be able to use Twitter widget or Twitter Feeds element in Visual Composer editor, you need get Twitter keys at first.

1At first you must apply for a Twitter developer account and be approved before you may create new apps.

Once approved, you will be able to create new apps from developer.twitter.com.

2Log in to the developer portal on this site (must have applied or have been approved) or apps.twitter.com using your Twitter credentials.

3Open the Twitter app for which you would like to generate access tokens.

4Navigate to the “Keys and Tokens” page.

5Select ‘Create‘ under the “Access token & access token secret” section.

6Fill in the required fields with the received data.

api integrations


MailChimp Settings

If you decided to use MailChimp Subscribe Form in the header toolbar or the MailChimp Subscribe Form shortcode from Visual Composer editor, you need create MailChimp API key and List ID to get it working.

How to generate API key is described in the MailChimp documentation and about List ID please read here.

There is another option in MailChimp settings: Mailchimp Opt-In Email. Activate it if you want the subscribers to receive a Please Confirm Subscription email.


Other Integrations

Google Maps API Key

Google Maps API Key is required when you show a google map on your pages with help of Advanced Google Maps shortcode. To get the key please follow these steps:

2Create or select a project.

3Click Continue to enable the API and any related services.

4On the “Credentials” page, get a Browser key (and set the API Credentials).

Read more about getting Google API here.

This field is here to track your site with Google Analytics. Jupiter does not support Event Tracking. To use this feature, a 3rd-party plugin is required, like Tracking Code Manager.

Also we suggest you to read our post about Google Analytics. We hope it will be interesting for you.

Typekit Kit ID

Typekit Kit ID field is required to use Typekit fonts.

How to get this ID you can find in the article Integrating Typekit.

 

If you have any questions regarding API Integrations, please don’t hesitate to contact our support team.

How to Increase Max Input Vars

When you see Maximum Input Vars notification in the Jupiter Control Panel, it means you need to increase Max Input Vars in your host to be able to use the maximum potential of our theme.

Depending on your hosting configurations, there are different methods that can be applied to increase Max Input Vars. In this article we have listed the most common scenarios.


What is Max Input Vars?

It limits the number of input variables, this limitation affects $_GET, $_POST and $_COOKIE superglobal separately. In our theme, it can affect menus.


Increasing Max Input Vars in .htaccess File

It’s possible to increase it from .htaccess file in root WordPress installation’s directory. For this you need connect to your server via FTP (using some FTP client like FileZilla), find .htaccess file in the root of your site directory (or create it yourself if it’s missing) and add below lines of codes at the end of the .htaccess file:

php_value max_input_vars 1000
php_value suhosin.get.max_vars 1000
php_value suhosin.post.max_vars 1000
php_value suhosin.request.max_vars 1000


Increasing Max Input Vars in php.ini File

For this scenario you should also connect via FTP or log in to the CPanel of your hosting provider.

At the end of the php.ini file, add below lines of codes. The php.ini file can be found in /user/local/bin/, /etc/php5/ or … depending on the host provider. If you can not find it, it’s better contact your hosting provider. On some hosting providers, you can create a php.ini file in the root directory and just add the following codes to override the default values.

max_input_vars = 1000
suhosin.get.max_vars = 1000
suhosin.post.max_vars = 1000
suhosin.request.max_vars = 1000


Increasing Max Input Vars using PHP5.x.x version

Most of the shared hosting companies like GoDaddy and Bluehost are still using PHP5.X.X version and PHP5 requires php5.ini and .user.ini files. If you’re dealing with PHP5 server, please also create php5.ini and .user.ini files in the root directory. These files should contain the codes mentioned above.

You might also need to copy those 3 files (php.ini, php5.ini, .user.ini) to wp-admin directory in order to make the changes applied.


Recommended Hosting Solutions

The following hosting services offer maximum compatibility with Jupiter and provide exclusive discounts to Artbees Themes users:

InMotion > Up to 50% Discount
WPEngine > 20% Discount
DigitalOcean > $10 Discount
MediaTemple > 2 Months free on Annual Plan


Troubleshooting steps

If the applied changes are not affecting and the notification in Jupiter Control Panel is still appearing, please follow below steps.

1Contact Host Provider.

If you can not find the php.ini or .htaccess file or the applied changes are not working as expected, it is best to contact the hosting provider. They’re the first people that can help you further about this issue.

2Duplication of php.ini file.

It is possible another php.ini file exists in your host’s directories (for example, inside wp-includes directory) which affects the above values. Check your host directories.

3Open a ticket in our Help Desk.

If none of the above steps helped, please open a ticket in our help desk.

Beta Testing Program

Beta testing is the last stage of testing. What we do is send the beta version of Jupiter theme to individual users (Beta testers) outside of the company to get real-life, in-time exposure. This audience will try the product out and report the issues that they’ve found.

 

The experiences and reports of the early users are forwarded back to our developers who then make final changes before releasing the stable version of Jupiter.


Why we need beta testing and you?

Beta testing serves the following multiple purposes: Quality, performance, stability, security and reliability from the user’s point of view.

Developers have to maintain the functionality and quality of the Jupiter simultaneously, but sometimes too much functionality can harm the quality and user experience. Also some bug fixes may, in turn, break other existing functionalities.

There can be some factors that can affect the performance of Jupiter and, in some cases, those variables are almost impossible to reproduce in our testing environments because the performance tests conducted in the lab do not reflect the real results in the real world. In these cases, the only way to analyze the performance of Jupiter is by putting it out in the real world to get tested.

Based on your feedback, developers can improve Jupiter including its features, performance, and design to meet your requirements and standards. It can’t be emphasized enough how important your reports and feedback is to help our developers quickly discover steps and fix them.

And as an experienced WordPress and Jupiter user, you are the best person to evaluate our product and testing its quality, performance, stability, security and overall reliability.


How to be a beta tester?

Well, it’s actually quite easy to be a beta tester! First of all, you need to go to https://themes.artbees.net/dashboard/releases/ page and login with your credentials. Under the Subscribe to Beta Releases section, please check the “Beta Testers” checkbox and then click the “Update” button.

When you successfully enroll as a beta tester, you will receive an email notification that notifies you when our beta version is released and ready for your testing.


How to test?

In order to start testing, you first need to download the latest Beta version of Jupiter from our dashboard (https://themes.artbees.net/dashboard/releases/) and set it up on your server.

You can set up the beta release package on a live server or localhost.


What is the test’s scope?

Tests only need to be done on the changed / added areas. The test scope will be defined in the forum thread and in the e-mail that you will get right after beta version is released.


How to report a bug?

Once you’ve detected a bug, you can send your report to us via the http://forums.artbees.net/c/beta-testers forum page.

Please do not forget to add additional details (such as screenshots, server environment details etc.) while reporting an issue so our developers can replicate the issue and fix them quickly before releasing the stable version.

 

Configuring Post Types Slug

URL slug is the exact address of a specific page or post on your site. In theme options you have possibilities to change the slug for some post types.

In this article we’ll describe how to configure the slug for different post types.


Configuring the Slug for News Post Type

News Slug is the text that is displayed in the URL (e.g. www.domain.com/news-posts/morbi-et-diam-massa/). As shown in the example, it is set to news-posts by default but you can change it to anything to suite your preference.

To do this please follow the steps below:

1From the WordPress left menu, go to Jupiter > Theme Options > Blog > News.

post types slug

2Change news-posts default slug in the field Slug.

post types slug

3Click on the Save Settings button.


Configuring the Slug for Portfolio Post Type

As News slug, you can also change portfolio slug for single portfolio posts.

1From the WordPress left menu, go to Jupiter > Theme Options > Portfolio > Portfolio Single Post.

post types slug

2Change portfolio-posts default slug in the field Portfolio Slug.

post types slug

3Click on the Save Settings button.

You can also change slug for Portfolio archive pages. Do this in the field Portfolio Category Slug. The default slug is portfolio_category.


Configuring the Slug for Single Employee Post Type

The default slug for single posts of Employee post type is team e.g. www.domain.com/team/adam-g-christian/

Unlike the above two options, slug for Employee post type can’t be configured via Theme Options.

In this case you’ll have to edit theme files via FTP or your hosting control panel.

1Connect to your server using some FTP client like FileZilla or go to file manager via your hosting control panel.

2Go to the directory wp-content/themes/jupiter/framework/custom-post-types.

3Open the file config.php and find the line 256.

post types slug

4Replace team slug in the code below to any text you need:

'slug' => _x('team', 'URL slug', 'mk_framework') ,

5Save the file.
If you have any issues configuring the slugs, please create a ticket to get a solution from our support.

Robots.txt File

WordPress offers a lot of SEO benefits and users need to do some tweaking to ensure they have a better search engine optimized site. In this article we’ll talk about robots.txt file and how to hide the archive pages for custom post types from the search engines.


What Is the Robots.txt File?

Robots.txt is a web standard developed by Robots Exclusion Protocol (REP) to regulate the behavior of robots and search engine indexing.

Robots.txt file helps search engine robots to direct which part to crawl and which part to avoid. When Search bot or spider of Search Engine comes to your site and wants to index your site, they follow Robots.txt file first. Search bot or spider follows this files direction for index or no index any page of your website.

If you are using WordPress, you will find Robots.txt file in the root of your WordPress installation. It is easy to access the robots.txt file, simply type the domain name and add “robots.txt” at the end of the URL, for example: http://yourdomain.com/robots.txt


Structure of the Robots.txt File

Robots.txt is a general text file. So, if you don’t have this file on your website, open any text editor as you like ( as the example: Notepad) and make one or more records and save the file as “robots.txt“. Every record bears important information for search engine. Usually, an unmodified WordPress robots.txt file looks like this:

User-agent: *
Disallow: /wp-admin/


The * (asterisk) mark with User-agent implies that all search engines are allowed to index the site. The Disallow condition prevents the search engines to index some portions of the site like wp-admin, plugins and themes because they are sensitive information and if indexing them is allowed, it will put the site at grave risk.
Another example:

User-agent: googlebot
Disallow: /cgi-bin

It means that it’s allowed Google bot for index every page of your site. But cgi-bin folder of root directory isn’t allowed for indexing. Google bot won’t index cgi-bin folder.

By using Disallow option, you can restrict any search bot or spider for indexing any page or folder. There are many sites who use no index in Archive folder or page for not making duplicate content.


Editing the Robots.txt File

You can either edit your WordPress Robots.txt file by logging into your FTP account of the server or you can use plugin like Robots TXT to edit robots.txt file from WordPress dashboard. There are few things, which you should add in your robots.txt file along with your sitemap URL. Adding sitemap URL helps search engine bots to find your sitemap file and thus faster indexing of pages.

Here is a sample Robots.txt file for any domain. In sitemap, replace the Sitemap URL with your site URL:

sitemap: https://www.your_domain.com/sitemap.xml

User-agent:  *
# disallow all files in these directories
Disallow: /cgi-bin/
Disallow: /wp-admin/
Disallow: /archives/
Disallow: /comments/feed/
User-agent: Mediapartners-Google*
Allow: /
User-agent: Googlebot-Image
Allow: /wp-content/uploads/

User-agent: Adsbot-Google
Allow: /

User-agent: Googlebot-Mobile
Allow: /


Stopping Search Engines from Indexing Specific Posts and Pages

Search engine spiders will crawl your whole website to cache your website’s pages for their index. In general, most website owners are happy for search engines to crawl and index any page they want; however there are situations where you would not want pages to be indexed.

For example, if you are developing a new website, it is usually best if you block search engines from indexing your website so that your incomplete website is not listed on search engines. This can be done easily through the Settings > Reading page in the WordPress Dashboard.

All you have to do is scroll down to the Search Engine Visibility section and enable the option entitled “Discourage search engines from indexing this site”.

robots.txt file

Robots Meta Tag Overview

Google advises websites owners to block URL’s using the robots meta tag. The robots meta tag follows this format:

<meta name="value" content="value">

The robots meta tag should be placed within the <head> section of your WordPress theme header i.e. between <head> and </head>. There are a few different values available for the name and content attributes. The values that Google advise using to block access to a page are robots and noindex:

<meta name="robots" content="noindex">

Robots refers to all search engines while noindex disallows the search engine from displaying the page in their index.

If you want to block content from a specific search engine, you need to replace the value of robots with the name of the search engine spider. Some common search engine spiders are:

Name Description

googlebot Google
googlebot-news Google News
googlebot-image Google Images
bingbot Bing
teoma Ask

All you have to do to block a specific crawler is replace robots with the name of the spider.

<meta name="googlebot-news" content="noindex">

Multiple search engines can be blocked by specifying more spiders and separating them by commas.

<meta name="googlebot-news,bingbot" content="noindex">

So far, you have only seen the noindex meta tag being used, however there are many values that can be used with the content attribute. These values are normally referred to as directives.

For reference, here is a list of the most common directives that are available to you:

Name Description

all No restrictions on indexing or linking.
index Show the page in search results and show a cached link in search results.
noindex Do not show the page in search results and do not show a cached link in search results.
follow Follow links on the page.
nofollow Do not follow links on the page.
none The same as using “noindex, nofollow”.
noarchive Do not show a cached link in search results.
nocache Do not show a cached link in search results.
nosnippet Do not show a snippet for the page in search results.
noodp Do not use the meta data from the Open Directory Project for titles or snippets for this page.
noydir Do not use the meta data from the Yahoo! Directory for titles or snippets for this page.
notranslate Do not offer translation for the page in search results.
noimageindex Do not index images from this page.
unavailable_after: [RFC-850 date/time] Do not show the page in search results after a date and time specified in the RFC 850 format.

Adding the Robots Meta Tag to the Theme Header

In order to block a specific post or page, you need to know its post ID. The easiest way to find the ID of a page is to edit it. When you edit any type of page on WordPress, you will see a URL such as https://www.yourwebsite.com/wp-admin/post.php?post=15&action=edit in your browser address bar. The number denoted in the URL is the post ID. It refers to the row in the wp_posts database table.

Once you know the ID of the post or page you want to block, you can block search engines from indexing it by adding the code below to the head section of your theme’s header.php template between <head> and </head>. You can place code anywhere within the head section; however we recommend placing it underneath, or above, your other meta tags, as it makes it easier to reference later.

<?php if ($post->ID == X) { echo '<meta name="robots" content="noindex,nofollow">'; } ?>

In the code above, X denotes the ID of the post you want to block. Therefore, if your page had an ID of 15, the code would be:

<?php if ($post->ID == 15) { echo '<meta name="robots" content="noindex,nofollow">'; } ?>

As all post types are stored in the wp_posts database table, the above code will work with any type of page; be it a post, page, attachment, or custom types such as galleries and portfolios.

You can block additional pages on your website by using the OR operator.

<?php if ($post->ID == X || $post->ID == Y) { echo '<meta name="robots" content="noindex,nofollow">'; } ?>

You simply need to specify the ID of the pages that you want to block. For example, say you want to block search engines from indexing posts and pages with ID 15, 137, and 4008. You can do this easily using:

<?php if ($post->ID == 15 || $post->ID == 137 || $post->ID == 4008) { echo '<meta name="robots" content="noindex,nofollow">'; } ?>

To confirm that you have configured everything correctly, it is important to verify that you have blocked the correct pages from search engines. The simplest way to do this is to view the source of the page you want to block. If you have added the code correctly, you will see <meta name=”robots” content=”noindex,nofollow”> listed in the head section of the page. If not, the code has not been added correctly.

Stop Search Engines Crawling a Post or Page Using Robots.txt

The concept behind the Robots.txt protocol is the same as the robots meta tag. There are only a few basic rules.

  • User-agent – The search engine spider that the rule should be applied to
  • Disallow – The URL or directory that you want to block

Here are a few examples to help you understand how to use a robots.txt file to block search engines.

The code below will block search engines from indexing your whole website. Only add this to your robots.txt file if you do not want any pages on your website indexed.

User-agent: *
Disallow: /

To stop search engines from indexing your recent announcement post, you could use something like this:

User-agent: *
Disallow: /2014/06/big-announcement/

Another rule that is available to you is Allow. This rule allows you to specify user agents that are permitted. The example below shows you how this works in practice. The code will block all search engines, but it will allow Google Images to index the content inside your images folder.

User-agent: *
Disallow: /
 
User-agent: Googlebot-Image
Allow: /images/

To stop crawling custom post type, simply use this syntax in robots.txt file:

User-agent: *
Disallow: /your-custom-post-type-slug/

So for example, you have a custom post type “Portfolios” with a slug “portfolios”, below will be the robots.txt:

User-agent: *
Disallow: /portoflios/

There is also a way to do it with a function. You can add the noindex-tag by adding this in your functions.php file:

function noindex_for_portfolios()
{
    if ( is_singular( 'portfolios' ) ) {
        echo '<meta name="robots" content="noindex, follow">';
    }
}

add_action('wp_head', 'noindex_for_companies');

 

If you have any questions or difficulties setting up the robots.txt file, you can create a ticket to our support to get some help.

Overriding Shortcodes

NOTE: If you already had a child theme and overrode some shortcodes before Jupiter 6.3 and Donut plugin, you need to rename your “components” folder in jupiter-child to “wpbakery” to make it work with Donut. 


Shortcodes make the main content on your Jupiter website. Every shortcode has its own functionality and styling, most of it is configurable in the shortcode settings. However, if you need more customization, one way is to override a shortcode in the child theme.

In this article, we’ll explain about overriding shortcodes in the child theme.


Shortcodes Directory (< Jupiter 6.3)

In the Jupiter theme there is a Shortcodes directory which is located in wp-content > themes > jupiter > components > shortcodes in your web host.

The shortcodes directory contains all of the shortcode files, each responsible for a specific shortcode. The names are intuitive and you will be able to identify which file is for which shortcode, simply by checking the name of the file.

Shortcodes Directory (> Jupiter 6.3 and Donut Plugin)

In the Donut Plugin there is a Shortcodes directory which is located in wp-content > plugins > donut > includes > wpbakery > shortcodes in your web host. 

The shortcodes directory contains all of the shortcode files, each responsible for a specific shortcode. The names are intuitive and you will be able to identify which file is for which shortcode, simply by checking the name of the file.


Overriding Shortcodes Directory

In the WordPress world, the term “override” means to copy a file from the parent theme and paste it to a child theme with the same directory hierarchy, then editing the copied file. WordPress loads the edited file automatically.

Below, as an example we will override contact form shortcode to change the icons displayed on the front-end of your contact form:

1 Create components > shortcodes  > mk_contact_form > components directory in your child theme with the same directory hierarchy as the parent theme.
  • Parent theme: wp-content > themes > jupiter > components > shortcodes > mk_contact_form > components
  • Child theme: wp-content > themes > jupiter-child > components > shortcodes > mk_contact_form > components
2From the parent theme copy the email-field.php file to the child theme’s directory created above.
3Open the file in your favorite code editor. Locate the below line of the code around the 12. line.
overriding shortcodes
4Change the “mk-li-mail” to another icon class name to change the icon. To find all icon class names, from WordPress left menu, go to Jupiter > Control Panel > Icon Library. In this example, we’ll choose mk-li-pencil.
overriding shortcodes
5Change the icon class name in the above codes. Your code should look like below.
overriding shortcodes
6Save the changes. If you are editing the file locally, make sure to upload it to your server.
7Clear the theme cache and check your site to see the applied changes.

Overriding the shortcodes in Donut Plugin

Note: If you use Jupiter v6.3 or higher along with the Donut plugin, instead of “components” folder in the child theme, you would need to have a “wpbakery” folder. The rest of the above steps are still valid. So, if you want to override

wp-content/plugins/donut/includes/wpbakery/shortcodes/mk_blog/ 

in a child theme, you would need to copy the above folder to

wp-content/themes/jupiter-child/wpbakery/shortcodes/mk_blog/

Override WooCommerce templates

If you are not using the Shop Customizer, you can easily copy the WooCommerce templates into your child theme’s “woocommerce” folder and start overriding them.

wp-content/themes/jupiter-child/woocommerce/

However, as soon as you enable the Shop Customizer in the Jupiter -> Theme Options -> Shop, the woocommerce override directory will change to:

wp-content/themes/jupiter-child/framework/admin/customizer/woocommerce/

So, you would need to place your overrides in the above directory and if not exist, create the directory first.

Inspecting Elements

Browser developers tools are very useful for developers to debug, test and check web pages. Inspecting elements is one of the most powerful and useful tools in browsers.

In this article, we’ll introduce some great articles that will help you learn about the Chrome developer tools. Other browsers also have developer tools that offer similar features.

Discover DevTools

This is a free video series from Code School which explains almost all the developer tools with practical examples. The first video is about inspecting elements.

Check out this page to watch the videos.

Inspect Element: How to Temporarily Edit Any Webpage

This is a very well written tutorial about inspecting elements which explains the different use of developer tools. Reading this article is recommended.

Chrome DevTools

This is the official documentation for the Chrome developer tools. You can find detailed tutorials in the official documentation.

Inserting Custom JavaScript Codes

Sometimes you find yourself needing to add custom JavaScript to add or override a functionality or visualization. There are several locations where you can add custom JavaScript in the Jupiter theme.

 

In this article, we’ll explain how to add custom JavaScript to different locations using two examples changing the “Read More” button text in the blog and opening external links in a new tab from the image gallery shortcode.


Writing JS code

For the purpose of this article, we’ll write some custom JavaScript codes that change the “Read More” button text in the blog and open external links in new tabs from image gallery shortcode.

 First Example:

To change the “Read More” button text in the blog:

1Open your site and go to the blog page.

2Inspect the “Read More” button to find the correct class name.

custom javascript

3Write the appropriate JS code.

(function($){
var a = function(){
var b = $('.mk-readmore').html();
b = b.replace('Read More', 'Your text');
$('.mk-readmore').html(b);
};
$(document).ready(a);
a();
})(jQuery);

5Take note of these codes and add them to the theme as explained in the next section.

Second Example:

To open external links in new tabs from the image gallery shortcode:

1Open the page editor where you added the image gallery shortcode.

2Open image gallery shortcode settings.

custom javascript

3Add custom links separating them with commas.

4Write the JS code.

jQuery( document ).ready(function() {
 jQuery(".mk-gallery-item .item-holder .full-cover-link").attr("target","_blank");
});

5Take note of these codes and add them to the theme as explained in the next section.


Inserting the JS Code

After writing the JS codes, it’s time to insert them into Jupiter theme. There are several locations where you can add the custom JS.

Theme Options

To add the custom JS into Theme Options:

1From the WordPress left menu, go to Jupiter > Theme Options > Advanced > Custom JS.

custom javascript

2Paste the codes you wrote in the Custom JS field.

custom javascript

3Click on Save Settings.

In a Raw Javascript Shortcode Inside a Page

You can add the JS fix individually to each page using Visual Composer.

1Open the page editor where you wish to make changes.

2Click on Add New Element in the Visual Composer editor.

custom javascript

3Look for the Raw JS shortcode and add it to the page.

4Add your custom JS code to the JavaScript Code section.


Common Issues

To  avoid common JS problems, we recommend that you read the articles in the links below:

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Howto

If you can’t find a solution to your issue, please create a ticket and our support staff will help you.

Adding Custom Settings to Theme Options

DEPRECATED Since Jupiter 5.7

In this article we’ll describe how to add new options in Theme Options. In Jupiter 5.5 version we added filters to be able to achieve this through child theme.

How to create child theme you can read in the article Installing Jupiter Theme and Child Theme.


Creating Functions.php File in the Child Theme

To be able to add custom options you need write your code in the functions.php file in your child theme.

From the link above you found instruction how to create a child theme. Now add functions.php file:

1Connect to your server.

You can do this via FTP client such as Filezilla or go to your local computer if you installed your website locally on your machine.

2Access the directory below:

wp-content > themes > jupiter-child

3Create a new file with the name functions.php

Now that you have the file inside the Child Theme you can make the code changes you want.


Adding Custom Code for a Custom Option

Open functions.php file in the child theme with your favorite editor and write the code of an option you want to add, in our case we’ll add the option Portfolio Archive Layout 2 that allows to define the layout of Portfolio Archive page as full width without sidebar, left sidebar or right sidebar:

function mk_add_theme_options_custom_menu()
{ echo '<li><a href="#mk_options_custom_menu"> <svg width="18px" height="30px" viewBox="0 0 18 30" enable-background="new 0 0 18 30" xml:space="preserve"> <path d="M11.557,3.532l-1.151,9.345L10.266,14h1.133h4.578L6.443,26.467l1.152-9.345L7.734,16H6.602H2.023 L11.557,3.532z M0,17h6.602L5,30l13-17h-6.602L13,0L0,17z"/> </svg> <span> ' . __("Custom menu", "mk_framework") . '</span></a></li>'; }
add_action('mk_jupiter_theme_options_main_menu', 'mk_add_theme_options_custom_menu');
// ---------------------------------------------------
function mk_add_custom_sub_menu( $options )
{ $options = mk_theme_options_add_sub_menu( $options, 0, 'mk_options_custom_settings', 'Custom Settings' ); return $options; }
add_filter('mk_jupiter_theme_options_settings', 'mk_add_custom_sub_menu');
// ----------------------------------------------------
function mk_add_custom_sub_menu_settings_page( $options )
{ $options = mk_theme_options_add_sub_menu_settings_page( $options, 0, "mk_options_custom_settings", "Custom Settings", "some descripiton" ); return $options; }
add_filter('mk_jupiter_theme_options_settings', 'mk_add_custom_sub_menu_settings_page');
// ----------------------------------------------------
function mk_add_custom_settings( $options )
{ $settings = array( "name" => __("Portfolio Archive Layout 2", "mk_framework") , "desc" => __("This option allows you to define the layout of Portfolio Archive page as full width without sidebar, left sidebar or right sidebar.", "mk_framework") , "id" => "archive_portfolio_layout_2", "default" => "right", "options" => array( "left" => __("Left Sidebar", "mk_framework") , "right" => __("Right Sidebar", "mk_framework") , "full" => __("Full Layout", "mk_framework") ) , "type" => "dropdown" ); $options = mk_theme_options_add_settings( $options, 0, 9, $settings ); return $options; }
add_filter('mk_jupiter_theme_options_settings', 'mk_add_custom_settings');
//------------------------------------

Here we added sub menu Custom Settings, option page Portfolio Archive Layout 2 and options Full Layout, Left Sidebar, Right Sidebar.

Checking Theme Options in WP Dashboard

Now you can check the result of your customization in the Theme Options of WP Dashboard. As you can see in the screenshot the Custom Settings submenu appeared  in General section of Theme Options.

You can create other options using the code in the example above.

Overriding Widgets

Widgets are an important part of the Jupiter theme. Each widget has specific functionalities, some of them are configurable from the widget settings field but if you need more customization, one way is to override a widget in the child theme. In this article, we’ll explain about overriding widgets in the child theme.


Widgets Directory Introduction

In the Jupiter theme there is a Widgets directory which is located in wp-content > themes > jupiter > views > widgets in your web host.

Overriding widgets - directory

The widgets directory contains all widgets files, each responsible for a specific widget. The names are intuitive and you will be able to identify which file is for which widget simply by checking the name of the file.


Overriding Widgets Directory

In WordPress world, override term means copy a file from parent theme and pasting it to a child theme with same directory hierarchy, then editing the copied file. WordPress loads the edited file automatically.

To override a widget, Contact info, for example:

1Create views and widgets directories in your child theme with same directory hierarchy as parent theme.

  • Parent theme: wp-content > themes > jupiter > views > widgets
  • Child theme: wp-content > themes > jupiter-child > views > widgets

2From parent theme copy widgets-contact-info.php file to the child theme’s widgets directory.

3Now you can edit the widgets-contact-info.php and WordPress loads the file automatically.


Changing Icons in Contact Info Widget

To clarify the overriding process, in this example, we override Contact Info widget to change the Person icon.

1As explained in previous section, we need to copy the relevant widget file to a child theme. In this example, we copy the widgets-contact-info.php file to the child theme’s widgets directory as shown in step 2 above.

2Open the file in your favorite code editor. Locate the below line of codes around the 30th line.

<?php if ( !empty( $person ) ):?><li><?php Mk_SVG_Icons::get_svg_icon_by_class_name(true,'mk-moon-user-7', 16); ?><span itemprop="name"><?php echo $person;?></span></li><?php endif;?>

3We need to change the mk-moon-user-7 to another icon class name to change the icon. To find all icon class names, from WordPress left menu, go to Jupiter > Control Panel > Icon Library. In this example, we choose mk-li-user.

4Change the icon class name in above codes. Your code should look like below.

<?php if ( !empty( $person ) ):?><li><?php Mk_SVG_Icons::get_svg_icon_by_class_name(true,'mk-li-user', 16); ?><span itemprop="name"><?php echo $person;?></span></li><?php endif;?>

4Save the changes. If you are editing the file locally, make sure to upload it to your server.

5Clear your theme cache and check your site to see the applied changes.


Making Texts Clickable in Contact Info Widget

To clarify the overriding process more, in this example, we override Contact Info widget to change the make the Phone number clickable.

1As explained in previous section, we need to copy the relevant widget file to a child theme. In this example, we copy the widgets-contact-info.php file to the child theme’s widgets directory as shown in step 2 above.

2Open the file in your favorite code editor. Locate the below line of codes around the 33rd line.

<?php if ( !empty( $phone ) ):?><li><?php Mk_SVG_Icons::get_svg_icon_by_class_name(true,'mk-icon-phone', 16); ?><span><?php echo $phone;?></span></li><?php endif;?>

3To make the phone number clickable, we need to wrap the $phone with HTML anchor tag and use tel: in anchor href. Replace the above codes with following codes.

<?php if ( !empty( $phone ) ):?><li><?php Mk_SVG_Icons::get_svg_icon_by_class_name(true,'mk-icon-phone', 16); ?><span><a href="tel:<?php echo $phone;?>"><?php echo $phone;?></a></span></li><?php endif;?>

4Save the changes. If you are editing the file locally, make sure to upload it to your server.

5Clear your theme cache and check your site to see the applied changes.

 

Inserting Custom CSS Codes

Sometimes you find yourself needing to add custom CSS codes to add or override some stylings. There are several places to add the custom CSS in the Jupiter theme.

In this article, we’ll explain how to add custom CSS codes into different locations with two examples about overriding the Clear and Bold single blog post.


Writing Custom CSS Codes

For the purpose of this article, we’ll write custom CSS codes to disable the metadata and increase the content width for a single post with the clear and Bold style.

 To Disable the Metadata:

1Open one of your single posts that has the Clear and Bold style. In this example, we’ll use our live demo page.

2There are three types of metadata: author avatar, author name and post date. To disable all of them you’ll need to inspect them first.

Inserting custom css codes - inspect

3Inspect the above mentioned meta data and take a note of their HTML classes. They are mk-author-avatar, mk-author-name, mk-publish-date.

4Write the appropriate CSS codes.

/* Disable author avatar */
.mk-author-avatar {
    display: none;
}

/* Disable author name*/
.mk-author-name {
    display: none;
}

/* Disable publish date */
.mk-publish-date {
    display: none;
}

5Take a note of these codes and add them into the theme as explained in the next section.

Increasing Content Width

To increase the content width in a single blog post styled as Clear and Bold:

1Open one of your single posts which has the Clear and Bold style. In this example, we use our live demo page.

2Inspect the post container and take note of the HTML class. It’s mk-single-content.

3As shown in the image above, the max-width property is set to 700px which means that the maximum width for the post container is 700px. To change the width you’ll need to write the appropriate CSS codes.

/* Increase the content width in single blog post */
.mk-single-content {
    max-width: 980px !important;
}

4Add a .single-post class to the beginning of the codes to make sure that the codes only affect the single post pages.

/* Increase the content width in single blog post */
.single-post .mk-single-content {
    max-width: 980px !important;
}

5Take a note of these codes and add them into the theme as explained in the next section.


Inserting the CSS Codes

After writing the CSS codes, you can insert them into the Jupiter theme. There are several locations to add the custom CSS.

Theme Options

To add the custom CSS into Theme Options:

1From the WordPress left menu, go to Jupiter > Theme Options > Advanced > Custom CSS.

Inserting custom css codes - custom css menu

2Paste the codes you wrote into the Custom CSS section.

Inserting custom css codes - custom css code

3Click on Save Settings.

Child Theme

1First, enable your child theme.

2Paste the codes you wrote into jupiter-child/style.css

3Save the file and clear your theme cache.

Customizer

1From the left menu, go to Appearance -> Customize.

2From the left menu, choose Additional CSS.

3Paste in the codes you wrote and click Save.

Page Settings

You can add the CSS codes individually on each page using Visual Composer.

1From the top right of your page editor, click on Page Settings

Inserting custom css codes - page settings

2Paste your code into the Custom CSS Settings area.

Inserting custom css codes - page settings custom css code

3Click on Save Changes and update or publish your page.


Common Issues

The CSS is added to the Custom CSS field but it doesn’t work. What should I do?

First of all, make sure you have added the correct CSS. You can check it by inspecting the element on your test page.

After that, make sure there is no wrong character in the custom CSS. Sometimes, a simple “/” character will cause many issues on the website. You may also want to check and validate your CSS using a CSS beautifier tool such as cleancss.com.

You should also make sure your CSS has the right priority to apply to the element. Here is an example of when the browser would decide to apply the second CSS to the page, rather than the first one:

1 - Lower priority 2 - Higher priority

body {background: white;} body {background: black !important;}

For more information about CSS priority please visit https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

I imported a custom font using Import in Custom CSS but it didn’t work.

If you want to use a custom font in the theme, please add the import at-rule to the child theme’s style.css. Then you can specify which element should use that font in the Custom CSS section.