Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

adding custom classes WordPress

  • SOLVED

I am currently using the Simple Press Elegant Theme - http://www.elegantthemes.com/demo/?theme=SimplePress

I need to add some distinct class to some of the slider Elements.

There is an overlay on the banner that has a title. There title is .banner h2. I would like to add a class to that and have it different for each one. You can see there are 4 different banners with thumbnails and overlay boxes.

1. I need to add a custom class that is different for each .banner h2

2. I need to add a custom class to each .item which is the small thumbnail item.

The class can just numbered 1 , 2, 3 and 4.

Thank you,
Carlos

Here is the sample code:

<?php
$arr = array();
$responsive = 'on' != get_option('simplepress_responsive_layout') ? false : true;
$featured_auto_class = '';
if ( 'on' == get_option('simplepress_slider_auto') ) $featured_auto_class .= ' et_slider_auto et_slider_speed_' . get_option('simplepress_slider_autospeed');
$i=1;

$width = 954;
$height = 375;
$width_small = 83;
$height_small = 83;

$featured_cat = get_option('simplepress_feat_cat');
$featured_num = (int) get_option('simplepress_featured_num');

if (get_option('simplepress_use_pages') == 'false') query_posts("posts_per_page=$featured_num&cat=".get_catId($featured_cat));
else {
global $pages_number;

if (get_option('simplepress_feat_pages') <> '') $featured_num = count(get_option('simplepress_feat_pages'));
else $featured_num = $pages_number;

$et_featured_pages_args = array(
'post_type' => 'page',
'orderby' => 'menu_order',
'order' => 'ASC',
'posts_per_page' => (int) $featured_num,
);

if ( is_array( et_get_option( 'simplepress_feat_pages', '', 'page' ) ) )
$et_featured_pages_args['post__in'] = (array) array_map( 'intval', et_get_option( 'simplepress_feat_pages', '', 'page' ) );

query_posts( $et_featured_pages_args );
};

while (have_posts()) : the_post();
global $post;
$arr[$i]["title"] = truncate_title(35,false);
$arr[$i]["fulltitle"] = truncate_title(35,false);

$arr[$i]["excerpt"] = truncate_post(400,false);
$arr[$i]["excerpt_small"] = truncate_post(80,false);

$arr[$i]["permalink"] = get_permalink();

$arr[$i]["thumbnail"] = get_thumbnail($width,$height,'',$arr[$i]["fulltitle"],$arr[$i]["fulltitle"]);
$arr[$i]["thumb"] = $arr[$i]["thumbnail"]["thumb"];

$arr[$i]["thumbnail_small"] = get_thumbnail($width_small,$height_small,'',$arr[$i]["fulltitle"],$arr[$i]["fulltitle"]);
$arr[$i]["thumb_small"] = $arr[$i]["thumbnail_small"]["thumb"];

$arr[$i]["use_timthumb"] = $arr[$i]["thumbnail"]["use_timthumb"];

$arr[$i]['post_id'] = (int) get_the_ID();

$i++;
endwhile; wp_reset_query(); ?>

<div id="featured" class="<?php if ( $responsive ) echo esc_attr( 'flexslider' . $featured_auto_class ); else echo 'et_default_slider'; ?>">
<?php if ( $responsive ) { ?>
<ul class="slides">
<?php } else { ?>
<div id="slides">
<?php } ?>
<?php for ($i = 1; $i <= $featured_num; $i++) { ?>
<?php if ( $responsive ) { ?>
<li class="slide">
<?php } else { ?>
<div class="slide <?php if($i == 1) echo('active'); ?>">
<?php } ?>
<div class="slider_image">
<a href="<?php echo esc_url( $arr[$i]["permalink"] ); ?>">
<?php
print_thumbnail( array(
'thumbnail' => $arr[$i]["thumbnail"]["thumb"],
'use_timthumb' => $arr[$i]["thumbnail"]["use_timthumb"],
'alttext' => $arr[$i]["fulltitle"],
'width' => (int) $width,
'height' => (int) $height,
'et_post_id' => $arr[$i]['post_id'],
) );
?>
<span class="slider_overlay"></span>
</a>
</div>
<div class="banner">
<h2><?php echo esc_html($arr[$i]["title"]); ?></h2>
<?php echo($arr[$i]["excerpt"]); ?>
<br class="clear" />
<span><a href="<?php echo esc_url($arr[$i]["permalink"]); ?>"><?php esc_html_e('read more','SimplePress'); ?></a></span>
</div>
<?php if ( $responsive ) { ?>
</li> <!-- end .slide -->
<?php } else { ?>
</div> <!-- end .slide -->
<?php } ?>
<?php }; ?>
<?php if ( $responsive ) { ?>
</ul> <!-- end .slides -->
<?php } else { ?>
</div> <!-- end #slides -->
<?php } ?>
<span class="slider_shadow"></span>
<div id="switcher">
<?php for ($i = 1; $i <= $featured_num; $i++) { ?>
<div class="item">
<div class="wrap <?php if($i == 1) echo('active'); ?>">
<span class="image">
<?php
print_thumbnail( array(
'thumbnail' => $arr[$i]["thumb_small"],
'use_timthumb' => $arr[$i]["thumbnail"]["use_timthumb"],
'alttext' => $arr[$i]["fulltitle"],
'width' => (int) $width_small,
'height' => (int) $height_small,
'et_post_id' => $arr[$i]['post_id'],
) );
?>
<span class="slider_small_overlay"></span>
</span>
<div class="hover">
<span><?php echo esc_html($arr[$i]["fulltitle"]); ?></span>
<br class="clear" />
<?php echo($arr[$i]["excerpt_small"]); ?>
</div>
</div>
</div>
<?php }; ?>
</div><!-- #switcher -->
</div><!-- end #featured -->

2013-10-01 by Carlos Lopez Jr

Answers (3)

2013-10-01

zebra webdesigns answers:

Hello You can use the variable $i to generate different class

class="banner_<?php echo $i; ?>"

for example

<div class="banner">

<h2 class="banner_<?php echo $i; ?>"><?php echo esc_html($arr[$i]["title"]); ?></h2>

2013-10-01

Dbranes answers:

If I understand you correctly, you can replace

<div class="banner">

with

<div class="banner banner-<?php echo $i;?>">


to give you for example:

<div class="banner banner-1">


Similarly replace:

<div class="item">

with

<div class="item item-<?php echo $i;?>">


to give you for example

<div class="item item-1">

2013-10-01

Arnav Joy answers:

Try this
<code><?php

$arr = array();

$responsive = 'on' != get_option('simplepress_responsive_layout') ? false : true;

$featured_auto_class = '';

if ( 'on' == get_option('simplepress_slider_auto') ) $featured_auto_class .= ' et_slider_auto et_slider_speed_' . get_option('simplepress_slider_autospeed');

$i=1;



$width = 954;

$height = 375;

$width_small = 83;

$height_small = 83;



$featured_cat = get_option('simplepress_feat_cat');

$featured_num = (int) get_option('simplepress_featured_num');



if (get_option('simplepress_use_pages') == 'false') query_posts("posts_per_page=$featured_num&cat=".get_catId($featured_cat));

else {

global $pages_number;



if (get_option('simplepress_feat_pages') <> '') $featured_num = count(get_option('simplepress_feat_pages'));

else $featured_num = $pages_number;



$et_featured_pages_args = array(

'post_type' => 'page',

'orderby' => 'menu_order',

'order' => 'ASC',

'posts_per_page' => (int) $featured_num,

);



if ( is_array( et_get_option( 'simplepress_feat_pages', '', 'page' ) ) )

$et_featured_pages_args['post__in'] = (array) array_map( 'intval', et_get_option( 'simplepress_feat_pages', '', 'page' ) );



query_posts( $et_featured_pages_args );

};



while (have_posts()) : the_post();

global $post;

$arr[$i]["title"] = truncate_title(35,false);

$arr[$i]["fulltitle"] = truncate_title(35,false);



$arr[$i]["excerpt"] = truncate_post(400,false);

$arr[$i]["excerpt_small"] = truncate_post(80,false);



$arr[$i]["permalink"] = get_permalink();



$arr[$i]["thumbnail"] = get_thumbnail($width,$height,'',$arr[$i]["fulltitle"],$arr[$i]["fulltitle"]);

$arr[$i]["thumb"] = $arr[$i]["thumbnail"]["thumb"];



$arr[$i]["thumbnail_small"] = get_thumbnail($width_small,$height_small,'',$arr[$i]["fulltitle"],$arr[$i]["fulltitle"]);

$arr[$i]["thumb_small"] = $arr[$i]["thumbnail_small"]["thumb"];



$arr[$i]["use_timthumb"] = $arr[$i]["thumbnail"]["use_timthumb"];



$arr[$i]['post_id'] = (int) get_the_ID();



$i++;

endwhile; wp_reset_query(); ?>



<div id="featured" class="<?php if ( $responsive ) echo esc_attr( 'flexslider' . $featured_auto_class ); else echo 'et_default_slider'; ?>">

<?php if ( $responsive ) { ?>

<ul class="slides">

<?php } else { ?>

<div id="slides">

<?php } ?>

<?php for ($i = 1; $i <= $featured_num; $i++) { ?>

<?php if ( $responsive ) { ?>

<li class="slide">

<?php } else { ?>

<div class="slide <?php if($i == 1) echo('active'); ?>">

<?php } ?>

<div class="slider_image">

<a href="<?php echo esc_url( $arr[$i]["permalink"] ); ?>">

<?php

print_thumbnail( array(

'thumbnail' => $arr[$i]["thumbnail"]["thumb"],

'use_timthumb' => $arr[$i]["thumbnail"]["use_timthumb"],

'alttext' => $arr[$i]["fulltitle"],

'width' => (int) $width,

'height' => (int) $height,

'et_post_id' => $arr[$i]['post_id'],

) );

?>

<span class="slider_overlay"></span>

</a>

</div>

<div class="banner-<?php echo $i; ?>">

<h2 class="banner_h2_<?php echo $i;?>><?php echo esc_html($arr[$i]["title"]); ?></h2>

<?php echo($arr[$i]["excerpt"]); ?>

<br class="clear" />

<span><a href="<?php echo esc_url($arr[$i]["permalink"]); ?>"><?php esc_html_e('read more','SimplePress'); ?></a></span>

</div>

<?php if ( $responsive ) { ?>

</li> <!-- end .slide -->

<?php } else { ?>

</div> <!-- end .slide -->

<?php } ?>

<?php }; ?>

<?php if ( $responsive ) { ?>

</ul> <!-- end .slides -->

<?php } else { ?>

</div> <!-- end #slides -->

<?php } ?>

<span class="slider_shadow"></span>

<div id="switcher">

<?php for ($i = 1; $i <= $featured_num; $i++) { ?>

<div class="item">

<div class="wrap <?php if($i == 1) echo('active'); ?>">

<span class="image">

<?php

print_thumbnail( array(

'thumbnail' => $arr[$i]["thumb_small"],

'use_timthumb' => $arr[$i]["thumbnail"]["use_timthumb"]