Adding Custom Shortcode Into Text Area > Column > Row

[alexwright]

I’m looking to add a custom shortcode into a text area that’s in a column in a row. The shortcode works, but it shows up on top of all other elements of all rows / columns. I’m sure I’m doing something stupid. Can you give a look?

Here’s the shortcode in the functions.php


function birdeye_plugin_short_round_rock() {
$businessNumber = 'XXXXXXXXXX';
$apiKey = get_option('apiKey');
$apiHost = get_option('apiHost');
$numOfReviews = get_option('default-reviews');
$opts = array(
'http' => array(
'method' => 'GET',
'header'=> "Content-Type: application/json\r\n" .
"Accept: application/json\r\n"
)
);
$context = stream_context_create($opts);
$response = file_get_contents('https://' . $apiHost . '/resources/v1/business/number/' . $businessNumber . '?api_key=' . $apiKey, false, $context);
$objBusiness = json_decode($response);
$businessStr = '<section class="row">
<div class="spb_content_element col-sm-12 spb_text_column">
<div class="spb-asset-content">
<p itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">Total Reviews : <span itemprop="reviewCount">' . $objBusiness->reviewCount . ' reviews</span><br>Average Rating : <span itemprop="ratingValue">' . $objBusiness->avgRating . ' </span></p>
</div>
</div>
</section>';
echo "$businessStr";
}
add_shortcode( 'BirdEyePluginShort-RoundRock', 'birdeye_plugin_short_round_rock' );


[alexwright]

I’m inserting the shortcode like this, via the PageBuilder:


[spb_text_block animation="none" animation_delay="0" simplified_controls="yes" custom_css_percentage="no" padding_vertical="0" padding_horizontal="0" margin_vertical="0" custom_css="margin-top: 0px;margin-bottom: 0px;" border_size="0" border_styling_global="default" el_class="clearfix" width="1/1" el_position="first last"]

[BirdEyePluginShort-RoundRock]

[/spb_text_block]


[alexwright]

I’m inserting the shortcode like this, via the PageBuilder:

[spb_text_block animation="none" animation_delay="0" simplified_controls="yes" custom_css_percentage="no" padding_vertical="0" padding_horizontal="0" margin_vertical="0" custom_css="margin-top: 0px;margin-bottom: 0px;" border_size="0" border_styling_global="default" el_class="clearfix" width="1/1" el_position="first last"]

[BirdEyePluginShort-RoundRock]

[/spb_text_block]

And here are screenshots of where the element shows up on the live rendered page versus where it's placed in the Page Builder.

Thanks!

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

Can you provide the link an admin credentials in a private reply?
We can’t support customizations but will have a look.

-Rui

[alexwright]

The website is not live yet. Just on a local install. I made it all into a custom page template sidebar and it works perfectly. If we need to use the shortcode elsewhere on the live website, I’ll send admin credentials then.

Thanks!

-Alex

[Rui Guerreiro – SUPPORT]

try to create a page using the classic editor with some content above and at the end place the shortcode to see what happens.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem quam, rhoncus vitae tincidunt sed, imperdiet eget quam. Mauris sit amet enim eleifend, bibendum dolor quis, feugiat enim. Donec velit metus, commodo sed feugiat egestas, semper at erat. Maecenas nibh nulla, imperdiet eu orci id, cursus dictum ex. In aliquet augue enim, in finibus lorem ornare non. Donec fermentum dignissim tellus, a accumsan mi tincidunt at. Nullam lobortis, ipsum eu laoreet gravida, dui sem venenatis est, id lobortis erat leo a orci. Praesent fermentum augue nec ligula dignissim dictum. Proin cursus ut est et luctus. Phasellus a nibh lacinia tellus malesuada semper sit amet ornare neque. Donec sit amet ante eu quam ti

[BirdEyePluginShort-RoundRock]

-Rui

[alexwright]

Ha – I actually tried that exact thing. The shortcode generated text still jumps to the top of the page while the lorem ipsum stays where it was. I tried a paragraph of lorem ipsum above and below the shortcode and the shortcode text jumps above everything as if its position were set to absolute or something, though I can’t find anything like CSS positioning that is causing the problem. The div containing the shortcode is actually output in the markup ahead of all the other content when inspecting elements.

Anyways, the code works fine in the custom template and I’ll get back in touch if we use the shortcode on the live website and I’ll include login credentials.

Thanks for being awesome!

-Alex

[Rui Guerreiro – SUPPORT]

ok. I think it’s something in the shortcode content, maybe that file_get_contents()
-Rui

[alexwright]

Yeah, that could be. I tried using wp_remote_get() but kept encountering server errors. If you plug their api url into a browser, you just get a 500 server error. file_get_contents() does work to pull the body of the api request.

Anywhoo, thanks!

[Rui Guerreiro – SUPPORT]

Guess you can’t use it like that in the frontend, maybe doing that in the admin ajax area and return the result to the frontend is the best.

-Rui