Skip to content

z Old v1 Documentation

Jump to bottom
Henner Renardi Setyono edited this page Mar 27, 2023 · 1 revision

TABLE OF CONTENTS

  1. Custom Post Type
  2. Custom Taxonomy
  3. Theme Customizer
  4. Shortcodes

1. Custom Post Type

H::register_post_type( $name, [$args] )

$name (string) - Unique name of the post type. Singular and lowercase like: "product", "event".

$args (array) - Optional - Available arguments are:

  • icon (string) - Icon names are listed here.

  • slug (string) - The URL base of this CPT.

  • columns (array) - Order of columns shown in admin panel. Read more.

  • supports (array) - Add various functionality to the Post Type. Available values are:

    • comments
    • revisions
    • page-attributes - make CPT behaves like page (parent/child, can use template)
    • rest-api - allow API call to this post type, enable editing via Jetpack too
    • jetpack-sitemap - list these CPT in Jetpack's sitemap
    • hidden - No single page view

Example

Create "PRODUCT" post type

H::register_post_type('product' , array(
  'icon' => 'dashicons-cart',
  'columns' => array('thumbnail', 'title', 'price^', 'date'),
  'supports' => array('comments', 'revisions')
) );

Edje WordPress - Product Custom Post Type

Note: In the picture above, we also added "Brand" custom taxonomy. Read more

2. Custom Taxonomy

H::register_taxonomy( $post_type, $args )

Parameters

$post_type (string) - Attached to which post type

$args (string/array) - Taxonomy name or Array of arguments:

  • name (string) - Unique name for the taxonomy. Singular and lowercase.

  • label (string) - Text shown in admin panel. Singular and Titleize.

  • slug (string) - Optional - Base URL for taxonomy page, cannot be the same as existing post type. (Default: same as name)

  • supports (array) - Optional - Additional feature, available args are:

    • rest-api - allow API call to this taxonomy

Example

Registering "BRAND" taxonomy to "PRODUCT" post type:

SIMPLE

H::register_taxonomy('product', 'brand');

ADVANCED - Label and slug can be different from name

H::register_taxonomy('product' , array(
  'name' => 'brand',
  'label' => 'Product Brand',
  'slug' => 'b'
) );

Note: After this, you need to visit "Settings > Permalink" in WP Admin to refresh the URL.

Edje WordPress - Product Custom Post Type

ADVANCED - Allow API Call to this taxonomy

H::register_taxonomy('product' , array(
  'name' => 'brand',
  'label' => 'Product Brand',
  'slug' => 'b',
  'supports' => array('rest-api')
) );

3. Theme Customizer

(Since 0.7.0)

Customizer can be accessed from Appearance > Customize. If you have worked on this before, you know how complex it is.

With WP Edje, we simplify it big time.

TABLE OF CONTENTS

Add New Section

$c->add_section( $slug, <$args> );
  • $slug (string) - The section's unique identifier.
  • $args (array) - Optional. Available arguments are:
    • title (string) - By default it uses the slug and capitalize it.
    • description (string)
    • priority (int) - Placement order.

EXAMPLE

add_action( 'customize_register', 'my_customize_register' );

function my_customize_register( $wp_customize ) {
  $c = H::customizer( $wp_customize ); // init the class

  $c->add_section( 'header' );

  $c->add_option( 'head_code', 'code_editor htmlmixed' );
  $c->add_theme_mod( 'background_color', 'color' );
  $c->add_theme_mod( 'phone_no', 'text' );
}

The code above will create new Section called "Header". Then it puts three new settings as shown in the screenshot below.

Edje Customize Example

Add Option or Theme Mod

Option is bound to the site. Value is kept when theme is changed. Suitable for use in plugin.

Theme mod is bound to the theme. Value is not kept when theme is changed. Suitable for use in theme.

$c->add_option( $slug, $input_type, <$args> );
$c->add_theme_mod( $slug, $input_type, <$args> );
  • $slug (string) - The setting's unique identifier.
  • $input_type (string) - Refer to the table below.
  • $args (array) - Optional. Available arguments are:
    • label (string) - By default it uses the slug and capitalize it.
    • description (string)
    • priority (int) - Placement order in the section. Top most is 0.
    • choices (array) - Key-value pair for select and radio.
    • height, width (int) - Only work on some types.
    • input_attrs (array) - HTML native attribute.

STANDARD INPUT

Type Information
text
checkbox
radio require choices argument
select require choices argument
textarea
dropdown-pages
email
url
number
hidden
date

SPECIAL INPUT

Type Information
image
cropped_image Has option to crop image, detail here
color
upload
visual_editor
code_editor Followed by language like 'code_editor javascript'. Available language: clike, css, diff, htmlmixed, http, javascript, jsx, markdown, gfm, nginx, php, sass, shell, sql, xml, and yaml).

EXAMPLE

$c->add_theme_mod( 'site_font', 'select', array(
  'label' => 'Font Family',
  'description' => 'Choose the main body font',
  'choices' => array(
    'arial' => 'Arial',
    'open_sans' => 'Open Sans',
    'helvetica' => 'Helvetica',
  ),
) );

Get Option or Theme Mod

get_option( $slug );
get_theme_mod( $slug );

Simple.

Use Existing Section

$c->set_section( $slug );

Below are all the default sections:

Slug Display Name Priority Notes
title_tagline Site Identity 20
colors Colors 40 Require either theme support Custom Header or Custom Background
header_image Header Image 60 Require theme support Custom Header
background_image Background Image 80 Require theme support Custom Background
static_front_page Homepage Settings 120
custom_css Additional CSS ?

You can't add extra settings to "Menu" and "Widgets".

EXAMPLE

Add new setting to "Site Identity" section:

add_action( 'customize_register', 'my_customize_register' );

function my_customize_register( $wp_customize ) {
  $c = H::customizer( $wp_customize );

  $c->set_section( 'title_tagline' );
  $c->add_theme_mod( 'mobile_logo', 'image' );
}

Store Settings as Array

Each setting is saved as new row in wp_option table which can get messy. To keep all your custom settings in 1 row, use array notation as the slug.

EXAMPLE

$c->add_theme_mod( 'my[background_color]', 'color' );
$c->add_theme_mod( 'my[phone_no]', 'text' );

// to get the value:

$setting = get_theme_mod( 'my' );
echo $setting['background_color'];

Adding Shortcut

In Customizer Preview, you can add that Pencil icon. If you click it, it will automatically open the section where that setting is located.

Simply add the setting's slug as ID:

<div id="phone_no">
  {{ fn('get_theme_mod', 'phone_no) }}
</div>

If the setting name is array notation like my[phone_no], the ID is my_phone_no.

4. Shortcodes

Responsive Grid

Wrap content with CSS3 Grid. You need to specify where is the opening / closing grid by adding "start" and "end" as seen below:

[grid size="8 start"]
  ....
[/grid]
[grid size="4 end"]
  ....
[/grid]

Grid consists of 12 columns unless we changed it in global Sass setting.

Clone this wiki locally