SEO Slider in Essence Pro

This members-only tutorial provides the steps to replace the front page hero's background cover image with a slider, powered by SEO Slider in Essence Pro.

Each slide's content will be set to appear centered on the corresponding slide image.

Tested in Essence Pro 1.1.0.

Step 1

Install and activate SEO Slider.

Go to Silders > Add New.

Add a slider titled say, "Homepage Slider" and add your desired slides.

For the slide content, switch to Text view and enter HTML in the following format:

<h2 class="hero-title">Live The Life You Deserve</h2>

<p class="hero-description">Join our weekly newsletter and get our best articles about body, mind, soul, style, travel, and culture. No charge. No Spam. Only love.</p>

<a class="button" href="#">Work with us</a> <a class="button ghost" href="#">Learn more</a>

Step 2

Let's remove the header hero's Customizer specific code.

a) Edit lib/customizer/customize.php.

Comment out or delete

$wp_customize->add_section(
	'header_image', array(
		'title'       => __( 'Header Background Image', 'essence-pro' ),
		'description' => sprintf( '<p><strong>%1$s</strong></p><p>%2$s</p>', __( 'The default header background image is displayed on the front page and all posts and pages where a unique featured image is not available.', 'essence-pro' ), __( 'A default image is included with the theme, but you may choose a different default image below.', 'essence-pro' ) ),
		'panel'       => 'essence-settings',
	)
);

// Hero Section.
$wp_customize->add_section(
	'essence-front-page-hero-section', array(
		'active_callback' => 'is_front_page',
		'description'     => sprintf( '<strong>%s</strong>', __( 'Modify the settings for the front page hero section.', 'essence-pro' ) ),
		'title'           => __( 'Hero Section', 'essence-pro' ),
		'panel'           => 'essence-settings',
	)
);

// Hero Visiblity.
$wp_customize->add_setting(
	'essence-show-hero-section', array(
		'default'           => 1,
		'sanitize_callback' => 'absint',
	)
);

$wp_customize->add_control(
	'essence-show-hero-section', array(
		'label'       => __( 'Show the front page hero section?', 'essence-pro' ),
		'description' => __( 'Check the box to display the hero section on the top of the front page.', 'essence-pro' ),
		'section'     => 'essence-front-page-hero-section',
		'settings'    => 'essence-show-hero-section',
		'type'        => 'checkbox',
	)
);

// Hero Title.
$wp_customize->add_setting(
	'essence-hero-title-text', array(
		'default'           => essence_get_default_hero_title_text(),
		'sanitize_callback' => 'wp_kses_post',
		'transport'         => isset( $wp_customize->selective_refresh ) ? 'postMessage' : 'refresh',
	)
);

$wp_customize->add_control(
	'essence-hero-title-text', array(
		'description' => __( 'Change the title text for the front page hero section.', 'essence-pro' ),
		'label'       => __( 'Hero Title', 'essence-pro' ),
		'section'     => 'essence-front-page-hero-section',
		'settings'    => 'essence-hero-title-text',
		'type'        => 'textarea',
	)
);

if ( isset( $wp_customize->selective_refresh ) ) {
	$wp_customize->selective_refresh->add_partial(
		'essence-hero-title-text', array(
			'selector'        => '.hero-title',
			'settings'        => array( 'essence-hero-title-text' ),
			'render_callback' => function() {
				return get_theme_mod( 'essence-hero-title-text' );
			},
		)
	);
}

// Hero Intro Paragraph.
$wp_customize->add_setting(
	'essence-hero-description-text', array(
		'default'           => essence_get_default_hero_desc_text(),
		'sanitize_callback' => 'wp_kses_post',
		'transport'         => isset( $wp_customize->selective_refresh ) ? 'postMessage' : 'refresh',
	)
);

$wp_customize->add_control(
	'essence-hero-description-text', array(
		'description' => __( 'Change the description text for the front page hero section.', 'essence-pro' ),
		'label'       => __( 'Hero Intro Paragraph', 'essence-pro' ),
		'section'     => 'essence-front-page-hero-section',
		'settings'    => 'essence-hero-description-text',
		'type'        => 'textarea',
	)
);

if ( isset( $wp_customize->selective_refresh ) ) {
	$wp_customize->selective_refresh->add_partial(
		'essence-hero-description-text', array(
			'selector'        => '.hero-description',
			'settings'        => array( 'essence-hero-description-text' ),
			'render_callback' => function() {
				return get_theme_mod( 'essence-hero-description-text' );
			},
		)
	);
}

b) Edit lib/customizer/output.php.

Comment out or delete

$intro_paragraph = get_theme_mod( 'essence-use-paragraph-styling', 1 );

and

$css .= ( $intro_paragraph ) ? sprintf(
	'

	.single .content .entry-content > p:first-of-type {
		font-size: 26px;
		font-size: 2.6rem;
		letter-spacing: -0.7px;
	}

	'
) : '';

Step 3

Edit functions.php.

Comment out or delete