Archived topic
Block element cannot be placed
7 replies · Started by Mathias on February 1, 2022
Hello,
when I create a block element I can choose on which type of content it should be placed but not where exactly as shown in the documentation. So we are not able to hook it to the right spot.
The element should contain a certain call to action which will be placed after the first paragraph and at the end of every blog post.
I would love to share a screenshot of the elements editor that you can see which settings are there and which not.
Hi Mathias,
We can try adding a hook after the first paragraph and the content if you want.
Here is a custom PHP snippet you may try adding for this:
add_shortcode('portable_hook', function($atts){
ob_start();
$atts = shortcode_atts( array(
'hook_name' => 'no foo'
), $atts, 'portable_hook' );
do_action($atts['hook_name']);
return ob_get_clean();
});
add_filter( 'the_content', 'insert_featured_image', 20 );
function insert_featured_image( $content ) {
global $post;
$inserted_hook = do_shortcode('[portable_hook hook_name="after_first_paragraph"]');
if ( is_single() && ! is_admin() ) {
return prefix_insert_after_paragraph( $inserted_hook, 1, $content ) . $inserted_hook;
}
return $content;
}
function prefix_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
$closing_p = '</p>';
$paragraphs = explode( $closing_p, $content );
foreach ($paragraphs as $index => $paragraph) {
if ( trim( $paragraph ) ) {
$paragraphs[$index] .= $closing_p;
}
if ( $paragraph_id == $index + 1 ) {
$paragraphs[$index] .= $insertion;
}
}
return implode( '', $paragraphs );
}
add_filter( 'generate_hooks_list', function($hooks){
$hooks['content']['hooks'][] = 'after_first_paragraph_and_content';
return $hooks;
}, 99,1 );
Through this code, a new hook name “after_first_paragraph_and_content” should appear under Hook name with Element type “Hook”.
See this for reference: https://share.getcloudapp.com/mXuJb2my
Here is a document you may refer to with regards to adding PHP: https://docs.generatepress.com/article/adding-php/
Hope this helps! :)
Thank you. I will try. It's more sophisticated than I've thought. What happens with the settings "location" and an element block? I mean, what is the usual way to display a newly created block somewhere?
Hi there,
GP Elements provide a user interface to the WP Action Hooks function. Hooks aren't ubiquitous - they have to be added to the code of a template file or a function. Which GP adds in many places in the theme. But it cannot add them to your content as that is your data in your database.
The function that Fernando provided is using the other type of hook - the Filter Hook. Which allows you to make some changes to your post content before it gets output. And in that specific code its inserting a custom hook ( via a shortcode ) inside your post content.
Apart from using a plugin like Ad Inserter to insert the Shortcode Hook the only other way for you to add something inside you content is to add it in the post editor.
Fernando, David, you are great. Could you please help me better understand the use case of "Elements Block". I create some content, choose a filter in settings and then? I expected something like a shortcode that I could then place in a post or on a page or else. I got somehow stuck.
Are you ok with manually adding the Shortcode inside your Post ?
Sure. That gives the most flexibility and our posts need review anyway. Would be easy to implement the CtA
One way you may learn about the functionalities of Elements and how to use them is through our YouTube Channel: https://www.youtube.com/c/GeneratePress/videos
A video I can recommend which greatly explains how to add a Block Element after a Content is this short video by Leo: https://www.youtube.com/watch?v=HMhUo91RjsE
Basically, through hooks, you can place Elements in various locations in your website, and here is a helpful visual guide you may follow to know the locations of most hooks available: https://docs.generatepress.com/article/hooks-visual-guide/
Moreover, if you wish to add a shortcode which you may hook on to, one way to do it is through adding this short PHP code:
function your_shortcode($atts, $content = null) {
ob_start();
do_action('your_hook_name');
return ob_get_clean();
}
add_shortcode('shortcode_name', 'your_shortcode');
I added this code through the plugin Code Snippets: https://share.getcloudapp.com/eDulrR6P
After doing this, you may use the shortcode as such: https://share.getcloudapp.com/Wnuqm0NO
Also see: https://share.getcloudapp.com/4guZNlxL
Here is a screenshot of the shortcode working: https://share.getcloudapp.com/jkumA4l1
Hope this helps! Feel free to reach out if any further help is needed :)