So lets be straight to the point;
I am using a WP theme and obviously it has some widgets in it. Now I want to add 1 button to each widget.
Var instance would be the widgets so I only add buttons aslong as there are widgets. The a tag is designed to be a button.
<?php
$i = 0;
while($i <= count($instance)) {
$id = $i
}
echo "<a id='stats".$id."' data-toggle='modal' data-target='#Modal' class='btn btn-primary custom-button oceanblue-btn'>Link</a>";
?>
For each(?) button the id should +1, so Widget 1 would contain a button with ID="stats0", Widget 2 would have a button with ID="stats1" and so on.
This way I can get the element trough jQuery and show the modal with the right content, correct?
But the question itself; How can I get the id to increase by 1 when I have to set the buttons outside of the loop?
UPDATE As Trincot mentioned, it isn't really clear what the thing is that I want to accomplish.
You can check out the live version which is here.
If you scroll down to the second section, you'll see 6 circle which contains an image and text. The maker of the theme calls these things instances within the code;
function widget($args, $instance)
{
extract($args);
echo $before_widget;
?>
<div class="col-lg-3 col-sm-3 focus-box" data-scrollreveal="enter left after 0.15s over 1s">
<?php if( !empty($instance['image_uri']) ): ?>
<div class="service-icon">
<?php if( !empty($instance['link']) ): ?>
<a href="<?php echo $instance['link']; ?>"><i class="pixeden" style="background:url(<?php echo esc_url($instance['image_uri']); ?>) no-repeat center;width:100%; height:100%;"></i> <!-- FOCUS ICON--></a>
<?php else: ?>
<i class="pixeden" style="background:url(<?php echo esc_url($instance['image_uri']); ?>) no-repeat center;width:100%; height:100%;"></i> <!-- FOCUS ICON-->
<?php endif; ?>
</div>
<?php endif; ?>
<h5 class="red-border-bottom"><?php if( !empty($instance['title']) ): echo apply_filters('widget_title', $instance['title']); endif; ?></h5>
<!-- FOCUS HEADING -->
<?php
if( !empty($instance['text']) ):
echo '<p>';
echo htmlspecialchars_decode(apply_filters('widget_title', $instance['text']));
echo '</p>';
endif;
?>
<?php
for($i =0; $i <= count($instance); $i++) {
echo "<a id='stats$i' data-toggle='modal' data-target='#Modal' class='btn btn-primary custom-button oceanblue-btn'>Link</a>";
}
?>
</div>
<?php
echo $after_widget;
}
Inside this function the elements get rendered one by one, if I'm right?
So what I wanted to do is apply a button to each element. When the ID's are set I have something to refer to within my jQuery to define the content of the model. This is code which execute the rendering of the elements
<div class="row focus-section">
<?php
if ( is_active_sidebar( 'sidebar-ourfocus' ) ) :
dynamic_sidebar( 'sidebar-ourfocus' );
else:
the_widget( 'zerif_ourfocus','title=PARALLAX EFFECT&text=Create memorable pages with smooth parallax effects that everyone loves. Also, use our lightweight content slider offering you smooth and great-looking animations.&link=#&image_uri='.get_stylesheet_directory_uri()."/images/parallax.png", array('before_widget' => '', 'after_widget' => '') );
the_widget( 'zerif_ourfocus','title=WOOCOMMERCE&text=Build a front page for your WooCommerce store in a matter of minutes. The neat and clean presentation will help your sales and make your store accessible to everyone.&link=#&image_uri='.get_stylesheet_directory_uri()."/images/woo.png", array('before_widget' => '', 'after_widget' => '') );
the_widget( 'zerif_ourfocus','title=CUSTOM CONTENT BLOCKS&text=Showcase your team, products, clients, about info, testimonials, latest posts from the blog, contact form, additional calls to action. Everything translation ready.&link=#&image_uri='.get_stylesheet_directory_uri()."/images/ccc.png", array('before_widget' => '', 'after_widget' => '') );
the_widget( 'zerif_ourfocus','title=GO PRO FOR MORE FEATURES&text=Get new content blocks: pricing table, Google Maps, and more. Change the sections order, display each block exactly where you need it, customize the blocks with whatever colors you wish.&link=#&image_uri='.get_stylesheet_directory_uri()."/images/ti-logo.png", array('before_widget' => '', 'after_widget' => '') );
endif;
?>
</div>
Now you probably will need to know what 'dynamic_sidebar' is.. but untill now I haven't found that piece yet