I have this code that I made for wordpress inside functions.php
function card_shortcode($atts, $content = null) {
$attributes = shortcode_atts( array(
'titolo' => '',
'prezzo' => '0',
'bullet' => ''
), $atts );
$title = esc_attr($attributes['titolo']);
$price = esc_attr($attributes['prezzo']);
$bullet = esc_attr($attributes['bullet']);
$output = '<div class="card">
<div class="card_main_point">
[card_title titolo="'.$title.'"]
[card_price prezzo="'.$price.'€"]
</div>
<div class="card_secondary_point">
<ul class="bullet_holder">
[card_bullet bullet="'.$bullet .'"]
</ul>
</div>
</div>
[card_style]';
return do_shortcode($output);
}
I tried looking for answer in the internet but got no result as the output that comes out is this
<div class="card">
<div class="card_main_point">[card_titleTest][card_price42€]
<div class="card_price">
<h4></h4>
</div>
</div>
<div class="card_secondary_point">
<ul class="bullet_holder">[card_bulletrew;tre;ytr]
</ul>
</div>
</div>
I've also tried this solution but with the same outcome. It's like that shortcode that have attributes get trucated and only the variable remains. Can someone help me?
function card_shortcode($atts, $content = null) {
$attributes = shortcode_atts( array(
'titolo' => '',
'prezzo' => '0',
'bullet' => ''
), $atts );
$title = esc_attr($attributes['titolo'];
$price = esc_attr($attributes['prezzo'];
$bullet = esc_attr($attributes['bullet'];
$output = '<div class="card">
<div class="card_main_point">'
. do_shortcode('[card_title titolo="'.$title.'"]') . ''
. do_shortcode('[card_price prezzo="'.$price.'€"]') .'
</div>
<div class="card_secondary_point">
<ul class="bullet_holder">'
. do_shortcode('[card_bullet bullet="'.$bullet .'"]') . '
</ul>
</div>
</div>
'
. do_shortcode("[card_style]");
return do_shortcode($output);
}
I've resolved. I had to clean the cache and on my last 2 tries I accidentally update the them style instead of the theme functions. If it is of help the topmost solution works
Related
I am trying to put the variable $about inside of the html I am returning...however when I view the output, it puts $about above the html code...
function cc_shortcode( $atts ) {
$other_page = 498;
$about = the_field('cc_about_this_course', $other_page);
extract( shortcode_atts( array(
'id' => '',
), $atts) );
$result = '<div class="main">
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title active" href="#accordion-1">ABOUT THIS COURSE<i class="fa fa-arrow-down"></i></a>
<div id="accordion-1" class="accordion-section-content open" style="display: block;">
<p>' . $about . '</p>
</div>
</div>
';
return $result;
}
https://www.advancedcustomfields.com/resources/the_field/
the_field used for displaying value from the current post that's why it display value..
solution to use get_field ; https://www.advancedcustomfields.com/resources/get_field/
if the there is not get_field.. (for common problems)... like this..
you can ob_start(); and ob_get_clean for you problem
function cc_shortcode( $atts ) {
$other_page = 498;
ob_start();
the_field('cc_about_this_course', $other_page);
$about = ob_get_clean();
extract( shortcode_atts( array(
'id' => '',
), $atts) );
$result = '<div class="main">
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title active" href="#accordion-1">ABOUT THIS COURSE<i class="fa fa-arrow-down"></i></a>
<div id="accordion-1" class="accordion-section-content open" style="display: block;">
<p>' . $about . '</p>
</div>
</div>
';
return $result;
}
I have a function I wrote in my functions.php page for a gallery to display on certain pages. It displays on custom templates, but now I need it to display on index.php Here is the code from my functions.php file:
function min_get_page_gallery( $echo = true) {
global $post;
$show_gallery = get_post_meta($post->ID, 'min_gallery-show', true);
if ( empty($show_gallery) ) {
return;
}
$gallery = get_post_meta($post->ID, 'min_image_advanced', false);
ob_start();
?>
<div class="gallery" id="gallery-<?php echo $post->ID; ?>">
<button class="gallery-move-left"><i class="fa fa-arrow-circle-left" aria-hidden="true"></i></button>
<div class="image_container clearfix">
<?php
$count = count($gallery);
$num = ceil($count / 3);
//$width_container = $num * 100;
//$width_row = 100 / $num;
//echo '<div class="gallery_inner" style="width:' . $width_container . '%;">';
echo '<div class="gallery_inner">';
for ( $i = 0; $i < $count; $i++) {
if ( $i % 3 == 0 ) {
//echo '<div class="row" style="width: ' . $width_row . '%;">';
echo '<div class="row'. (0 == $i ? ' active': ' inactive') .'">';
}
echo '<div class="col-sm-4 img_container' . (0 == $i ? ' active': ' inactive') . '">';
echo wp_get_attachment_image($gallery[$i], 'thumb-gallery');
echo '</div>';
if ( $i % 3 == 2 || ($i+1) == $count) {
echo '</div>';
}
}
echo '</div>';
?>
</div>
<button class="gallery-move-right"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i></button>
</div>
<?php
$return = ob_get_contents();
ob_end_clean();
if ( $echo ) {
echo $return;
} else {
return $return;
}
}
That code works like a charm. Here is where I call it as min_get_page_gallery(); in awards.php where it works flawlessly:
<?php
/* Template Name: Awards Page Template */
get_header(); ?>
<div class="container" id="block-no-sidebar">
<h1><?php the_title(); ?></h1>
<div id="award-list">
<?php echo min_get_awards(); ?>
</div>
<div class="row">
<?php min_get_page_gallery(); ?>
</div>
<?php min_get_page_tabs(); ?>
</div>
<?php get_footer(); ?>
Now finally, I try to add the same function call of min_get_page_gallery(); in my index.php file like this:
<?php
// Silence is golden.
if ( ! defined ( 'ABSPATH' ) ) {
exit;
}
?>
<?php get_header(); ?>
<style class="take-to-head">
#block-main-content-with-sidebar { background: #ffffff; }
</style>
<div class="container" id="block-main-content-with-sidebar">
<div class="row">
<div class="col-sm-8">
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
l('block-' . get_post_type());
endwhile; else:
l('block-none' );
endif;
?>
</div>
<div class="col-sm-4">
<?php l('block-sidebar'); ?>
</div>
</div>
<div class="row">
<?php min_get_page_gallery(); ?>
</div>
</div>
Is there something I'm missing??
Try to describe in more detail, what is wrong with your index.php? Is some output when load input.php, or blank page?
Is correctly defined ABSPATH? If not, your script exit on the beginning.
For more specific awareness of flow through the script, try to write there some echo
E.g.
<div class="row">
<?php echo "Before calling min_get_page_gallery()" ?>
<?php min_get_page_gallery(); ?>
<?php echo "After calling min_get_page_gallery()" ?>
</div>
Then look, if you can see the messages from echo before and after calling the desired function.
Ok, so I had to do some tweaking to get the meta to show in functions.php I added these lines:
$pagemain = is_page();
and then:
if ( $pagemain == is_page( 35393 ) ) {
$meta[] = array(
'id' => 'imageupload',
'post_types' => array( 'page'),
'context' => 'normal',
'priority' => 'high',
'title' => __( 'Image Gallery', 'min' ),
'fields' => array(
array(
'name' => __( 'Show', 'min' ),
'id' => "{$prefix}_gallery-show",
'desc' => __( '', 'meta-box' ),
'type' => 'checkbox',
'clone' => false,
),
array(
'id' => "{$prefix}_image_advanced",
'name' => __( 'Image Advanced', 'min' ),
'type' => 'image_advanced',
// Delete image from Media Library when remove it from post meta?
// Note: it might affect other posts if you use same image for multiple posts
'force_delete' => false,
// Maximum image uploads
//'max_file_uploads' => 2,
),
),
);
}
Not sure how will i able to explain this, but here we go
I have an array as below:
$arr = array(
array('id' => 1,
'content' => '<h1>This is a simple Content</h1>',
'vars' => null,
'path' => 'holders/row.php',
'sub-page' => array(
'id' => 2,
'content' => '<h1>Sample Body Here</h1>',
'vars' => '{"title":"Sample Title Here"}',
'path' => 'holders/box.php',
'sub-page' => array(
'id' => 3,
'vars' => '{"title":"Sample Title NUmber 3 Here"}',
'content' => '<h1>Again Sample Body Here</h1>',
'path' => 'holders/box.php'
)
)
)
);
What i am looking for is
array should go to the deepest sub-page and json_decode the vars key and extract as variables and include the file.
Once this is done, the output is passed to the parent's content key and parse it again
This is basically for creating dynamic content
the holders/row.php contains:
<div class="row">
<?= $content; ?>
</div>
and holders/box.php contains:
<div class="box lite">
<div class="box-title">
<h4><?= $title; ?></h4>
<div class="tools">
<a href="javascript:;" class="collapse">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
<div class="box-body">
<?= $content; ?>
</div>
</div>
and the desired output is:
<div class="row">
<div class="box lite">
<div class="box-title">
<h4>Sample Title Here</h4>
<div class="tools">
<a href="javascript:;" class="collapse">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
<div class="box-body">
<h1>Again Sample Body Here</h1>
<div class="box lite">
<div class="box-title">
<h4>Sample Title NUmber 3 Here</h4>
<div class="tools">
<a href="javascript:;" class="collapse">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
<div class="box-body">
<h1>Again Sample Body Here</h1>
</div>
</div>
</div>
</div>
</div>
What have i tried so far
I am trying to loop around the array as below:
foreach ($arr as &$page) {
if (isset($page[$keyToParse])) {
$subMenu = $page[$keyToParse];
unset($page[$keyToParse]);
$page['content'] = $page['content'] . $this->parsePage($keyToParse, $subMenu);
return $page['content'];
} else {
$params = strlen($page['vars']) > 0 ? json_decode($page['vars'], true) : [];
$elementPath = $page['path'];
$params = array_merge($params, array('content' => $page['content']));
$page['content'] = callback(function () use ($params, $elementPath) {
extract($params);
include($elementPath);
});
return $page['content'];
}
and the function callback is as:
function callback($userfunc)
{
ob_start();
$userfunc();
$return = ob_get_contents();
ob_end_clean();
return $return;
}
Please help as i am stuck for a long time now
All you should have to do is something like this.
function renderNode($node){
ob_start();
if (isset($node["sub-page"]) && $node["sub-page"]){
$node["content"] = renderNode($node["sub-page"]);
}
extract($node);
include ($node["path"]);
return ob_get_clean();
}
and then invoke it like:
echo renderNode($arr[0]);
I Am trying to create a wordpress shortcode that allows users to creat jQuery UI tabs. I found this great script online which claims to do it - however it has some quite unwelcome results in my page.
Firstly, the script I am currently using is as follows:
add_shortcode( 'tabgroup', 'jqtools_tab_group' );
function jqtools_tab_group( $atts, $content )
{
$GLOBALS['tab_count'] = 0;
do_shortcode( $content );
if( is_array( $GLOBALS['tabs'] ) ){
foreach( $GLOBALS['tabs'] as $tab ){
$tabs[] = '<li><a class="" href="#">'.$tab['title'].'</a></li>';
$panes[] = '<div class="pane"><h3>'.$tab['title'].'</h3>'.$tab['content'].'</div>';
}
$return = "\n".'<!-- the tabs --><ul class="tabs">'.implode( "\n", $tabs ).'</ul>'."\n".'<!-- tab "panes" --><div class="panes">'.implode( "\n", $panes ).'</div>'."\n";
}
return $return;
}
add_shortcode( 'tab', 'jqtools_tab' );
function jqtools_tab( $atts, $content )
{
extract(shortcode_atts(array(
'title' => 'Tab %d'
), $atts));
$x = $GLOBALS['tab_count'];
$GLOBALS['tabs'][$x] = array( 'title' => sprintf( $title, $GLOBALS['tab_count'] ), 'content' => $content );
$GLOBALS['tab_count']++;
}
However, the HTML output I am TRYING to achieve is this:
<div class="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tabs-1">
<p>Content</p>
</div>
<div id="tabs-2">
<p>Content</p>
</div>
<div id="tabs-3">
<p>Content</p>
</div>
</div>
The shortcode php gives a slightly different output to what I need in order to make this work - here is my current outputted HTML:
<!-- the tabs -->
<ul class="tabs">
<li><a class="" href="#">Tab 0</a></li>
<li><a class="" href="#">Tab 1</a></li>
<li><a class="" href="#">Tab 2</a></li>
</ul>
<!-- tab "panes" -->
<div class="panes">
<div class="pane">
<h3>Tab 0</h3>Content
</div>
<div class="pane">
<h3>Tab 1</h3>Content
</div>
<div class="pane">
<h3>Tab 2</h3>Content
</div>
</div>
Finally, the shortcode I am using looks like this:
[tabgroup]
[tab title="tab1"]Content[/tab]
[tab title="tab2"]Content[/tab]
[tab title="tab3"]Content[/tab]
[/tabgroup]
My question is, how do I need to change my php code to make the outputted HTML look like the HTML needed to make the tabs work?
OK this is what you have to do.
if( is_array( $GLOBALS['tabs'] ) ){
foreach( $GLOBALS['tabs'] as $k=>$tab ){
$tabs[] = '<li>'.$tab['title'].'</li>';
$panes[] = '<div id="tab-'.$k.'"><p>'.$tab['content'].'</p></div>';
}
$return = "\n".'<!-- the tabs --><div class="tabs"><ul>'.implode( "\n", $tabs ).'</ul>'."\n".'<!-- tab "panes" -->'.implode( "\n", $panes ).'</div>'."\n";
}
You can also add shortcode like this:-
// Tab
function tab_shortcode( $atts, $content = null ) {
extract( shortcode_atts( array(
'title' => ''
), $atts ) );
return '<div id="tabs-'. sanitize_title( $title ) .'">'. do_shortcode( $content ) .'</div>';
}
add_shortcode( 'tab', 'tab_shortcode' );
// Tabs Container
function tabs_container_shortcode( $atts, $content = null ) {
preg_match_all( '/tab title="([^\"]+)"/i', $content, $matche, PREG_OFFSET_CAPTURE );
$tab_title = array();
if( isset($matche[1]) ) {
$tab_title = $matche[1];
}
$output = '';
if( count($tab_title) ) {
$output .= '<div id="tabs">';
$output .= '<ul class="nav clearfix">';
foreach( $tab_title as $tab ){
$output .= '<li>' . $tab[0] . '</li>';
}
$output .= '</ul>' . do_shortcode( $content ) . '</div>';
} else {
$output .= do_shortcode( $content );
}
return $output;
}
add_shortcode( 'tabs_container', 'tabs_container_shortcode' );
This will also work for tabs. Hope this will help you bit.
I am currently trying to create a shortcode for WordPress that creates tabs, I know there are available shortcodes.. But I am trying to learn how to write them myself.
Currently I am generating the tab menu items, but i am stuck with placing the content in an entirely new div.
Front end Usage:
[tabs]
[tab title="tab" active="y" id="home"]home[/tab]
[tab title="tab2" active="n" id="about"]about[/tab]
[tab title="tab3" active="n" id="help"]help[/tab]
[/tabs]
And then the code:
function tabs_group( $atts, $content = null ) {
extract(shortcode_atts(array(
'id' => '',
'class' => ''
), $atts));
$output = '<ul class="nav nav-tabs '.$class.'" ';
if(!empty($id))
$output .= 'id="'.$id.'"';
$output .='>'.do_shortcode($content).'</ul>';
return $output;
}
add_shortcode("tabs", "tabs_group");
function tab($atts, $content = null) {
extract(shortcode_atts(array(
'id' => '',
'title' => '',
'active'=>'n'
), $atts));
if(empty($id))
$id = 'tab_item_'.rand(100,999);
$output = '<li class="'.($active == 'y' ? 'active' :'').'">
'.$title.'
</li>';
$output .= '<div class="tab-content">
<div class="tab-pane active" id="'.$id.'">'.$content.'</div>
<div class="tab-pane" id="'.$id.'">'.$content.'</div>
<div class="tab-pane" id="'.$id.'">'.$content.'</div>
</div>';
return $output;
}
add_shortcode("tab", "tab");
it currently returns:
<ul class="nav nav-tabs">
<li class="active">
tab
</li><div class="tab-content">
<div class="tab-pane active" id="home">home</div>
<div class="tab-pane" id="home">home</div>
<div class="tab-pane" id="home">home</div>
</div>
<li class="">
tab2
</li><div class="tab-content">
<div class="tab-pane active" id="about">about</div>
<div class="tab-pane" id="about">about</div>
<div class="tab-pane" id="about">about</div>
</div>
<li class="">
tab3
</li><div class="tab-content">
<div class="tab-pane active" id="help">help</div>
<div class="tab-pane" id="help">help</div>
<div class="tab-pane" id="help">help</div>
</div>
</ul>
and i need it to return:
<ul class="nav nav-tabs " >
<li class="active">
tab
</li>
<li class="">
tab2
</li>
<li class="">
tab3
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">blah</div>
<div class="tab-pane" id="about">blah</div>
<div class="tab-pane" id="help">blah</div>
</div>
I have added to the output, thank you Obmerk Kronen.
Any Help Greatly Appreciated.
The problem here is that you need to add your divs after do_shortcode($content) : while parsing tab shorcodes, you need to keep your divs somewhere to be able to output them after.
A simple way (not nicest way) for doing this could be using a global var, e.g. :
add_shortcode('tabs', 'tabs_group');
add_shortcode('tab', 'tab');
// this variable will hold your divs
$tabs_divs = '';
function tabs_group( $atts, $content = null ) {
global $tabs_divs;
// reset divs
$tabs_divs = '';
extract(shortcode_atts(array(
'id' => '',
'class' => ''
), $atts));
$output = '<ul class="nav nav-tabs '.$class.'" ';
if(!empty($id))
$output .= 'id="'.$id.'"';
$output.='>'.do_shortcode($content).'</ul>';
$output.= '<div class="tab-content">'.$tabs_divs.'</div>';
return $output;
}
function tab($atts, $content = null) {
global $tabs_divs;
extract(shortcode_atts(array(
'id' => '',
'title' => '',
'active'=>'n'
), $atts));
if(empty($id))
$id = 'tab_item_'.rand(100,999);
$activeClass = $active == 'y' ? 'active' :'';
$output = '
<li class="'.$activeClass.'">
'.$title.'
</li>
';
$tabs_divs.= '<div class="tab-pane '.$activeClass.'" id="'.$id.'">'.$content.'</div>';
return $output;
}
you do not currently have the content part of the divs in your content
$output .= '<div class="tab-content">
<div class="tab-pane active" id="'.$id.'">'.$title.'</div>
<div class="tab-pane" id="'.$id.'">'.$title.'</div>
<div class="tab-pane" id="'.$id.'">'.$title.'</div>
</div>'
<?php
// my shortcode look like this.
[tabgroup]
[tab title="Your title #1" class="active" ]
Your Description here #1
[/tab]
[tab title="Your title #2" ]
Your Description here #2
[/tab]
[tab title="Your title #3" ]
Your Description here #3
[/tab]
[/tabgroup]
add_shortcode( 'tab', 'ease_tabs' );
function ease_tabs( $atts, $content ){
extract(shortcode_atts(array(
'title' => 'Tab',
'class' => false,
), $atts));
$x = isset($GLOBALS['tab_count'])?$GLOBALS['tab_count']:0;
$GLOBALS['tab_count'] = isset($GLOBALS['tab_count'])?$GLOBALS['tab_count']:0;
$GLOBALS['tabs'][$GLOBALS['tabs_count']][$x] = array(
'title' => $title ,
'class' => $class ,
'content' => $content ,
);
$GLOBALS['tab_count']++;
}
add_shortcode( 'tabgroup', 'ease_tabgroup' );
function ease_tabgroup( $atts, $content ){
if( isset( $GLOBALS['tabs_count'] ) )
$GLOBALS['tabs_count']++;
else
$GLOBALS['tabs_count'] = 0;
do_shortcode( $content );
if( is_array( $GLOBALS['tabs'][$GLOBALS['tabs_count']] ) ){
$tabs=array();
$panes=array();
foreach( $GLOBALS['tabs'][$GLOBALS['tabs_count']] as $tab ){
$panes_class = ( !empty($tab["class"]) && $tab['class'] == "active" ) ? 'tab-pane active' : 'tab-pane';
$__title = preg_replace('/[^a-zA-Z0-9._\-]/', '', strtolower($tab['title']) );
$tabs[] = '<li role="presentation" class="'.$tab['class'].'" >
'.$tab['title'].'
</li>';
$panes[] = sprintf( '<div class="%s" id="%s"> %s </div>',$panes_class, $__title, $tab['content'] );
}
$return = "\n".'<div role="tabpanel">
<ul role="tablist" class="nav nav-tabs">'
.implode( "\n", $tabs ).
'</ul>'."\n".
'<div class="tab-content">'
.implode( "\n", $panes ).
'</div>
</div>'."\n";
}
return do_shortcode( sprintf('<div class="tp-tabs"> %s </div>', $return));
}
wordpressshortcode