add an icon to homepage service tab

  • Resolved Digex

    (@digex)


    11 years, 4 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>

    https://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?

Viewing 4 replies - 1 through 4 (of 4 total)

  • 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.

    Thread Starter Digex

    (@digex)

    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!

    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>
    Thread Starter Digex

    (@digex)

    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!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘add an icon to homepage service tab’ is closed to new replies.