Adding More Images to Slider
-
I was looking to add more images to the slider and couldn’t find any support on these forums, let alone anywhere else online. So I just tried my best to look through the code repeatedly and found a way.
STEP ONE:
First, edit the Theme Functions (functions.php) code:I skipped the majority of the code to just show you what I edited. I just copied the code for the slider4 image, pasted it below, and then changed all the 4’s to a 5.
//get default theme options
function zAlive_getDefaultThemeOptions() {
$options = array(
(code skipped)
//zAlive slider4 image
‘slider4_title’ => ‘Slider4 Title’, //zAlive slider4 title
‘slider4_content’ => ‘Slider4 Content’, //zAlive slider4 content
‘slider4_link’ => ”, //zAlive slider4 link
‘slider5_img’ => get_template_directory_uri() . ‘/img/features_img_5.jpg’, //zAlive slider5 image
‘slider5_title’ => ‘Slider5 Title’, //zAlive slider5 title
‘slider5_content’ => ‘Slider5 Content’, //zAlive slider5 content
‘slider5_link’ => ”, //zAlive slider5 link
‘footer_widget_enabled’ => 0, //enable footer widget(secondary sidebar) (0:disabled,1:enabled in home,2:enalbed)
‘copyright_content’ => ”, //copyright content
‘slider_pause_time’ => 3000 //how long each slide will show(in millisecond)
); //default value
return $options ;
}STEP TWO:
Add slider5_title to the following code://text input
foreach ( array(
‘slider1_title’,
‘slider2_title’,
‘slider3_title’,
‘slider4_title’,
‘slider5_title’,
‘excerpt_text’
) as $text ) {
$input[$text] = wp_kses_stripslashes($input[$text]);
}STEP THREE:
Add slider5_content to the following code://textarea (html is allowed)
foreach ( array(
‘ads_content’,
‘slider1_content’,
‘slider2_content’,
‘slider3_content’,
‘slider4_content’,
‘slider5_content’,
‘copyright_content’,
‘inline_css’,
‘inline_js_header’,
‘inline_js_footer’
) as $content ) {
$input[$content] = $input[$content] === $defaults[$content] ? $defaults[$content] : wp_kses_stripslashes($input[$content] ) ;
}STEP FOUR:
Add slider5_img to the following code://url: image address ,default address will be used if left blank
foreach ( array(
‘slider1_img’,
‘slider2_img’,
‘slider3_img’,
‘slider4_img’,
‘slider5_img’
) as $url ) {
$input[$url] = empty($input[$url]) ? $defaults[$url] : esc_url_raw($input[$url]);
}STEP FIVE:
Add slider5_link to the following code://url: slider link and social link
foreach ( array(
‘slider1_link’,
‘slider2_link’,
‘slider3_link’,
‘slider4_link’,
‘slider5_link’
) as $url ) {
$input[$url] = esc_url_raw($input[$url]);
}STEP SIX:
Go to the slider.php file to add to the code. Copy the code for slider4 and paste it below. Change the 4 to a 5. I linked directly to the image URL since you can’t add it via the Theme Options.<div class=”item”>
<?php if ( !empty( $zAlive_options[‘slider4_link’] ) ) { ?>
“><img src=”<?php echo esc_url ( $zAlive_options[‘slider4_img’] ); ?>” alt=”” />
<?php } else { ?>
<img src=”<?php echo esc_url ( $zAlive_options[‘slider4_img’] ) ; ?>” alt=”” />
<?php } ?>
</div><!–end of slider4–>
<div class=”item”>
<?php if ( !empty( $zAlive_options[‘slider5_link’] ) ) { ?>
“><img src=”https://rgreene.com/wp-content/uploads/2015/05/Sensors.png” alt=”” />
<?php } else { ?>
<img src=”https://rgreene.com/wp-content/uploads/2015/05/Sensors.png” alt=”” />
<?php } ?>
</div>STEP SEVEN:
Edit the code beneath the code you were just at. Add the comment out coding to make the line items disappear. It could be different on your site depending on what other settings you have changed yourself, but for mine, I had to take these out. They made a gap in between my header and content block.<!–<ul class=”description hidden-phone”>
<li class=”active”>
<?php echo esc_attr ( $zAlive_options[‘slider1_title’] ) ; ?>
<p><?php echo $zAlive_options[‘slider1_content’]; ?></p>-
<?php echo esc_attr ( $zAlive_options[‘slider2_title’] ) ; ?>
<p><?php echo $zAlive_options[‘slider2_content’]; ?></p> -
<?php echo esc_attr ( $zAlive_options[‘slider3_title’] ) ; ?>
<p><?php echo $zAlive_options[‘slider3_content’]; ?></p> -
<?php echo esc_attr ( $zAlive_options[‘slider4_title’] ) ; ?>
<p><?php echo $zAlive_options[‘slider4_content’]; ?></p> -
<?php echo esc_attr ( $zAlive_options[”] ) ; ?>
<p><?php echo $zAlive_options[”]; ?></p>
–>
And that’s how I fixed my site. You can view it at here if you’d like to see the final result. Let me know if you have any questions.
-
<?php echo esc_attr ( $zAlive_options[‘slider2_title’] ) ; ?>
- The topic ‘Adding More Images to Slider’ is closed to new replies.