Sridhar Katakam

Genesis and WordPress Tutorials

Angled widget areas in Altitude Pro

by 13 Comments

Updated on May 03, 2019

This tutorial provides the steps to set up slanted edges for three widgets in Front Page 2 widget area of Altitude Pro using clip-path.

clip-path is supported in Google Chrome, Firefox and Safari.

Tested in Altitude Pro 1.2.2.

Step 1

Let's add code to add numeric index for widgets so they can easily be targeted in CSS.

Add the following in Altitude Pro functions.php:

/**
 * Add "first" and "last" CSS classes to dynamic sidebar widgets. Also adds numeric index class for each widget (widget-1, widget-2, etc.)
 */
function widget_first_last_classes( $params ) {

	global $my_widget_num; // Global a counter array
	$this_id = $params[0]['id']; // Get the id for the current sidebar we're processing
	$arr_registered_widgets = wp_get_sidebars_widgets(); // Get an array of ALL registered widgets

	if( !$my_widget_num ) {// If the counter array doesn't exist, create it
		$my_widget_num = array();
	}

	// if( !isset( $arr_registered_widgets[$this_id] ) || !is_array( $arr_registered_widgets[$this_id] ) ) { // Check if the current sidebar has no widgets
		// return $params; // No widgets in this sidebar... bail early.
	// }

	if( isset( $my_widget_num[$this_id] ) ) { // See if the counter array has an entry for this sidebar
		$my_widget_num[$this_id] ++;
	} else { // If not, create it starting with 1
		$my_widget_num[$this_id] = 1;
	}

	$class = 'class="widget-' . $my_widget_num[$this_id] . ' '; // Add a widget number class for additional styling options

	if( $my_widget_num[$this_id] == 1 ) { // If this is the first widget
		$class .= 'widget-first ';
	} elseif( $my_widget_num[$this_id] == count( $arr_registered_widgets[$this_id] ) ) { // If this is the last widget
		$class .= 'widget-last ';
	}

	// $params[0]['before_widget'] = str_replace( 'class="', $class, $params[0]['before_widget'] ); // Insert our new classes into "before widget"
	$params[0]['before_widget'] = preg_replace('/class=\"/', "$class", $params[0]['before_widget'], 1); // Insert our new classes into "before widget"

	return $params;

}
add_filter( 'dynamic_sidebar_params', 'widget_first_last_classes' );

Step 2

Edit front-page.php.

a) Below

// Adds featured-section body class.
if ( is_active_sidebar( 'front-page-1' ) ) {

	// Adds image-section-start body class.
	add_filter( 'body_class', 'altitude_featured_body_class' );

}

add

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

    • No luck for me with this.

      Can you provide the URL of your site?

      Can this be used in another section such as FP3?

      Yes. But first let’s get this working in Front Page 2 widget area per the steps in this tutorial.

      Reply

      • Hi Sridhar,
        Thanks for getting back to me. I have this in a local dev setup right now. I’ve used FP2 for some service boxes, so I was trying to clear that out for this tutorial. I may have missed some styles and that may be the issue. So just thought it might be easier to go to an unused section of the page.
        Tim

        Reply

  • Hi Sridhar,

    Was offline for a few days. This looks real cool. I launched my client project 2 days before you published this using background images, @media to control image height and css to position the text widgets. This looks like much smarter solution and will definitely try it on a dev blog.

    Thank you!

    Reply
    • >