• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

nSiteful Web Builders

Building a Better Web - One Site at a Time.

  • Home
  • About
    • Testimonials
    • Resources
  • Web Sites
  • Online Marketing
  • WordPress Support
    • Customized WordPress Training
    • 60-for-60 Sessions
  • Web Applications
  • Blog
    • Archive Listing Minimalistic
    • Blog Articles Grouped by Category
    • Case Studies
    • General
    • Portfolio
    • Reviews
    • Snippets
    • Techniques
  • Contact Jeff
    • Purchase Retainer Consulting Hours
    • About Retainer Consulting Hours

By Jeff Cohan, November 27, 2018

Dynamic Linear Gradients for Background Images in Genesis

Many Genesis child themes (e.g., Altitude Pro, the current theme for this Web site) natively implement what I call dynamic linear gradients over background images in homepage sections. The effect is that as the visitor scrolls down the home page, the background image gradually changes appearance, typically getting increasingly darker (see below).

But not all Genesis child themes natively support this effect. One such theme, which I’m using for a client project, is Centric Pro.

A Look Under the Hood

In order to make the Centric Pro homepage backgrounds act the ones in Altitude Pro, I inspected what’s under the hood in Altitude Pro.

Both themes support multiple stackable home-page sections, each of which is contained inside a div.

  • Altitude natively supports up to 7 home-page sections, named “Front Page 1”, “Front Page 2”, and so on to “Front Page 7”. The divs have corresponding class names: “front-page-1”, “front-page-2”, and so on to “front-page-7”.
  • Centric natively supports up to 6 home-page sections, named “Home 1”, “Home 2”, and so on to “Home 6”. Its divs also have corresponding class names: “home-widgets-1”, “home-widgets-2”, and so on to “home-widgets-6”.

What’s distinguishes Altitude from Centric, and what allows the dynamic gradient to work in Altitude is a div container inside each “front-page-n” div:

<div id="front-page-1" class="front-page-1" tabindex="-1">
	<div class="image-section">
		<!-- Contents of widget goes here -->
	</div>
</div>

The background image for each section that has one is attached to its respective “front-page-n” div, like so:

.front-page-1 {
	background-image: url(../../uploads/standout-1650x1050-low.jpg);
}

The linear gradient is attached to the inner div with the class of “image-section”:

.image-section {
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 30%,rgba(0,0,0,0.6) 80%,rgba(0,0,0,0.8) 100%);
}

Customizing Centric to Support the Dynamic Linear Gradient Effect

For this project, the only home-page section I want to add the dynamic linear background effect is “home-widgets-5”.

Clearly, all I have to do to make Centric behave like Altitude is alter the code that generates the “home-widgets-n” elements.

That native code is found in the front-page.php file in the Centric folder:

function centric_home_widgets() {

	echo '<div id="home-widgets" class="home-widgets">';
	
	genesis_widget_area( 'home-widgets-2', array(
		'before' => '<div class="home-widgets-2 widget-area">',
		'after'  => '</div>',
	) );
	
	genesis_widget_area( 'home-widgets-3', array(
		'before' => '<div class="home-widgets-3 color-section widget-area">',
		'after'  => '</div>',
	) );
	
	genesis_widget_area( 'home-widgets-4', array(
		'before' => '<div class="home-widgets-4 dark-section widget-area">',
		'after'  => '</div>',
	) );
	
	genesis_widget_area( 'home-widgets-5', array(
		'before' => '<div class="home-widgets-5 widget-area">',
		'after'  => '</div>',
	) );
	
	genesis_widget_area( 'home-widgets-6', array(
		'before' => '<div class="home-widgets-6 color-section widget-area">',
		'after'  => '</div>',
	) );
	
	echo '</div>';
}

The before and after elements of the generate_widget_area function define the wrapper for the section. All I have to do is add a bit of html, like so:


	genesis_widget_area( 'home-widgets-5', array(
		'before' => '<div class="home-widgets-5 widget-area"><div class="image-section">',
		'after'  => '</div></div>',
	) );
}

Now I can replicate the CSS used in Altitude to achieve the desired effect.

Moving the Customization to a Function

I generally don’t like to modify Genesis child theme files — even though they are technically part of a child theme, and child themes is where we’re supposed to do our customizations. However, in the event the child theme is ever updated (and they are, from time to time), I don’t want to lose the changes.

So I created a separate file (nwb-functions.php) in the Centric folder where I wrote a couple of functions to achieve the customization. (Yes, I did have to add a line to the functions.php file in the Centric folder to include my new file.)

Here’s the code in my new functions file:

function nwb_centric_home_widgets() {
	echo '<div id="home-widgets" class="home-widgets">';
	genesis_widget_area( 'home-widgets-2', array(
		'before' => '<div class="home-widgets-2 widget-area">',
		'after'  => '</div>',
	) );
	genesis_widget_area( 'home-widgets-3', array(
		'before' => '<div class="home-widgets-3 color-section widget-area">',
		'after'  => '</div>',
	) );
	genesis_widget_area( 'home-widgets-4', array(
		'before' => '<div class="home-widgets-4 dark-section widget-area">',
		'after'  => '</div>',
	) );
	genesis_widget_area( 'home-widgets-5', array(
		'before' => '<div class="home-widgets-5 widget-area"><div class="image-section">',
		'after'  => '</div></div>',
	) );
	genesis_widget_area( 'home-widgets-6', array(
		'before' => '<div class="home-widgets-6 color-section widget-area">',
		'after'  => '</div>',
	) );
	echo '</div>';
}
add_action('wp_head', 'nwb_home_widgets');
function nwb_home_widgets() {
	remove_action( 'genesis_before_footer', 'centric_home_widgets', 5 );
	add_action( 'genesis_before_footer', 'nwb_centric_home_widgets', 5 );
}

Lines 1-24, nwb_centric_home_widgets, are a clone of the code from front-page.php, with lines 16 and 17 modified as shown earlier. Then I created a container function, nwb_home_widgets (lines 26-29) which unhooks the centric-home-widgets function from the genesis_before_footer hook (line 27) and hooks the nwb_centric_home_widgets function to that hook (line 28). The code on line 25 invokes nwb_home_widgets.

Join the Discussion

Let me know what you think. If you have questions, I’ll be happy to address them. If you have another way to achieve this dynamic linear gradient effect, I’d love to hear it.

Related Posts

  1. Display WordPress and WooCommerce Tags as Lists
  2. Diagnostic PHP: Get All Included Files
  3. How to use Advanced Custom Fields with Genesis
  4. Downscaling Images On Upload in WordPress
  5. Add Dynamic Table of Contents to a Series of WordPress Posts
  • Choose the best match.

Written by Jeff Cohan · Categorized: Techniques · Tagged: Genesis, WordPress

  • Choose the best match.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

mailchimp signup

Subscribe to get notified when new articles are published. Unsubscribe any time. No spam. I promise. Check out my newsletter archives.

social

Twitter Facebook LinkedIn

Recent Articles

  • Use Case for Custom Post Type: “In The News” March 10, 2023
  • Create a Custom Shortcode to Display a MemberPress Membership Price ANYWHERE on Your Website February 5, 2023
  • Avoid Direct Styling; Use CSS Instead September 21, 2022
  • Blog Tags: What They Are (and What They’re Not) August 5, 2022
  • How to Create a Simple Custom Events Plugin May 24, 2022

Filter By Category/Tag

Categories

  • Case Studies (7)
  • General (61)
  • Portfolio (5)
  • Reviews (12)
  • Snippets (16)
  • Techniques (38)

Popular Tags

Advanced Custom Fields Blogging Child Themes Content Marketing CSS CSS Grid Customer Service Custom Fields Custom Post Types Diagnostics Facebook FooGallery Genesis Gutenberg HTML Images iPhone Libra Live Chat Marketing Media MemberPress MemberPress Courses mu-plugins MySQL Photo Gallery php Pinterest Plugins Post Formats Pricing Project Management Security SEO Seth Godin Shortcodes Social Networking Surveys Taxonomies Trello Twitter Video Web design Web forms WordPress

siteground wp hosting

Web Hosting

wp101

EasyWordPresstutorialvideosforbeginners.
MemberPress CTA

Footer

Background

Web Sites | WordPress Support | Web Applications.

Formally trained in liberal arts and education (I have a B.A. in Government from Harvard and studied Secondary Education at Rutgers Graduate School), I have honed my skills in the communication arts and sciences as a teacher, trainer, instructional designer, writer, photographer, calligrapher, helpdesk manager, database programmer, and multimedia developer.

(I've also been a group counselor, waiter, bartender, bicycle messenger boy, computer salesman, carpenter's helper, financial analyst, and school board president.)

Tech

Systems since 1983.
Web sites since 1994.
PHP since 2001.
WordPress since 2007.

Contact

770-772-5134
Email Jeff
Send Money
All Ways

Copyright 2023, nSiteful Web Builders, Inc.

 

Subscribe

Pardon the interruption. I know popups can be annoying. But I’d love to have you as a subscriber.

Sign up to be notified when new articles are published. Unsubscribe any time.

* indicates required

Powered by MailChimp

×