• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

Working with WordPress Customizer for Genesis

Last Updated on May 10, 2019 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.

  • Image Background Section Widget Area Using Customizer in Genesis
  • Transparent Header and Image Background Section Widget Area 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.

  • Video Background Section Widget Area Using Customizer in Genesis
  • Transparent Header and Video Background Section Widget Area 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

  • Video Background Section in Monochrome Pro
  • Particles.js Background Section using Customizer in Genesis
  • Transparent Header and Video Background Section using Customizer in Genesis
  • Transparent Header and Image Background Section using Customizer in Genesis
  • WordPress, Genesis and Custom Post Types

Categories: Free Content, Genesis Tutorials, WordPress Tutorials Tags: Customizer, WordPress

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service