WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] add an icon to homepage service tab (5 posts)

  1. Digex
    Member
    Posted 11 months ago #

    I have a theme that i am customizing. I created 4 pages. On the homepage, below the featured slider, is a tabbed content area. Each tab is populated by one of my four pages.
    I want to add icons to the top of the tabs. I tried to add a custom class. This worked, but it applies the same icon. I believe, I need to create an array to establish a new class for each tab. How is this done? here is the code that generates the tab array.

    <?php if (have_posts()) : while(have_posts()) : the_post(); ?>
    						<?php
    							$hash = 'service_' . strtolower( preg_replace( '/ /','_', get_the_title() ) );
    							$et_nova_settings = maybe_unserialize( get_post_meta( get_the_ID(),'et_nova_settings',true ) );
    
    							$tab_title = isset( $et_nova_settings['et_service_tabtitle'] ) && !empty($et_nova_settings['et_service_tabtitle']) ? $et_nova_settings['et_service_tabtitle'] : get_the_title();
    							$tab_subtitle = isset( $et_nova_settings['et_service_tab_subtitle'] ) && !empty($et_nova_settings['et_service_tab_subtitle']) ? $et_nova_settings['et_service_tab_subtitle'] : '';
    						?>
    
    						<li class="tw_iconset"><a href="#<?php #echo $hash; ?>"><strong><?php echo esc_html($tab_title); ?></strong><?php if ($tab_subtitle != '') { ?><span><?php echo esc_html($tab_subtitle); ?></span><?php } ?></a></li>

    http://ghana.txtunited.com/public_html/
    Notice the cloud icon, this is one of the 4 icons, I attached it by adding a class the <li> tag called "tw_iconset" and styled it in style.css.

    How do I add the icons to the top of the tabs properly?

  2. esmi
    Forum Moderator
    Posted 11 months ago #

    Add a counter variable to that mini-loop and increment it each time the loop runs. Then add the current value of the counter onto the class name so you end up with tw_iconset1, tw_iconset2 etc.

  3. Digex
    Member
    Posted 11 months ago #

    Thank-you esmi,
    Thanks for the pseudocode. I still need some help understanding the logic. Here goes...
    Applying a counter variable to the tab loop. Increment for each tab (4 loops) > Add current value to class name.

    What element or selector is the class applied to. How is it applied?

    This is my attempt at writing incremental class variable

    class TabClass {
        public static $counter = 0;
    
        function __construct() {
            self::$counter++;
        }
    }
    
    new TabClass();
    new TabClass();
    new TabClass();
    new TabClass();
    
    echo TabClass::$counter;
    ?>

    Does this need to be included into the existing loop. Do I need to be concerned with WordPress syntax? I guess I
    'll find out if it breaks! This is my first site. Learning PHP, please bear with me. I'm jumping right in!

  4. esmi
    Forum Moderator
    Posted 11 months ago #

    Gosh - I wouldn't have bothered setting up a class for this! I'd just use something like:

    <?php if (have_posts()) : while(have_posts()) :
    $c = 0; the_post(); $c++;?>
    <?php
    $hash = 'service_' . strtolower( preg_replace( '/ /','_', get_the_title() ) );
    $et_nova_settings = maybe_unserialize( get_post_meta( get_the_ID(),'et_nova_settings',true ) );
    $tab_title = isset( $et_nova_settings['et_service_tabtitle'] ) && !empty($et_nova_settings['et_service_tabtitle']) ? $et_nova_settings['et_service_tabtitle'] : get_the_title();
    $tab_subtitle = isset( $et_nova_settings['et_service_tab_subtitle'] ) && !empty($et_nova_settings['et_service_tab_subtitle']) ? $et_nova_settings['et_service_tab_subtitle'] : '';
    ?>
    <li class="tw_iconset<?.php echo $c;?>"><a href="#<?php #echo $hash; ?>"><strong><?php echo esc_html($tab_title); ?></strong><?php if ($tab_subtitle != '') { ?><span><?php echo esc_html($tab_subtitle); ?></span><?php } ?></a></li>
  5. Digex
    Member
    Posted 11 months ago #

    I ended up with this.

    <?php $myCounter = 0; $myClass = "tabClass"; ?>
    <?php if (have_posts()) : while(have_posts()) : the_post(); ?>
    <?php
    	);$et_nova_settings = maybe_unserialize( get_post_meta(get_the_ID(),'et_nova_settings',true ) );
    
    $tab_title = isset( $et_nova_settings['et_service_tabtitle'] ) && !empty($et_nova_settings['et_service_tabtitle']) ? $et_nova_settings['et_service_tabtitle'] : get_the_title();
    $tab_subtitle = isset( $et_nova_settings['et_service_tab_subtitle'] ) && !empty($et_nova_settings['et_service_tab_subtitle']) ? $et_nova_settings['et_service_tab_subtitle'] : '';
    $myCounter++;
    $myClass = "tabClass" . $myCounter;
    ?>
    
    <li><a href="#<?php #echo $hash; ?>"  class="<?php echo $myClass; ?>"><strong><?php echo esc_html($tab_title); ?></strong><?php if ($tab_subtitle != '') { ?><span><?php echo esc_html($tab_subtitle); ?></span><?php } ?></a></li>

    Working like a charm!

Reply

You must log in to post.

About this Topic