[Resolved] Using Block Element Right Sidebar for Custom Sidebars at Scale

[Eric]

Hello,

I’m switching a site from OceanWP + Elementor to GeneratePress + GenerateBlocks and have a question about using the Block Element Right Sidebar hook feature to create up to 50 (and beyond in the future) custom sidebars to use on different pages/posts.

For context, I’ll basically have my main default sidebar which I’ll apply sitewide, a few custom page sidebars, and then 40-50+ very simple custom sidebars (text and a button) for each unique hotel listing page we have that need unique booking buttons/links. In OceanWP they had an add-on plugin for creating unlimited custom sidebars that I used for this so it looks like I will have to recreate each custom sidebar to make the switch.

My approach makes sense to me but I’m just wondering if you see any issues (performance-related or otherwise) with using the Elements module at scale to create some 50+ custom sidebars or if you would recommend going another route like using a plugin to create so many custom sidebars.

Thanks for your input.

[Elvin]

Hi,

I’m not exactly sure I fully understand why it has to be 40-50 sidebars and how the “switch” works.

If the sidebar’s layout stays the same, and only its contents change. Perhaps you can simply make a single sidebar layout that dynamically “switches” its contents depending on what’s suppose to show in it?

As for performance, we can’t really tell which is better as we’re not sure how well the plugin you’ll be using performs. But using Elements module should be fine as it’s pretty lightweight.

Tip: When in doubt, its best to do an A/B test and have both setups on to compare which is better.

[Eric]

Hi Elvin,

Sorry if my attempt to explain didn’t make sense. I’m just changing themes from OceanWP to GeneratePress and trying to determine the best way to recreate or duplicate around 50 custom sidebars I had set up through an OceanWP plugin and Elementor that only works when the OceanWP theme is activated.

The reason the number is 40-50 different sidebars, is because that’s approximately how many different hotels/property listings that are on the site which each require their own unique booking button outbound URL/link in the sidebar.

The sidebar’s layout/design would be exactly the same for all of them.

I’ve shared a few examples for reference if that helps.

If there was a way to make a single sidebar layout that dynamically changes its booking button URL depending on what hotel/property listing page it’s on, I would really appreciate it if you could point me in the right direction on how to do that or where I can learn more about it.

Thanks for the tips

[David]

Hi there,

i would use a Custom Field to store the unique URL in each post:

https://wordpress.org/support/article/custom-fields/

Then we can use a PHP Snippet to create a shortcode to display a button with that link.
Example code below will get the value from a Custom Field Named: availabilty

function get_hotel_availability() {
	$availabilityURL = get_post_meta( get_the_ID(), 'availabilty', true );
	if ($availabilityURL) {
		$html = '<a class="button availabilty-button" href="' .$availabilityURL . '">Check Availability</a>';
		return $html;
	}
}
add_shortcode('availability', 'get_hotel_availability');

Then you just need to add the [availabilty] shortcode to your posts sidebar to display the button.

[Eric]

David, this is brilliant! I’m sure this is very basic stuff to you, but it’s groundbreaking news to me haha 🙂 Super stoked to learn about this.

A couple more related items I could use your help with. I’m trying to match the style of my live site, and am wondering the best way to add the fas fa-long-arrow-alt-right icon after “check availability”.

Update: I just figured out a way… I just added the span snippet below in the a tag in the PHP snippet your provided:

<span style=padding-left:5px;><i aria-hidden="true" class="fas fa-long-arrow-alt-right"></i></span>

So now the updated snippet with the span/icon snippet is this:

function get_hotel_availability() {
	$availabilityURL = get_post_meta( get_the_ID(), 'availability', true );
	if ($availabilityURL) {
		$html = '<a class="button availability-button" href="' .$availabilityURL . '" target="_blank" rel="nofollow noopener noreferrer">check availability<span style=padding-left:5px;><i aria-hidden="true" class="fas fa-long-arrow-alt-right"></i></span></a>';
		return $html;
	}
}
add_shortcode('availability', 'get_hotel_availability');

It appears to work on the front end, but is this the right way to do this, or is there a better solution you can offer?

Also, I’m trying to make only the hotel/property sidebars sticky, and not every other sidebar on the site. I tried the CSS from this post: https://generatepress.com/forums/topic/sticky-sidebars/#post-1578385 which works. But now, I need to figure out how to isolate the sticky effect so just the hotel/property sidebars stick.

I tried adding an additional CSS class of “property-sidebar” to the hotel/sidebar element but it looks like that class is being applied to all the sidebars on the site and not just the hotel/property sidebars I’m trying to target. Is there another way I can go about this?

I’ve included my live and staging site links for reference.

Thanks so much, this is the exact kind of scalable sidebar solution I was hoping for! I really appreciate your help.

[David]

A lot easier to setup and maintain 🙂
Yes thats the correct way to add the FA Icons.

So replace the Sticky CSS with this:

@media(min-width: 769px) {
  .inside-right-sidebar {
    height: 100%;
  }
  .property-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
}

[Eric]

Awesome, that did the trick.

Thanks, David!

[David]

You’re welcome – glad to be of help

[Eric]

Hi again David,

I’m following up on this thread because I’m trying to create a second version of dynamic sidebars that gets a Fluent Form popup modal shortcode rather than just a link.

I’m wondering if I’m close with the snippet I’ve modified or if it is not possible to get a shortcode using a shortcode and if you can offer some guidance:

Here’s what I’ve got so far:

function get_ff_popup() {
	$ffPopup = get_post_meta( get_the_ID(), 'ff_popup_modal', true );
	if ($ffPopup) {
		$html = '' .$ffPopup . '';
		return $html;
	}
}
add_shortcode('ff_popup_modal', 'get_ff_popup');

The Fluent Form popup modal uses a shortcode itself to work and automatically generates a button.

Guessing I’m going wrong with the $html but don’t know what to change it to. Hoping you might have a quick tweak to do the trick.

I’ve included a page in the private information I’m testing it on for reference.

If you could let me know where I’m going wrong that would be much appreciated.

Thanks!

[David]

Hi there,

so will each popup require a unique ID ?

[Eric]

Hey David,

Actually, I was planning to play with it to see if I could use it in two popup situations, one where I plan to use a unique ID/form and the other where I plan to use the same ID/form.

I’ve linked to a page for a visual reference. The “check availability” button would be the unique ID, as submitting that popup up form triggers an automated email specific to that property and then redirects the user to a unique booking page.

And then the one with the same ID would be used for the “Questions? Get in touch? popup form. Which is just a simple inquiry form that I can use across the board since when someone submits it, it will tell me which hotel page they submitted it from.

[David]

The global ‘Questions’ one would be quite simple – you can just include the same Fluent Forms shortcode in your sidebar.

For the other one thats – more tricky. I would suggest asking Fluent Forms for some options. Couple of ideas:

1. Can you use a HTML Button instead of their shortcode. Then you can update the shortcode (above) with the additional Custom Fields to populate its parameters.

2. Does their current shortcode allow your to parse custom fields into its parameters.

[Eric]

Thanks, David.

I’ve asked Fluent Forms those questions and some others before that but haven’t heard back yet.

I got the global Questions all squared away. That made sense. Thanks!

For the more tricky dynamic shortcode function. I think it might be possible to tweak the original function/snippet to dynamically get and run the shortcodes from the custom post meta rather than the HTML.

I’m working on a possible solution based on this brief post: https://wpsites.net/wordpress-tips/adding-using-executing-parsing-shortcodes-in-a-custom-fields-value-field/

Using the following snippet, I can get the shortcode to run and echo dynamically based on the custom meta, but it is just echoing in a random spot and not where I want it.

add_action( 'loop_start', 'custom_field_with_shortcode' );

function custom_field_with_shortcode() {
	$ws = get_post_meta( get_the_ID(), 'ff_popup_modal', true );
    	if ( $ws ) {
		echo '<div class="ff_popup_modal">' . do_shortcode( $ws ) . '</div>';
    }
}

I’m trying to figure out if I can combine the two snippets, if you see this and are able to help me with integrating these two snippets maybe that will do the trick!?

function get_ff_popup() {
	$ffPopup = get_post_meta( get_the_ID(), 'ff_popup_modal', true );
	if ($ffPopup) {
		$html = '' .$ffPopup . '';
		return $html;
	}
}
add_shortcode('ff_popup_modal', 'get_ff_popup');

Thank you!

[Eric]

Update: I solved it! Whoa, a very proud moment for me 🙂

Here is what I did:

function get_ff_popup() {
	$ffPopup = get_post_meta( get_the_ID(), 'ff_popup_modal', true );
	if ($ffPopup) {
		$html = '' . do_shortcode( $ffPopup ) . '';
		return $html;
	}
}
add_shortcode('sidebar_popup', 'get_ff_popup');

Please do let me know if you see any potential issues with this.

Thank you!

[Author]

Posts