Wordpress Shortcode Output Buffering Renders Content When Saving Post in WP Admin - wordpress

I have a WP shortcode that is giving me problems.
Basically, the shortcode just pulls content from another post using a couple of parameters. It then loads up a partial template.
The problem occurs in WP Admin when saving the page that contains the shortcode. When saving the page updates do in fact save correctly but the resulting page is a page that outputs the contents of the shortcode.
I'm using output buffering around get_template_part() for two reasons: 1. So I only have one instance of the template in my code - and - 2. Because the template is actually pretty substantial and appending all of it to an output variable would be a daunting task.
The shortcode works fine in every way except when saving the page.
Here is a video demonstrating the issue:
https://www.awesomescreenshot.com/video/1146323?key=103ae00d841b47cee8a902eb18c8988a
Here is my code:
function get_main_page_content( $atts ) {
$main_page_id = $atts['main_page_id'];
$section = $atts['section'];
$people_display_option = $atts['people_display_option'];
$GLOBALS['sc_display_option'] = $people_display_option;
ob_start();
if(have_rows('flexible_content', $main_page_id)):
while(have_rows('flexible_content', $main_page_id)): the_row();
if ( $section == 'agenda' ) {
get_template_part('partials/agenda');
}
if ( $section == 'people_cards' ) {
get_template_part('partials/people-cards');
}
endwhile;
endif;
ob_end_flush();
$output = ob_get_contents();
ob_end_clean();
return $output;
}
add_shortcode('get_main_page_content', 'get_main_page_content');

It looks to me like ob_end_flush() is not needed and is redundant. That might be causing the OB to send twice, resulting in that code on your screen.
I'd be curious if your problem persists if you drop that line. Also, for a very simplified version of your exact usecase, check this blog post:
https://konstantin.blog/2013/get_template_part-within-shortcodes

Related

Wordpress shortcode is being inserted before content

I know we have have to return the shortcode but I'm trying to use custom templates and the shortcode is being inserted before the content in the wysiwyg editor when its actually at the end of the content:
Here is my shortcode:
add_shortcode('test_temp', 'temp_handler');
function temp_handler($atts) {
ob_start();
load_template(TEMPLATES_PATH . templates/test.php');
return ob_get_contents();
}
here is what test.php looks like:
<div class="testDiv">Here is my test template</div>
What else can I do so the short code is not inserted before the content?
Try this:
add_shortcode('test_temp', 'temp_handler');
function temp_handler($atts) {
ob_start();
load_template(TEMPLATES_PATH . templates/test.php');
$ret = ob_get_contents();
ob_end_clean();
return $ret;
}
Your idea to use output buffering to load template files is a good idea and a common practice for Wordpress shortcodes. However, it looks odd to me that you don't end the output buffering anywhere in your provided code, ob_end_clean(), which leads me to believe that your output buffering is just not setup perfectly.
Generally speaking, Wordpress will run your function and replace your shortcode tag with the output. If the output of your function is instead showing up somewhere else on the page (particularly if it is showing up above the area where it should be) then your function must be outputting content as Wordpress is running it (in your case, it must not be output buffering as expected).
Note: The load_template function uses require_once by default, which means you'll only be able to use your shortcode once on the page. Instead, I recommend using: load_template(TEMPLATES_PATH . templates/test.php', false);

Visual Composer Grid with do_action shortcode is not working

I have visual composer which is packed with total theme. When I put the following grid short code in my page in the editor it works correctly.
[vc_basic_grid post_type="post_type" max_items="10" item="masonryGrid_SlideFromLeft" grid_id="vc_gid:1458178666639-80ebf3775500c87d35de078c3422fe96-10" taxonomies="555"]
However, when I call the exact same code using do_action it gives the following javascript error. I checked the html output and it is the same using do_action like putting the short code in editor.
Error: Syntax error, unrecognized expression: {'status':'Nothing found'}
s
Any help is greatly appreciated.
Well, you can't output contents directly in your templates by using core shortcodes of VC like that.
1. Problem:
For security, besides nonce, VC uses page_id and shortcode_id to check AJAX request/respond data.
The shortcode_id is automatically generated by VC, you can not harcode it.
For example, this is the shortcode you see on admin editor screen:
[vc_basic_grid post_type="post_type" max_items="10" item="masonryGrid_SlideFromLeft" grid_id="vc_gid:1458178666639-80ebf3775500c87d35de078c3422fe96-10" taxonomies="555"]
Let say the page ID is 4269, this is the generated HTML code on front-end:
<!-- vc_grid start -->
<div class="vc_grid-container-wrapper vc_clearfix">
<div class="vc_grid-container vc_clearfix wpb_content_element vc_masonry_grid" data-initial-loading-animation="zoomIn" data-vc-grid-settings="{"page_id":4269,"style":"all-masonry","action":"vc_get_vc_grid_data","shortcode_id":"1458178666639-80ebf3775500c87d35de078c3422fe96-10","tag":"vc_masonry_grid"}" data-vc-request="http://example.com/wp-admin/admin-ajax.php" data-vc-post-id="4269" data-vc-public-nonce="0641473b09">
</div>
</div>
<!-- vc_grid end -->
Now, if page_id and shortcode_id don't match each other, {'status':'Nothing found - $shorcode_id'} will be throw out and no contents will be displayed.
You can find out more inside vc_grid.min.js file.
2. Solution:
Generate a fake page with VC, then copy generated html code to your template file.
Create a template with VC directly.
Use Shorcode Mapper to create your own shorcode.
First you build a new page and add a grid post on it,
then we get
_vc_post_settings
post meta , and try to build a new one
then update post meta data
now we can by pass VC Ajax security check
in the following code "1513628284966-37b8c3ca-d8ec-1" is VC generated guid
you should change it to yours .
$meta = get_post_meta(1365,'_vc_post_settings');
$settings = array();
#$settings['vc_grid_id'] = $meta[0]['vc_grid_id'];
$key = random_int(1513628284966,9513628284966);
$settings['vc_grid_id']['shortcodes'][''.$key.'-37b8c3ca-d8ec-1'] = $meta[0]['vc_grid_id']['shortcodes']['1513628284966-37b8c3ca-d8ec-1'];
$settings['vc_grid_id']['shortcodes'][''.$key.'-37b8c3ca-d8ec-1']['atts']['custom_query'] = "tag=shop";
$settings['vc_grid_id']['shortcodes'][''.$key.'-37b8c3ca-d8ec-1']['atts']['grid_id'] = ''.$key.'-37b8c3ca-d8ec-1';
$n = add_post_meta(1365,'_vc_post_settings',$settings);
return do_shortcode("[vc_basic_grid post_type=\"custom\" show_filter=\"yes\" filter_style=\"dropdown\" item=\"5959\" grid_id=\"vc_gid:".$key."-37b8c3ca-d8ec-1\" filter_source=\"post_tag\" custom_query='tag=".$tag."']");
I've solved.
I had the same problems, with the Visual Composer Editor offered by WpBakery
https://wpbakery.com/
and after understanding the connection between the IDs of the block, and the ID of the Post, I put more attention to the settings of the Block.
There is infact one field called "Element ID", and here we have to put our ID of the Post we are editing.
In my case the Block was a block containing some Posts.
After saving, and viewing the page without the Editor, I was finally able to see the block, and not the message
{"status":"Nothing found"}
I found a solution to this problem.
I modified the woocommerce category template and linked to the woocommerce_archive_description hook to add additional descriptions from some pages, for this I got their id, and then display the content.
echo do_shortcode($post->post_content);
The gallery(media grid) didn't work because there was a mismatch between the page id and the shortcode id. Therefore, the logical solution was to redefine the global variable $post to the $post of the page from which I get the content.
global $post;
$post = get_post( $id );
And it turns out that the post id matches.
After that, don't forget to return the normal $post value;
wp_reset_postdata();
By the way - use this option to load custom styles for wpbakery elements.
echo '<style type="text/css" data-type="vc_shortcodes-custom-css">' . get_post_meta( $id, '_wpb_shortcodes_custom_css', true ) . '</style>';
The whole code
function extra_product_category_desc(){
if( is_product_category() ){
$id = get_term_meta (get_queried_object()->term_id, 'pageId', true);
if($id !== ''){
global $post;
$post = get_post( $id );
echo do_shortcode($post->post_content);
echo '<style type="text/css" data-type="vc_shortcodes-custom-css">' . get_post_meta( $id, '_wpb_shortcodes_custom_css', true ) . '</style>';
wp_reset_postdata();
}
}
}
add_action( 'woocommerce_archive_description', 'extra_product_category_desc', 11 );
You may also try with do_shortcode('');
Like
do_shortcode('[vc_basic_grid post_type="post_type" max_items="10" item="masonryGrid_SlideFromLeft" grid_id="vc_gid:1458178666639-80ebf3775500c87d35de078c3422fe96-10" taxonomies="555"]');
Best Regards,

I see my URL but I can't find the page in wordpress dashboard

I'm using wordpress and my page has the URL http://proservicescontractors.com/services/
But when I go to the page in my dashboard with the above URL, any change I make does not show on the front end. I tried simply duplicating my content and that change did not show on the front end.
Not sure what to do, this has me completely baffled.
Any ideas?
Since they're custom post types, by default, they're not actually loaded into a page per se. You should read up on WordPress's template hierarchy. To give you a rough idea of what's happening:
WP looks at your URL, and since it recognises it as a custom post type archive, it will look for a template to use...
It will first look for archive-$post_type.php, or in your case, archive-services.php
If it can't find that, it will look for archive.php
If it can't find that, it will use index.php
The important thing to note is that archive pages don't actually show up in the admin area, since they simply gather up and display custom posts, so there's nothing for you to edit.
Now, if you really want to edit some content on the Services archive, you have two options:
Edit archive-services.php in a text editor.
This is the quick and dirty option; the downside is that it defies the point of a CMS.
Create a page template with it's own loop
Create a new page template called page-services.php and insert a loop in there to display your custom posts. To get you started:
<?php get_header(); ?>
<?php // The main loop
if (have_posts()) {
while (have_posts()) {
the_post();
}
} else {
echo 'No posts';
}
?>
<?php // Now for the services loop
// WP_Query arguments
// For additional options, see: https://codex.wordpress.org/Class_Reference/WP_Query#Parameters
$args = array (
'post_type' => array( 'services' ),
);
// The Query itself
$query = new WP_Query( $args );
// The Loop
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
// Do something with the post
// In your case look at archive-services.php and see what
// that template does inside the loop
}
} else {
// no posts found
}
// Restore original Post Data
// Don't forget this, it's important
wp_reset_postdata();
?>
<?php get_footer();?>
You should then be able to apply that page template to your Services page; it should then display your posts below the page content. One thing to look out for is that WordPress will continue to load archive-services.php whenever you go to http://proservicescontractors.com/services/. While there are ways around this, the easiest fix would be to simply give your new page a different url, such as http://proservicescontractors.com/all-services/
Thanks for your help. I'm using yoast and I wanted to change the title and description. When you pointed out that it was a custom post type archive and not a page, I went back through yoast and found where I could change them under "Titles and Metas" > "Custom Post Type Archives" > "Services"

Replacing only parts of an archive and single page template of WordPress

I am having a bit of trouble here understanding how to do the following. I have searched for weeks now but cannot seem to find what I am looking for.
I have a custom post type 'product' and want to change which template gets loaded for the single product page as well as the archive for the products. I am using the following code to load include and load templates.
add_filter('template_include', function() {
if (is_post_type_archive('product')) {
$templatefilename = 'archive-product.php';
$template = WPVS_PATH . 'templates/' . $templatefilename;
return $template;
}
if ('product' == get_post_type() ){
$templatefilename = 'single-product.php';
$template = WPVS_PATH . 'templates/' . $templatefilename;
return $template;
}
});
The problem I am having is that it replaces the current theme's template instead of just the inner part of the content and archive areas.
Here is what I want to achieve:
Create a custom post type 'product' in a plugin - DONE (Was kinda easy!)
When opening a single product only change the content part. - I can do this with the_content filter hook. Simple enough. Any other suggestions is welcome.
When I go to the archive view for the 'product' custom post type I don't want to have it load the theme's default archive (list) view but instead a grid view from my plugin which I cannot seem to get right. I only want to change the inner part of the template, not the whole page.
I have created this plugin a few weeks ago using only shortcodes which works good but want to see if I can do it without the use of shortcodes by means of creating the custom post type and changing the inner template parts of the current active theme.
Can anybody steer me into the right direction here?
If I create a theme I can do what I am looking for but I want to create this into a plugin instead without adding or making changes to the active theme. The plugin should handle what is needed.
The same issue is discussed here but what I want is to develop something that is theme independent. No changes should be made in theme files and no theme files should be copied to the plugin.
WP - Use file in plugin directory as custom Page Template?
Recently I also had the same problem. Here's how I worked it out.
template_include filter accepts a parameter which is the selected template that you want to override (this what you are missing in your code).
I don't know but sometimes the filter hook need higher priority to work like 9999. But first check if it work with default priority, if don't change it.
I assume your both archive and single product template both have include get_header() and get_footer() which can be used for default selected theme (Or if the theme has different setup, setup accordingly).
This is simplified code:
add_filter('template_include', function($default_template) {
if (is_post_type_archive('product')) {
$templatefilename = 'archive-product.php';
$template = WPVS_PATH . 'templates/' . $templatefilename;
$default_template = $template;
} else if ('product' == get_post_type() ) {
$templatefilename = 'single-product.php';
$template = WPVS_PATH . 'templates/' . $templatefilename;
$default_template = $template;
}
// Load new template also fallback if both condition fails load default
return $default_template;
}, 9999); // set priority, only if not worked with default one
The best option in this case is to provide a shortcode to the user. So they can place it on any page that they want (or that you auto generate). That way you will place your content inside their theme.
Something like this:
add_shortcode( 'slotsl-game', 'embed_game' );
/**
* Print the game
* #return false|string
*/
function embed_game(){
ob_start();
$game = get_post();
include_once SLOTSL_PLUGIN_DIR . 'templates/slotsl-single-game.php';
return ob_get_clean();
}

Single Page Navigation Menu Dynamically Generated

hHi all! I have posted this question on the WP support forums, but the community doesn't seem to be as active as stack's, so I am taking a chance here!
I am looking for a plugin that would automatically create a navigation menu (through the use of shortcodes for example) on a long single page documentation page.
The long page is divided into sections. I can imagine using a shortcode at the beginning of every section, and this will create a menu that would be displayed in a sidebar for example (called through a second shortcode perhaps, or a widget)
Any thoughts? Advice?
Thanks!
Use [section]Section Title[/section] shortcodes, then [section_navigation] where you want the navigation links output.
This works, but with a massive caveat -- that [section_navigation] needs to be in your post/page after the other [section] shortcodes... otherwise it generates an empty list.
You should be ok to use it in your theme by putting <?php echo do_shortcode("[section_navigation]");?> in sidebar.php. It will work as long as get_sidebar() is after the_content() in your theme templates (it usually is).
This to go in functions.php
$whit_sections = "";
// [section]My Section Title[/section]
function whit_section_shortcode( $atts, $title = null ) {
// $content is the title you have between your [section] and [/section]
$id = urlencode(strip_tags($title));
// strip_tags removes any formatting (like <em> etc) from the title.
// Then urlencode replaces spaces and so on.
global $whit_sections;
$whit_sections .= '<li>'.$title.'</li>';
return '<span id="'.$id.'">'.$title.'</span>';
}
add_shortcode('section', 'whit_section_shortcode');
// [section_navigation]
function whit_section_navigation_shortcode( $atts, $title = null ) {
global $whit_sections;
return '<ul class="section-navigation">'.$whit_sections.'</ul>';
}
add_shortcode('section_navigation', 'whit_section_navigation_shortcode');

Resources