Create wordpress shortcode for jQuery UI Tabs - php

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.

Related

Wordpress Nested Shortcode. Attributes get truncated

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

How to fix the problem with the_content filter

I want to add shortcode that has information about my custom post after the_content but when i add the code it shown before the_content
Here is my code
<?php
function foobar_func() { ?>
<h3>Title : </h3>
<ul>
<li>foo : </li>
</ul>
<?php }
add_shortcode( 'project_information', 'foobar_func' );
function wpdev_before_after( $content ) {
$beforecontent = '';
if ( is_single() ) {
$aftercontent = '[project_information]';
} else {
$aftercontent = '';
}
$fullcontent = $beforecontent . $content . $aftercontent;
return $fullcontent;
}
add_filter('the_content', 'wpdev_before_after');
?>
My foobar_func should be like this and i have more custom taxonomy to list and if I use variable to show them my code will be very messy
function foobar_func() { ?>
<h3>Title : </h3>
<ul>
<li>foo : <?php
$terms = wp_get_post_terms( $post->ID, 'taxonomy', $args );
foreach( $terms as $term ) {
if ( end($terms) == $term ){
echo '' . $term->name . '';
} else {
echo '' . $term->name . ' , ';
}
}
?></li>
</ul>
<?php }
Try assigning the html to a variable and return it in your foobar_func()
function foobar_func() {
$html = "
<h3>Title : </h3>
<ul>
<li>foo :
";
$terms = wp_get_post_terms( $post->ID, 'taxonomy', $args );
foreach( $terms as $term ) {
if ( end($terms) == $term ){
$html .= '' . $term->name . '';
} else {
$html .= '' . $term->name . ' , ';
}
}
$html .= "
</li>
</ul>";
return $html;
}

upload categorie to woocommerce

hello I am new to programing. I am creating a simple RSS feed plugin for wordpress to upload some products to WooCommerce and need to upload the category to wordpress . In plugin the category is visible but they are not showing like the url link. I need the category to show like checkbox. Can anybody have any idea ?
File number 1
* Init feed with information from DB
private function load()
{
if ($this->id) {
$post = get_post( $this->id );
if (!$post) {
$this->id = null;
return;
}
$this->title = $post->post_title;
$this->id = $post->ID;
$meta = get_post_meta($post->ID);
foreach ($meta as $key=>$item) {
$newKey = substr($key, 1);
$this->properties[$newKey] = $item[0];
if ($newKey == 'post_category') {
$this->properties[$newKey] = unserialize($item[0]);
}
}
}
}
..................
$fields = array( 'post_category');
..................
// Create post
$post = array('post_category' => $this->post_category);
And the file number 2 have this
<div class="postbox">
<div class="handlediv" title="<?php esc_html_e('Click to toggle', 'rss-autopilot'); ?>"><br></div>
<h3 class="hndle ui-sortable-handle"><span><?php esc_html_e('Categories', 'rss-autopilot'); ?></span></h3>
<div class="inside">
<ul class="rssap-categories-list">
<?php wp_category_checklist( 0, 0, $feed->post_category, false, null, true ); ?>
</ul>
<div class="clear"></div>
</div>
</div>
Here is your code.
$terms = get_terms( 'product_cat', $args );
if ( $terms ) {
echo '<ul class="product-cats">';
foreach ( $terms as $term ) {
echo '<li class="category">';
echo '<h2>';
echo '<input name="product_category[]" type="checkbox" value="'. $term->term_id.'"';
echo $term->name;
echo '</a>';
echo '</h2>';
echo '</li>';
}
echo '</ul>';
}

Wordpress menu design

I require the following output for my site menus for my theme, which I generated using Weebly.
<!--Top level-->
<div class="nav-container">
<ul class='wsite-menu-default'>
<li id='active'>
<a href='/'>Home</a></li>
<li id='pg460790036268222251'>
<a href='/about.html'>About US</a>
<!--Second Level-->
<div class='wsite-menu-wrap' style='display:none'>
<ul class='wsite-menu'>
<li id='wsite-nav-887406923503161985'>
<a href='/our-community.html' >
<span class='wsite-menu-title'>Our Community</span>
</a></li>
<li id='wsite-nav-920389812461078079'>
<a href='/our-approach.html' >
<span class='wsite-menu-title'>Our Approach</span>
<span class='wsite-menu-arrow'>></span></a>
<!--Third level-->
<div class='wsite-menu-wrap' style='display:none'>
<ul class='wsite-menu'>
<li id='wsite-nav-351232458403900697'>
<a href='/research.html' >
<span class='wsite-menu-title'>Research</span></a>
</li>
<li id='wsite-nav-824453669863261400'>
<a href='/advocacy.html' >
<span class='wsite-menu-title'>Advocacy</span></a>
</li>
<li id='wsite-nav-802033955677651213'>
<a href='/publications.html' >
<span class='wsite-menu-title'>Publications</span></a>
</li>
</ul>
</div>
<!--Repeat above block as required -->
........................
<!--End Third-->
</li>
<li id='wsite-nav-307985062116431544'>
<a href='/our-constitution.html' >
<span class='wsite-menu-title'>Our Constitution</span></a>
</li>
<li id='wsite-nav-347537193311521165'>
<a href='/job-opportunities.html' >
<span class='wsite-menu-title'>Job Opportunities</span></a>
</li>
</ul>
</div>
<!--Repeat above block as required -->
..............
<!--End Second-->
</li>
<!--Repeat above block as required -->
..............
<!--End Top-->
</ul></div>
Now I need to port this over to a Wordpress system. I am familiar with menu basics, but need to know how to configure a Walker or custom function for this task for my theme. All jQuery, CSS scripts are in place, all I need to do is nest the following output as it is with the respective ids, classes and specified inline styling. I have created the menu hierarchy at Wordpress admin like I did in Weebly. I have been searching for examples but cant seem to find one that fits my requirement. Below is my Walker function.
class my_menu_walker extends Walker_Nav_Menu
{
function start_lvl(&$output, $depth)
{
$indent = str_repeat("\t", $depth);
if($depth === 0)
{
$output .= "\n$indent<ul class='wsite-menu-default'>\n";
}
else
{
$output .= "\n$indent<ul class='wsite-menu-default' style='display:none'>\n";
}
}
function start_el(&$output, $item, $depth, $args)
{
global $wp_query;
$indent = ($depth)? str_repeat("\t", $depth): '';
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
//if second level menus
/*$unit_output = $args->before;*/
$unit_output = "<a".$attributes.">";
$unit_output .= /*$args->link_before.*/ "<span>".apply_filters( 'the_title', $item->title, $item->ID )."</span>";
/*$unit_output .= $args->link_after;*/
$unit_output .= "</a>";
/*$unit_output .= $args->after;*/
//for top menu page navigation
if($item->current)
{
$output .= $indent."<li id='active'>";
}
else
{
$output .= $indent."<li id='pg".$item->ID."'>";
}
$output .= apply_filters( 'walker_nav_menu_start_el', $unit_output, $item, $depth, $args );
}
}
At the top of functions.php
add_theme_support( 'menus' );
And in header.php
<?php wp_nav_menu(array(
'theme_location' => 'header-menu',
'container' => 'div',
'container_class' => 'wsite-menu-default',
'menu_class' => 'nav-container',
'echo' => true,
'walker'=> new my_menu_walker()
)); ?>
My $depth is not receiving the correct data, please advise
function start_lvl(&$output, $depth)
{
$indent = str_repeat("\t", $depth);
if($depth > 1)
{
$output .= "\n$indent<ul class='wsite-menu'>\n";
}
else
{
$output .= "\n$indent<ul class='wsite-menu-default'>\n";
}
}

Custom shortcode for creating tabs

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

Categories