File Manager

X7ROOT File Manager

Current Path: /home/notabjze/malakiethegreat.com/wp-content/themes/jupiterx

home / notabjze / malakiethegreat.com / wp-content / themes / jupiterx /

ðŸ“ ..
ðŸ“„ LICENSE(17.67 KB)
ðŸ“„ comments.php(399 B)
ðŸ“„ footer.php(397 B)
ðŸ“„ full-width.php(639 B)
ðŸ“„ functions.php(469 B)
ðŸ“„ header.php(393 B)
ðŸ“„ index.php(313 B)
ðŸ“ lib
ðŸ“„ new-customizer.md(3.04 KB)
ðŸ“„ readme.txt(11.88 KB)
ðŸ“„ rtl.css(122 B)
ðŸ“„ screenshot.png(233.95 KB)
ðŸ“„ sidebar-primary.php(406 B)
ðŸ“„ sidebar-secondary.php(408 B)
ðŸ“„ sidebar.php(257 B)
ðŸ“„ style.css(2.26 KB)
ðŸ“„ wpml-config.xml(3.55 KB)

Editing: new-customizer.md

# New Customizer

## `new-customizer.js`

* The `customizer.js` file is still in use. We just defined a new section type in a new file. It should not be deleted. Old section types (popup, pane) could be deleted from that file.

`JupiterX.ContainerSection`
Defines a new section type called **`container`**.

In this section type, we have `boxes` and `tabs`.
Each section has its own control. **Boxes** are a dummy hierarchy between **Section** and **Controls**. That means, generally we use the same structure as WordPress is using, *Panels->Sections->Controls* but we are adding **Boxes** between **Sections** and **Controls**.

**Tabs** are normal buttons that are adding a CSS Class Name to boxes or removing that class to make specific boxes visible or hidden. This is happening using data attributes.

`api.bind 'ready'`

In this block of code, we are adding raw markups needed for searchbox, grouping panels and sections, and then we attach needed events for search box.

`api.bind 'pane-contents-reflowed'`

In this event, We are moving panels and sections to their own groups. This could not be done in `ready` event because some functionalities are running later and it could cause unwanted results in the view.

`api.reflowPaneContents`

This block of codes is coming from core of WordPress. In order to move controls to their boxes (Instead of having them in root of section and out of Boxes). Also, we are adding support for **Groups** for native WordPress sections and panels like `Widgets`.

* How to add tabs, boxes, and new sections?

```
JupiterX_Customizer::add_section(
	'jupiterx_header',
	array(
		'priority' => 50,
		'title'    => __( 'Header', 'jupiterx-core' ),
		'type'     => 'container',
		'tabs'     => array(
			'settings' => __( 'Settings', 'jupiterx-core' ),
			'styles'   => __( 'Styles', 'jupiterx-core' ),
		),
		'boxes' => array(
			'settings'             => array(
				'label' => __( 'Settings', 'jupiterx-core' ),
				'tab'   => 'settings',
			),
			'logo'             => array(
				'label' => __( 'Logo', 'jupiterx-core' ),
				'tab'   => 'styles',
			),
			'menu'             => array(
				'label' => __( 'Menu', 'jupiterx-core' ),
				'tab'   => 'styles',
			),
			'submenu'          => array(
				'label' => __( 'Submenu', 'jupiterx-core' ),
				'tab'   => 'styles',
			),
			'search'           => array(
				'label' => __( 'Search', 'jupiterx-core' ),
				'tab'   => 'styles',
			),
			'container'        => array(
				'label' => __( 'Container', 'jupiterx-core' ),
				'tab'   => 'styles',
			),
			'sticky_container' => array(
				'label' => __( 'Sticky Container', 'jupiterx-core' ),
				'tab'   => 'styles',
			),
			'sticky_logo'      => array(
				'label' => __( 'Sticky Logo', 'jupiterx-core' ),
				'tab'   => 'styles',
			),
		),
		'help'     => array(
			'url'   => 'https://themes.artbees.net/docs/assigning-the-header-globally',
			'title' => __( 'Assigning the Header Globally', 'jupiterx-core' ),
		),
		'group'    => 'template_parts',
	)
);

```

* In order to dd a control to a box, just set the **`box`** prop like below.

```
'box'         => 'logo',
```

X7ROOT File Manager

Editing: new-customizer.md

Upload File

Create Folder