Using a Shortcode within a Shortcode - wordpress

A client is using WPBakery and a form is being pulled into the description attribute of a shortcode. Ordinarily you would pull the form by its shortcode but the boiler plate demo has the form being pulled with a string beginning with a hashtag.
E-8_JTVCbWM0d3BfZm9ybSUyMGlkJTNEJTIyNDc0JTIyJTVE
[trx_sc_title title_style="accent" title_align="left" link_style="default" title="Stay Tuned for Our Updates" subtitle="newsletter signup" description="#E-8_JTVCbWM0d3BfZm9ybSUyMGlkJTNEJTIyNDc0JTIyJTVE"]
is equivalent to:
[trx_sc_title title_style="accent" title_align="left" link_style="default" title="Stay Tuned for Our Updates" subtitle="newsletter signup" description="[mc4wp_form id="474"]"]
I need to pull a different form from ninjaforms( [ninja_form id=3] ) instead of the mailchimp form in the example. How do I convert the shortcode in the same manner they did?
Thanks in advance for any insight as to what is going on here.

use two shortcodes. so that it won't be complicated.
function kp_shortcode1($atts, $content = null)
{
ob_start();
?>
<div class="sc1-section">
<?php echo do_shortcode($content); ?>
</div>
<?php
$output = ob_get_clean();
return $output;
}
add_shortcode('kp_shortcode1', 'kp_shortcode1');
function kp_shortcode2($atts, $content = null)
{
ob_start();
?>
<div class="sc2-section">
<h1>shortcode 2 content</h1>
</div>
<?php
$output = ob_get_clean();
return $output;
}
add_shortcode('kp_shortcode2', 'kp_shortcode2');
Inside the wordpress backend use
[kp_shortcode1]
[kp_shortcode2]
[kp_shortcode2]
[kp_shortcode2]
[/kp_shortcode1]
Output would be :
<div class="sc1-section">
<div class="sc2-section">
<h1>shortcode 2 content</h1>
</div>
<div class="sc2-section">
<h1>shortcode 2 content</h1>
</div>
<div class="sc2-section">
<h1>shortcode 2 content</h1>
</div>
</div>

Related

How to position output of gravity forms dynamic output?

I'm simply trying to use the value from a Gravity Forms dynamically populated URL parameter as the ID for getting a custom field from Advanced Custom Fields. Using it like this returns the result within the of the content.
What is the best way to hook this such that it appears below the form. I've tried inserting the filter into the page template itself to no avail.
<?php
add_filter('gform_field_value_subclass', 'my_custom_population_function');
function my_custom_population_function($value)
{
$repair = get_field('repair', $value);
$report = get_field('report', $value);
if ($repair && $report) : ?>
<section class="rrr">
<div class="row">
<div class="repair">
<div class="r-wrap">
<h2 class="bracket-heading"><span>Step 2:</span>Report</h2>
<?php echo $repair ?>
</div>
</div>
<div class="recognize">
<div class="r-wrap">
<h2 class="bracket-heading"><span>Step 1:</span>Immediate Action Steps</h2>
<?php echo $report; ?>
</div>
</div>
</div>
</section>
<?php endif;
} ?>
I actually realized that something didn't feel right after looking over the first 20 pages of Google and not seeing a reference to this use case. The filters in Gravity Forms are more suited towards dynamic population of other fields, not to set context for the site as a whole. At least that's what it appears.
I found the better solution to be using query_vars.
In functions.php, I made it so that the URL parameter called subclass can be queried from Wordpress itself.
<?php
// add `author_more` to query vars
add_filter( 'init', 'add_subclass_query_var' );
function add_subclass_query_var()
{
global $wp;
$wp->add_query_var( 'subclass' );
}
?>
And then in my page template file, I grab that value that I need to set the ID of the field from the URL using get_query_var().
The rest is pretty straightforward and just prints the field values out where I need them.
<?php
$value = get_query_var('subclass');
$repair = get_field('repair', $value);
$report = get_field('report', $value);
if ($repair && $report) : ?>
<section class="rrr">
<div class="row">
<div class="repair">
<div class="r-wrap">
<h2 class="bracket-heading"><span>Step 2:</span>Report</h2>
<?php echo $repair ?>
</div>
</div>
<div class="recognize">
<div class="r-wrap">
<h2 class="bracket-heading"><span>Step 1:</span>Immediate Action Steps</h2>
<?php echo $report; ?>
</div>
</div>
</div>
</section>
<?php else:
echo "No Results Found"
?>
<?php endif; ?>
https://codex.wordpress.org/WordPress_Query_Vars

WooCommerce products shortcode outputs class="columns-x" twice

Just a vanilla call to product-category shortcode in functions.php is confusing me.
I'm trying to get a columns-3 of text sitting next to a columns-9 of products.
My code:
<div class="content">
<div class="columns-3">
<?php $home_kit = get_term(30, 'product_cat', ARRAY_A); ?>
<h2 class="section-title"><?php echo $home_kit['name']; ?></h2>
<p><?php echo $home_kit['description']; ?></p>
All Products »
</div>
<?php echo do_shortcode('[product_category category="home-kits" per_page="3" orderby="price" order="desc" columns="9"]'); ?>
</div>
The shortcode generates:
<div class="homepage-home-kit-category">
<div class="content">
<div class="columns-3">
<h2...</h2>
<p>...</p>
<a ...</a>
</div>
<div class="woocommerce columns-9 ">
<ul class="products columns-9">
<li></li>
</ul>
</div>
</div>
</div>
Note the repeat of the columns-9 on both the generated <div> and <ul>.
If both the <div> and <ul> have class columns-9 then I get 3/4 of the available 3/4.
Surely the class columns-9 only needs to be on either the WooComerce <div> or the <ul>.
How can I remove this addition from the <ul> element?
I am gratefull for the answers I received which are all valid and work well.
I suppose my underlying problem is that I cannot see the usefulness of the product_category shortcode as it does not obey the columns parameter faithfully.
Am I alone?
There are several options to remove/modify the columns-9 class from the <ul> element
Solution 1 - Through the use of a filter hook.
function filter_woocommerce_product_loop_start( $loop_start ) {
// New output
$loop_start = '<ul class="products">';
return $loop_start;
}
add_filter( 'woocommerce_product_loop_start', 'filter_woocommerce_product_loop_start', 10, 1 );
Solution 2 - Overwriting the template file.
You could overwrite the templates/loop/loop-start.php template file
This template can be overridden by copying it to yourtheme/woocommerce/loop/loop-start.php.
Replace
<ul class="products columns-<?php echo esc_attr( wc_get_loop_prop( 'columns' ) ); ?>">
With
<ul class="products">
Solution 3 - overwriting the existing function.
Since woocommerce_product_loop_start uses function_exits, see: includes/wc-template-functions.php on line 1110-1134 #version 2.5.0
More info: What's "function_exists" in Wordpress
/**
* Output the start of a product loop. By default this is a UL.
*
* #param bool $echo Should echo?.
* #return string
*/
function woocommerce_product_loop_start( $echo = true ) {
$loop_start = '<ul class="products">';
if ( $echo ) {
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
echo $loop_start;
} else {
return $loop_start;
}
}

WordPress page: Why is <main> tag wrapped by <p> while <div> is not?

In WordPress page, the <main> tags are wrapped by <p>s, but <div>s are not.
WordPress 4.7.12
Example 1: Using main tag
<main>
<div>this is main</div>
</main>
results
<p><main></p>
<div>this is main</div>
<p></main></p>
Example 2: Using div#main
<div id="main">
<div>this is main</div>
</div>
results
<div id="main">
<div>this is main</div>
</div>
Question
What is the trigger to wrap with <p>?
Remarks
My page.php is below.
<?php
/**
* #package WordPress
* #subpackage Default_Theme
*/
get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php remove_filter('the_content', 'wpautop'); ?>
<?php the_content('<p class="serif">' . __('Read the rest of this page »', 'kubrick') . '</p>'); ?>
<?php add_filter('the_content', 'wpautop'); ?>
<?php endwhile; endif; ?>
<?php get_footer(); ?>
<div> element is used to design to describe a container of data.
<p> element is designed to describe a paragraph of content.
<main> element represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.
Note: As we know <div> tag represents container and <p> tag represents paragraph of content so the can not lie in tag.
More details
It's defined in wp-includes/formatting.php#wpautop as disribed in this post.
I edited my formatting.php using the code in the post and the <p> is eliminated.
Open wp-includes/formatting.php
Find function wpautop in it.
Copy the function.
Open [your theme folder]/functions.php.
Paste 3 and rename wpautop to wpautop_fork.
Find the line defining $allblocks = '(?:table|thead|tfoot|caption|col|....
Add main (see the code below.)
Register wpautop_folk instead of wpautop.
My function.php becomes following code.
function wpautop_forked( $pee, $br = true ) {
//...
// Add 'main' at the tail.
$allblocks = '(?:table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre|form|map|area|blockquote|address|math|style|p|h[1-6]|hr|fieldset|legend|section|article|aside|hgroup|header|footer|nav|figure|figcaption|details|menu|summary|main)'
//...
}
remove_filter('the_content', 'wpautop');
add_filter('the_content', 'wpautop_forked');
This Q&A is also helpful:
Stop Wordpress Wrapping Images In A “P” Tag

Jquery Mobile with 2 set of page

I have a wordpress site, that need to show pages using swipe, I choose to use Jquery Mobile, and I get it working fine. Now, we have 2 languages on site, using wpml plugin. And my Swipe Code works well, except when we use Change language button swipe fails.
Details on issue.
We have only 3 Text Only page in our website, in 2 language. And in Footer we have link to change language. Also client hate to have Ajax page loading, so what I did is I create three Div with data-role=page and put data-next, data-prev as #div-$postid. So the navigation works absolute fine. I put footer outside from data-role=page.
Now, when I click change button in footer, it load the english page [I saw it using Fiddler] and then take first data-role=page from server and replace /slide its content. However since it only pick the first data role, all other english page doesn't get in HTML [it just update DOM and doesn't navigate to english version]. so swipe fails as other english pages are not in dom.
Also, footer is not changing, so what I want is: can we simple force a Link to navigate instead of going swipe way? Jquery Mobile is enforcing swipe on all A tags, I do not want swipe to works anything outside data-role=page.
Hope I make sense.
Edit here is code: [not sure if this code will help at all]
<?php
get_header();
global $post;
$args = array('post_type' => 'mobile_slide','showposts' => '-1', "order" => "DESC");
$the_query = new WP_Query($args);
if($the_query->have_posts()){
while($the_query->have_posts()) { $the_query->the_post();
$prev =get_previous_post();
$next =get_next_post();
if($prev) {
$prev = "#page-" . $prev->ID; //get_permalink($prev->ID);
} else {
$prev='';
}
if($next) {
$next = "#page-".$next->ID; //get_permalink($next->ID);
} else {
$next='';
}
if (has_post_thumbnail( $post->ID ) ) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'slider_image' ); ?>
<div id="page-<?php echo $post->ID; ?>" data-dom-cache="true" data-transition="slide" class="page" data-role="page" data-prev="<?php echo $prev; ?>" data-next="<?php echo $next; ?>" style="background-image:url('<?php echo $image[0]; ?>'); background-position:center center; background-color:#000; background-repeat:no-repeat; ">
<?php } else { ?>
<div id="page-<?php echo $post->ID; ?>" data-dom-cache="true" data-transition="slide" class="page" data-role="page" data-prev="<?php echo $prev; ?>" data-next="<?php echo $next; ?>">
<?php } ?>
<div class="post_box">
<h2><blockquote><?php the_title(); ?></blockquote></h2>
<div class="post_entry">
<?php the_content(); ?>
</div>
</div><!-- post_box -->
</div>
<?php }
} ?>
<?php get_footer(); ?>
This is all I have, except that get_footer use Ul li based list where on LI change based on language variable, to show different images for either language.
To stop Ajax from loading pages/links, add to link anchor data-rel="external" or data-ajax="false". This will load page normally without any transition.
Reference: jQuery Mobile - Links
For those who have similar problem, I fix it by using following:
1) I add a "noswipe" class to A Tag so I can refer it in Jquery
2) I add following code
$(function(){
$(".noswipe").click(function(){
window.location.href= $(this).attr("href");
return false;
});
});
The above code simply enforce to skip the Mobile's parsing and calling and works for my case.

Add meta box to WordPress options page

How can I add a (draggable) meta box to an options page for a plugin I created? Is this even possible? Because if I look in the docs I see that I can only add it to a 'post', 'page', 'link', or 'custom_post_type'.
Yes it's possible. The code in your previous question was correct but it misses something important or you haven't added that code to the question.
Here is a demo plugin that can help you get it working.
This Plugin demonstrates how you can build your own plugin pages using the WordPress provided draggable metaboxes, requires WordPress 2.7 version, supports WordPress 2.8 changed boxing layout engine
The basic code from the demo plugin is the following. Note that in the full exemple the side meta boxes are not working nor the two columns layout as it was written for WordPress 2.8 and current version is almost 5.0.
// Source code by Frank Bueltge at gist.github.com/bueltge/757903
class howto_metabox_plugin {
function howto_metabox_plugin() {
add_action('admin_menu', array($this, 'on_admin_menu'));
add_action('admin_post_save_howto_metaboxes_general', array($this, 'on_save_changes'));
}
function on_admin_menu() {
$this->pagehook = add_options_page('Howto Metabox Page Title', "HowTo Metaboxes", 'manage_options', 'howto_metaboxes', array($this, 'on_show_page'));
add_action('load-'.$this->pagehook, array($this, 'on_load_page'));
}
function on_load_page() {
wp_enqueue_script('common');
wp_enqueue_script('wp-lists');
wp_enqueue_script('postbox');
add_meta_box('howto-metaboxes-contentbox-2', 'Contentbox 2 Title', array($this, 'on_contentbox_2_content'), $this->pagehook, 'normal', 'core');
add_meta_box('howto-metaboxes-contentbox-additional-1', 'Contentbox Additional 1 Title', array($this, 'on_contentbox_additional_1_content'), $this->pagehook, 'additional', 'core');
}
function on_show_page() {
//define some data can be given to each metabox during rendering
$data = array('My Data 1', 'My Data 2', 'Available Data 1');
?>
<div id="howto-metaboxes-general" class="wrap">
<?php screen_icon('options-general'); ?>
<h2>Metabox Showcase Plugin Page</h2>
<form action="admin-post.php" method="post">
<?php wp_nonce_field('howto-metaboxes-general'); ?>
<input type="hidden" name="action" value="save_howto_metaboxes_general" />
<div id="poststuff" class="metabox-holder">
<div id="side-info-column" class="inner-sidebar">
<?php do_meta_boxes($this->pagehook, 'side', $data); ?>
</div>
<div id="post-body" class="has-sidebar">
<div id="post-body-content" class="has-sidebar-content">
<?php do_meta_boxes($this->pagehook, 'normal', $data); ?>
<?php do_meta_boxes($this->pagehook, 'additional', $data); ?>
<p>
<input type="submit" value="Save Changes" class="button-primary" name="Submit"/>
</p>
</div>
</div>
<br class="clear"/>
</div>
</form>
</div>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready( function($) {
// close postboxes that should be closed
$('.if-js-closed').removeClass('if-js-closed').addClass('closed');
// postboxes setup
postboxes.add_postbox_toggles('<?php echo $this->pagehook; ?>');
});
//]]>
</script>
<?php
}
function on_save_changes() {
if ( !current_user_can('manage_options') )
wp_die( __('Cheatin’ uh?') );
check_admin_referer('howto-metaboxes-general');
//process here your on $_POST validation and / or option saving
//lets redirect the post request into get request (you may add additional params at the url, if you need to show save results
wp_redirect($_POST['_wp_http_referer']);
}
function on_contentbox_2_content($data) {
sort($data);
?>
<p>The given parameter at <b>reverse sorted</b> order are: <em><?php echo implode(' | ', array_reverse($data)); ?></em></p>
<?php
}
function on_contentbox_additional_1_content($data) {
?>
<p>This and the 2nd <em>additional</em> box will be addressed by an other group identifier to render it by calling with this dedicated name.</p>
<p>You can have as much as needed box groups.</p>
<?php
}
}
$my_howto_metabox_plugin = new howto_metabox_plugin();

Resources