'Tabs' on a custom page ?

  • Carole
    Carole
    August 11, 2015 at 9:47 am

    Hello 🙂 Hope someone can help.

    I have used the ‘Tabs’ element on my home page to showcase listings.
    I would like to incorporate a ‘Tabs’ element on a custom search page which will show more results?

    I think that ‘Tabs’ is a Bootstrap element, but I have no idea how to use these on pages other than the home page ?

    My website is rightswap.co.uk

    Thanks,

    Carole


  • Josh
    August 11, 2015 at 10:26 am

    Hello Carole,
    Some customization will be required to achieve this.You can start here >>https://getbootstrap.com/javascript/#tabs

  • Carole
    Carole
    August 11, 2015 at 10:47 am

    HI Josh,
    Thanks for your prompt reply.

    It just seems daft to me that I should start all over again, when the tabs have already been defined and coded in the theme. All i want to do is take the tabs that are already defined in my home page and remove the restriction on the query relating to the number of listings returned.

    Surely there must be some way of hooking into whats already been done ?


  • Josh
    August 11, 2015 at 10:57 am

    The Themes tabs can only be used in the homepage currently.You would have to do some customization to add them to a page

  • Carole
    Carole
    August 11, 2015 at 12:09 pm

    Thanks Josh.

    I can see that the tab values are set in the Page Setup => Home Page => Display Setup => Content Elements => Tabs and these must be stored and used when the homepage is rendered.

    Im sorry im not familiar at all with wordpress….i personally think its cumbersome and not at all intuitive….just wondered if anyone could give me a heads up on where to look for the code which renders the homepage ?

    Thanks,

    Carole

  • Carole
    Carole
    August 11, 2015 at 12:54 pm

    Ok. I’ve now found the code which renders the page…..in framework/class/class_objects.php….the question is ‘How do I replicate this functionality so that the tabs are displayed on my custom page ?’

    case “tabs”: {

    // LOAD IN UDER SETTINGS
    if($fullwidth && $core_admin_values[‘widgetobject’][‘tabs’][$i][‘fullw’] != “yes”){ continue; }
    if(!$fullwidth && $core_admin_values[‘widgetobject’][‘tabs’][$i][‘fullw’] == “yes”){ continue; }
    if($core_admin_values[‘widgetobject’][‘tabs’][$i][‘btnview’] == “yes”){ $btnview = “yes”; }else{ $btnview = “no”; }
    if($core_admin_values[‘widgetobject’][‘tabs’][$i][‘perrow’] == “3”){ $perrow = ‘col-md-4’; }else{ $perrow = ‘col-md-3′; }

    echo “<div class=’wlt_object_tabs’>”;

    // WRAPPER
    echo ‘<ul class=”wlt_tab_object nav nav-tabs hidden-xs”>
    <li class=”active”>‘.stripslashes($core_admin_values[‘widgetobject’][‘tabs’][$i][‘title1′]).’‘;
    if(strlen($core_admin_values[‘widgetobject’][‘tabs’][$i][‘title2’]) > 0){
    echo ‘

  • ‘.stripslashes($core_admin_values[‘widgetobject’][‘tabs’][$i][‘title2′]).’
  • ‘;
    }
    if(strlen($core_admin_values[‘widgetobject’][‘tabs’][$i][‘title3’]) > 0){
    echo ‘

  • ‘.stripslashes($core_admin_values[‘widgetobject’][‘tabs’][$i][‘title3′]).’
  • ‘;
    }
    if(strlen($core_admin_values[‘widgetobject’][‘tabs’][$i][‘title4’]) > 0){
    echo ‘

  • ‘.stripslashes($core_admin_values[‘widgetobject’][‘tabs’][$i][‘title4′]).’
  • ‘;
    }

    // ADD ON BUTTON
    if($btnview == “yes”){ echo ‘<li class=”pull-right hidden-xs”>‘.$CORE->_e(array(‘button’,’35’)).’‘; }

    echo ‘

    <div class=”tab-content row”>’;
    $a=1; $extra = “”;
    while($a < 5){
    // CHECK FOR QUERY STRING
    if($a ==1){ $atab = ” active”; }else{ $atab = “”; }
    echo ‘<div class=”tab-pane’.$atab.'” id=”t’.$a.'”>’;
    // CHECK FOR CUSTOM TEXT
    if(strlen(stripslashes($core_admin_values[‘widgetobject’][‘tabs’][$i][‘content’.$a])) > 1){
    echo “<div class=’padding’>”.do_shortcode(stripslashes($core_admin_values[‘widgetobject’][‘tabs’][$i][‘content’.$a])).”</div>”;
    }
    if( strlen($core_admin_values[‘widgetobject’][‘tabs’][$i][‘query’.$a]) > 2 ){

    $qr = hook_custom_queries(“post_type=”.THEME_TAXONOMY.”_type&”.$core_admin_values[‘widgetobject’][‘tabs’][$i][‘query’.$a]);
    $my_query = new WP_Query($qr); $g=0;

    if( $my_query->have_posts() ) {

    // GET LIST STYLE
    if($core_admin_values[‘widgetobject’][‘tabs’][$i][‘style’.$a] == “list”){
    $lsst = “list_style”;
    }else{
    $lsst = “grid_style”;
    }

    // WRAPPER
    echo ‘<div class=”wlt_search_results ‘.$lsst.'”>’;

    // CHECK WE HAVE RESULTS
    foreach($my_query->posts as $post){

    // CONTENT LISTING
    $GLOBALS[‘item_class_size’] = $perrow;
    get_template_part( ‘content’, hook_content_templatename($post->post_type) );

    }// end foreach

    // END WRAPPER
    echo ‘</div>’;
    }
    // RESET QUERY
    wp_reset_postdata();
    }

    // END WRAPPER
    echo ‘</div>’;

    $a++;
    }

    echo ‘</div><script>jQuery(document).ready(function(){ jQuery(\’.wlt_tab_object a\’).click(function (e) { e.preventDefault(); jQuery(this).tab(\’show\’); equalheight(\’.tab-content .grid_style .itemdata .thumbnail\’); }) })

    jQuery(window).load(function() {
    equalheight(\’.tab-content .grid_style .itemdata .thumbnail\’);
    });

    jQuery(window).resize(function(){
    equalheight(\’.tab-content .grid_style .itemdata .thumbnail\’);
    });

    </script>’;

    echo “</div>”; // end wrapper

    } break;

  • Aaron
    Aaron
    August 11, 2015 at 1:09 pm

    Whoa you broke the forum.

    Easiest way to achieve this sort of functionality is to create a template with your tabs and relevant queries and assign a page to this template. If you are not sure how wordpress works in this regard you may need to get help to achieve this – its not that difficult.

  • Carole
    Carole
    August 12, 2015 at 9:49 am

    Hi Aaron,

    Sorry ! I hadn’t realised that posting the code would cause such havoc !

    I’ve taken the code from class_object.php which relates to the output of the ‘tabs’ element, and this should work. The only thing is that I am calling this code from outside of the object system, and currently I get no output. Any clues on how I can make this work ?

    Also, there is a variable called $c, which was passed to the original function which I have re-written to just handle the ‘tabs’ element. Any idea what this is ?

    Here’s my modified code…..and hopefully this will not break the forum ????

    <?php // Processing extracted from object_class.php

    global $post, $CORE, $wpdb; $STRING = “”; $nrefid=0;

    $core_admin_values = $GLOBALS[‘CORE_THEME’];

    // FORMAT IS ID-TEXT, WTF is $c ?
    $widget_blocks = explode(“,”,$c);

    // LOOP THROUGH AND FIND THE TABS
    foreach($widget_blocks as $key=>$widget){

    // BREAK UP THE STRING
    $ff = explode(“_”,$widget);
    if(isset($ff[1])){
    $gg = explode(“-“, $ff[1]);
    $nkey = $ff[0];
    $nrefid = $gg[0];
    }
    // MAKE SURE ITS A VALID TABS OBJECT
    if((strlen($nkey) > 1)&&($nkey == “tabs”)) {

    $GLOBALS[‘object_name’] = $nkey;
    $GLOBALS[‘object_data’] = $core_admin_values[‘widgetobject’][$nkey][$nrefid];
    $GLOBALS[‘object_id’] = $nrefid;

    // LOAD IN UDER SETTINGS
    if($fullwidth && $core_admin_values[‘widgetobject’][$nkey][$nrefid][‘fullw’] != “yes”){ continue; }
    if(!$fullwidth && $core_admin_values[‘widgetobject’][$nkey][$nrefid][‘fullw’] == “yes”){ continue; }
    if($core_admin_values[‘widgetobject’][$nkey][$nrefid][‘btnview’] == “yes”){ $btnview = “yes”; }else{ $btnview = “no”; }
    if($core_admin_values[‘widgetobject’][$nkey][$nrefid][‘perrow’] == “3”){ $perrow = ‘col-md-4’; }else{ $perrow = ‘col-md-3′; }

    echo “<div class=’wlt_object_tabs’>”;

    // WRAPPER
    echo ‘<ul class=”wlt_tab_object nav nav-tabs hidden-xs”>
    <li class=”active”>‘.stripslashes($core_admin_values[‘widgetobject’][$nkey][$nrefid][‘title1′]).’‘;
    if(strlen($core_admin_values[‘widgetobject’][$nkey][$nrefid][‘title2’]) > 0){
    echo ‘

  • ‘.stripslashes($core_admin_values[‘widgetobject’][$nkey][$nrefid][‘title2′]).’
  • ‘;
    }
    if(strlen($core_admin_values[‘widgetobject’][$nkey][$nrefid][‘title3’]) > 0){
    echo ‘

  • ‘.stripslashes($core_admin_values[‘widgetobject’][$nkey][$nrefid][‘title3′]).’
  • ‘;
    }
    if(strlen($core_admin_values[‘widgetobject’][$nkey][$nrefid][‘title4’]) > 0){
    echo ‘

  • ‘.stripslashes($core_admin_values[‘widgetobject’][$nkey][$nrefid][‘title4′]).’
  • ‘;
    }

    // ADD ON BUTTON
    if($btnview == “yes”){ echo ‘<li class=”pull-right hidden-xs”>‘.$CORE->_e(array(‘button’,’35’)).’‘; }

    echo ‘

    <div class=”tab-content row”>’;
    $a=1; $extra = “”;
    while($a < 5){
    // CHECK FOR QUERY STRING
    if($a ==1){ $atab = ” active”; }else{ $atab = “”; }
    echo ‘<div class=”tab-pane’.$atab.'” id=”t’.$a.'”>’;
    // CHECK FOR CUSTOM TEXT
    if(strlen(stripslashes($core_admin_values[‘widgetobject’][$nkey][$nrefid][‘content’.$a])) > 1){
    echo “<div class=’padding’>”.do_shortcode(stripslashes($core_admin_values[‘widgetobject’][$nkey][$nrefid][‘content’.$a])).”</div>”;
    }
    if( strlen($core_admin_values[‘widgetobject’][$nkey][$nrefid][‘query’.$a]) > 2 ){

    $qr = hook_custom_queries(“post_type=”.THEME_TAXONOMY.”_type&”.$core_admin_values[‘widgetobject’][$nkey][$nrefid][‘query’.$a]);
    $my_query = new WP_Query($qr); $g=0;

    if( $my_query->have_posts() ) {

    // GET LIST STYLE
    if($core_admin_values[‘widgetobject’][$nkey][$nrefid][‘style’.$a] == “list”){
    $lsst = “list_style”;
    }else{
    $lsst = “grid_style”;
    }

    // WRAPPER
    echo ‘<div class=”wlt_search_results ‘.$lsst.'”>’;

    // CHECK WE HAVE RESULTS
    foreach($my_query->posts as $post){

    // CONTENT LISTING
    $GLOBALS[‘item_class_size’] = $perrow;
    get_template_part( ‘content’, hook_content_templatename($post->post_type) );

    }// end foreach

    // END WRAPPER
    echo ‘</div>’;
    }
    // RESET QUERY
    wp_reset_postdata();
    }

    // END WRAPPER
    echo ‘</div>’;

    $a++;
    }

    echo ‘</div><script>jQuery(document).ready(function(){ jQuery(\’.wlt_tab_object a\’).click(function (e) { e.preventDefault(); jQuery(this).tab(\’show\’); equalheight(\’.tab-content .grid_style .itemdata .thumbnail\’); }) })

    jQuery(window).load(function() {
    equalheight(\’.tab-content .grid_style .itemdata .thumbnail\’);
    });

    jQuery(window).resize(function(){
    equalheight(\’.tab-content .grid_style .itemdata .thumbnail\’);
    });

    </script>’;

    echo “</div>”; // end wrapper
    } end; // foreach ended when tabs found
    }
    ?>

  • Carole
    Carole
    August 12, 2015 at 1:13 pm

    Just a quick update.

    I’ve managed to get this working now by adding some extra functions in class_objects.php which just extract the individual tabs element from the homepage.

    This method should work for any of the homepage elements. Just wondering now how i can preserve this functionality ?

    I notice that other people are also trying to replicate objects which are defined for the home page in other places. For example, lots of people would like to show categories on a different page. Perhaps Mark Fail could consider re-writing class_objects.php so that the individual elements can be used easily elsewhere. It would make the themes much more user friendly, and would bring greater responsiveness to custom pages.

  • Viewing 9 posts - 1 through 9 (of 9 total)

    Copyright © 2010-2020 PremiumPress Limited.

    secure payments