Inside navigation

Hi there,

What happens if you add the actual modal HTML in another hook?

For example, add the toggle to generate_inside_navigation, and the modal HTML to wp_footer.

I am actually separating the code as you have suggested. I just forgot to indicate that in the previous post. The same issue happens. I have the script in the footer (with the hook) and the code itself in the inside navigation hook and the CSS in the customiser. I checked GP files and found generate_after_primary_menu and it tends to work well but not aligned with the rest. I should Also Indicate I have the site name hooked inside the navigation and position:absolute(sticks to the left).

Resolved. The problem was due to the shortcode being called using this code on GP docs. I had to change IT to `function custom_shortcode() {
?>code here <?php }` for it to work. It took me long to diagnose it.

Glad you got it working ??

Would you be aware why calling the shortcode the GP way would hijack the menu? The shortcode was a Mailchimp form.

Removing the output buffering stuff fixed the issue? (ob_start() and ob_get_clean())

Yes, including the echo. The echo didn’t work at first, so I changed it to return and it worked. Then when I tried to call the shortcode inside_navigation, that’s when the error appeared. This is an example of what worked.

function custom_shortcode() {
?>
<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form>
<?php }

Whe

Can you try the updated code?: https://docs.generatepress.com/article/creating-a-shortcode/

The result is just a number 1 https://prntscr.com/qgtzkf. The code I am trying to call is the Mailchimp embed form, but I have wrapped it in some div classes.

Can you share your full function with me?

Here is a modified version of it and the only one that is working. (I copied the HTML from another website using inspect element and modified it extensively, but retained the classes.)

function wp_social_box() {
?>
	<div class="social-cta container column">
	    <div class="social-cta__header">
			Follow Us	<div>
				<div class="social-cta__column social-cta__column--social">
				<div class="social-cta__type social-cta__type--social">Be Sociable</div>
				<span class="social-cta__desc social-cta__desc--social">
					like and see our stories			</span>
								<a href="https://www.facebook.com/example" class="social-cta__button social-cta__button--facebook" target="_blank"><svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z"/></svg>Like Example <span class="sub-counter">100 Likes</span></a>
								<a href="https://twitter.com/example" class="social-cta__button social-cta__button--twitter" target="_blank"><svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z"/></svg>Follow Example <span class="sub-counter">1k Followers</span></a>		
			</div>
				<div class="social-cta__column social-cta__column--email">
				<div class="social-cta__type social-cta__type--email">Newsletter</div>
				<span class="social-cta__desc social-cta__desc--email">
					Get our weekly newsletter in your inbox		</span>
				<!-- Begin Mailchimp Signup Form -->
	<form action="https://example.us14.list-manage.com/subscribe/post?u=xxxxxxxxxxxxxxxxxxx&id=xxxxxxxx" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
		<span class="social-cta__input-wrapper">
		<input class="social-cta__input" type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your Email..." required>
				</span>
	    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
	    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_xxxxxxxxxxxxxx_xxxxxxxx" tabindex="-1" value=""></div>
	    <div class="social-cta__button"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
	</form>
	<!--End mc_embed_signup-->
		</div>
	</div
<?php 
}
add_shortcode( 'social_box', 'wp_social_box' );

Shortcodes need to be returned without output buffering.

So you’d do this instead:

function wp_social_box() {
    ob_start();
    ?>
        Your HTML in here
    <?php 
    return ob_get_clean();
}
add_shortcode( 'social_box', 'wp_social_box' );

It works now. Thanks.

Last question, will this code affect my SEO (image indexing by google) or open graph tags? I read a response by Leo that hiding certain elements with PHP is better than using display:none; in the customizer.

That code will remove the element from the HTML. It won’t touch your existing open graph tags.