PopWP

WordPress and Genesis Tutorials

Working with WordPress Customizer for Genesis

Last Updated on Favorited: 1 times

This is a reference post working with WordPress customizer for enabling basic customization like adding a background image or video background section widget using the WordPress Customizer in Genesis.

This is not a complete guide and will be updated regularly to add more value. Try these guides on the test site before adding anything from this article to a production site.

How to Start?

The customizer is like an electric box section which provides the ability to control any part of the theme using one panel.

The first thing we need to decide, what we are going to add in the customizer section? It could be a section of color options, custom header, custom background image, custom video background etc. and not limited to.

While working as a designer, we can simply customize most of the things using the manually writing the CSS but It is recommended for developers to add these options so a new user can do it ownself without waiting for support.

Create a file customize.php under /lib/ folder (make sure if there is no any other similar file is present) and call it using this in functions.php

// Adds some custom options to Customizer.
require_once get_stylesheet_directory() . '/lib/customize.php';

Start the engine. Paste it in /lib/customize.php

add_action( 'customize_register', 'genesis_sample_customizer_register' );
/**
* Registers settings and controls with the Customizer.
*
* @since 2.2.3
*
* @param WP_Customize_Manager $wp_customize Customizer object.
*/
function genesis_sample_customizer_register( $wp_customize ) {
//code goes here.
}

Now our file is registered but there is no command to do the stuff. So we need to add some. Replace //code goes here.

to this

	$wp_customize->add_setting(
		'genesis_sample_link_color',
		array(
			'default'           => genesis_sample_customizer_get_default_link_color(),
			'sanitize_callback' => 'sanitize_hex_color',
		)
	);

	$wp_customize->add_control(
		new WP_Customize_Color_Control(
			$wp_customize,
			'genesis_sample_link_color',
			array(
				'description' => __( 'Change the color of post info links, hover color of linked titles, hover color of menu items, and more.', 'genesis-sample' ),
				'label'       => __( 'Link Color', 'genesis-sample' ),
				'section'     => 'colors',
				'settings'    => 'genesis_sample_link_color',
			)
		)
	);

	$wp_customize->add_setting(
		'genesis_sample_accent_color',
		array(
			'default'           => genesis_sample_customizer_get_default_accent_color(),
			'sanitize_callback' => 'sanitize_hex_color',
		)
	);

	$wp_customize->add_control(
		new WP_Customize_Color_Control(
			$wp_customize,
			'genesis_sample_accent_color',
			array(
				'description' => __( 'Change the default hovers color for button.', 'genesis-sample' ),
				'label'       => __( 'Accent Color', 'genesis-sample' ),
				'section'     => 'colors',
				'settings'    => 'genesis_sample_accent_color',
			)
		)
	);

	$wp_customize->add_setting(
		'genesis_sample_logo_width',
		array(
			'default'           => 350,
			'sanitize_callback' => 'absint',
		)
	);

	// Add a control for the logo size.
	$wp_customize->add_control(
		'genesis_sample_logo_width',
		array(
			'label'       => __( 'Logo Width', 'genesis-sample' ),
			'description' => __( 'The maximum width of the logo in pixels.', 'genesis-sample' ),
			'priority'    => 9,
			'section'     => 'title_tagline',
			'settings'    => 'genesis_sample_logo_width',
			'type'        => 'number',
			'input_attrs' => array(
				'min' => 100,
			),

		)
	);

Save it. Go to Appearance > Customize and see if the color options are available or not.

Adding Image Background Support.

Image background is the most popular way to design and customize a section area especially the front page first section.

While we can add the background image manually in CSS, customizer makes it easier for newbies who are not good at this thing and want to control without writing anything.

Here are the tutorials related to adding image background using customizer in Genesis.

Adding Video Background Support.

Video background is the second most popular customization work which is placed on front page section 1 too.

While the image background can be added in CSS, video background requires to output video URL in HTML structure.

Here are the tutorials related to adding video background using customizer in Genesis.

These all tutorials will give you a basic idea to work with a widget section in Genesis.

Reference:
https://developer.wordpress.org/themes/customize-api/
https://codex.wordpress.org/Theme_Customization_API
https://codex.wordpress.org/Class_Reference/WP_Customize_Manager
and all Genesis child themes.

Resources:
https://github.com/WPTRT/code-examples/tree/master/customizer
https://code.tutsplus.com/series/a-guide-to-the-wordpress-theme-customizer–wp-33722
https://wpbeaches.com/add-default-customizer-panels-wordpress/

Related Posts

Reader Interactions