[Resolved] Organizing Elements in GP

[William]

Hi there,

I love GP and the elements are great – I am currently seeing that I don’t need the plugin Code Snippets, since elements and a hook with ‘Execute PHP’ does the same job and, from my understanding, better since you can specify for the code to run only on the pages it is needed (instead of site-wide).

With this, the Elements can get cluttered very easily – is there anyway to add tags or groupings for elements to make it easier to see them visually?

[Leo]

Hi there,

I am currently seeing that I don’t need the plugin Code Snippets, since elements and a hook with ‘Execute PHP’ does the same job

What exactly are you adding? The elements should only be used if you are adding it code to specific hooks.

Code Snippets (and child theme’s function.php) still serve their purposes and should have minimal impact on your site – you can always test this.

Too many elements will certainly slow down your site as well.

better since you can specify for the code to run only on the pages it is needed (instead of site-wide).

You can do this with Code Snippet with a simple if statement and conditional tag:
https://codex.wordpress.org/Conditional_Tags

That’s what the elements are doing anyways.

is there anyway to add tags or groupings for elements to make it easier to see them visually?

Unfortunately not.

To sum up, I’d recommend adding your code the way they are supposed to be added 🙂

[William]

Sorry for the late reply and gotcha!

How would you make an if statement to show snippet code on one particular page? For example, the code which only applies to category archive pages, how would you enclose it in an if statement to run just for category archive pages?

add_shortcode( 'category_description', function() {

return category_description();
	
} );

[Leo]

That code simply creates a shortcode so I doubt it has a significant impact on the performance of your site.

Have you done any speed test before and after adding that code to see if it impacts your site at all?

[William]

There are quite a few shortcodes on the site, and not all of the snippets are shortcodes either, so adding if statements could help reduce server response time etc. (and if not to stick in elements like you said is a good idea, then keeping it in snippets with if statements on locations)

[David]

Hi there,

Elements are not the place for all types of snippets – as you may be trying to fire a hook ( add_shortcode and add_filter are all hooks effectively ) from within another Hook which is the wrong place to do so.
So in most instances using add_shortcode or add_filter is not going to work in an element. And if they do for some reason, then i still would not recommend it.

For best performance, although probably un-perceivable on most sites, it would be better to move those code snippets to a Child Theme functions.php. That will eliminate database lookups that the code snippets plugin relies on and free up a little memory.

Conditionally loading shortcodes, you could combine them all into one snippet and wrap them an if condition, if you think it would be of any benefit.

[William]

Hi David,

Apologies for the late reply to this. As I understand things, running code in GP elements is not a good idea for site speed because it is a hook within a hook. I guess, as well, there is the lookup of tables for GP elements too.

With the code snippets, it is good for adding code, just it cannot choose the location of where to load – that is where you suggestion of if statement to encapsulate a piece of code to only execute for a certain location, is that correct?

As for achieving this, do you have a link to help guide me, as that would be really useful (no worries if not). An example of a code I wanted to display just on the homepage, for example, is :

add_shortcode( 'sbs_posts_alt', function()  {
	
	$post_types = get_post_types(array('public' => true, '_builtin' => false), 'objects', 'and');
		
		$num_posts = wp_count_posts($post_type="post");
		
		$num = number_format_i18n($num_posts->publish);
	
	return $num; 
	
} );

What would I have to put around it to make it only execute on the homepage (if that is possible) – would that help site speed as it would skip that for other pages, or just more for CPU management if using a CDN?

[David]

Hi William,

running code in GP elements is not a good idea for site speed because it is a hook within a hook.

Not quite 🙂

ok, lets cover hooks and function call backs – with a real basic hook action in code form:

add_action( 'wp_head' , function(){
    if ( is_home() ) {
    // add stuff inside the wp head on home
    }
});

When you do a GP Element its writing that code for you ie.

add_action( 'wp_head' , function(){      <---- set the hook
    if ( is_home() ) {      <---- set the display rule condition 
    // add stuff inside the wp head on home     <---- do the thing in the hook content area/
    }
}, 25 );     <--- set the priority to 25

And GP saves that as a CPT.
So theres an additional lookup for that code to be loaded by WP.

Code Snippets to my knowledge also saves your snippets to the database.

So performance wise i would expect there to be no difference between the two.

Why did i say you don’t add it via a GP Hook Element?

So action hooks are simply placeholders in the code.
The code is executed in a specific order by WP.
When WP encounters a hook, it checks to see if there are any function callbacks registered to it.
If it finds a callback it processes those functions before moving on.

The hooks available in GP Elements are limited to template hooks, generally those being output on the front end.
Thats real late in the code execution process and too late for WP to be processing add_filter or add_shortcode functions that need to happen much earlier.

Thats the reason for not adding THAT code to a GP Element 🙂

The shortcode

I doubt it would make any difference but you could simply return nothing if your not on the front page:

add_shortcode( 'sbs_posts_alt', function()  {
	
    if ( !is_frontpage() ) {
        return;
    }

	$post_types = get_post_types(array('public' => true, '_builtin' => false), 'objects', 'and');
		
	$num_posts = wp_count_posts($post_type="post");
		
	$num = number_format_i18n($num_posts->publish);
	
	return $num; 
	
} );

Reference of the conditional tags to use:

https://docs.generatepress.com/article/using-hooks-conditional-tags/#static-front-page

[William]

Thanks for your great reply David! I think I’m following what you are saying about GP elements and code snippets.

With the if statement, is it better to have that inside the shortcode or outside of it though? I would have thought if on ___ page, run the code inside the if, else, skip it (that to me seems less taxing).

So this code would be:

if ( is_frontpage() ) {
add_shortcode( 'sbs_posts_alt', function()  {

	$post_types = get_post_types(array('public' => true, '_builtin' => false), 'objects', 'and');
		
	$num_posts = wp_count_posts($post_type="post");
		
	$num = number_format_i18n($num_posts->publish);
	
	return $num; 
	
} 

else return;
);

The above is probably not ‘code-right’ – I’m just ideally trying to figure out the best way to have the code on a site with GP. GP elements seems like should be kept to a minimum and more about theme design. Actual code inside Code Snippets would run quicker in a child functions.php. Then, adding if else statements for where the code is executed would save time in not executing the code on pages it is not applicable for etc.?

[David]

If you wanted to conditionally execute the add_shortcode then you would probably need to hook it in like so:

add_action( 'wp', function(){
	if ( is_frontpage() ) {
	      // add_shortcode or other stuff for is_frontpage here
	}
});

I am not sure what difference that will make as the function callback the add_shortcode makes only executes if the actual [shortcode] is found in the content.

My simple view:

1. Use functions.php ( if not Code Snippets ) for:

a. adding functionality such as add_shortcode, or a function that returns some stuff from the database.
b. changing functionality such as add_filter
c. Hooking into the code using add_action to add or adjust functionality of some other code.

aka Computation

2. Use GP Elements where you want to display static or dynamic content or the results of a function from #1.

aka Presentation.

[William]

Gotcha, so the if statement is not going to improve the performance drastically, but moving from database lookups in Code Snippets to functions.php will – thanks David as always!

[David]

You’re welcome

[Author]

Posts