How to create sliders banners custom code in wordpress ?
1) function.php
/*
* Add custom menu (Sliders) to admin panel
*/
function slider_custom_post_type(){
register_post_type('sliders',array(
'labels'=>array(
'name'=>__('Sliders'),
'singular_name'=>__('sliders')
),
'public'=>true,
'has-archive',true,
'rewrite'=>array('slug'=>'sliders'),
'show_in_rest'=>true,
'supports'=>array('title','editor','author','thumbnail','comments','revisions'),
'taxonomies'=>array('category')
));
}
add_action('init','slider_custom_post_type');
This will create new menu in wp-admin with given fileds
2) Install advanced custom fileds plugin and activate
3) In ACF create new field group named
'Slider fileds' with any type of fields eg
Sub title
4) before saving set location rules as post type -> equal to -> sliders
5) Now open slider menu and add new sliders with custom field added Sub title
7) open front-page.php and in below code added extra custom fields with Sub title , button_1_text, button1_link,button2_text,button2_link
<div class="banner-carousel banner-carousel-1 mb-0">
<?php
$result = new WP_Query(array(
'post_type' => 'sliders',
));
while ($result->have_posts()) {
$result->the_post();
?>
<div class="banner-carousel-item" style="background-image:url(<?php echo get_the_post_thumbnail_url(get_the_ID()) ?>)">
<div class="slider-content text-left">
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-md-12">
<!-- <h2 class="slide-title-box" data-animation-in="slideInDown">World Class Service</h2> -->
<h3 class="slide-title" data-animation-in="fadeIn"><?php echo get_the_title(); ?></h3>
<h3 class="slide-sub-title" data-animation-in="slideInLeft"><?= get_field('sub_title'); ?></h3>
<p class="slider-description lead" data-animation-in="slideInRight"><?php echo get_the_content(); ?></p>
<div data-animation-in="slideInLeft">
<?php
$button1_text = get_field('button_1_text');
$button1_link = get_field('button1_link');
if (!empty($button1_text)) { ?>
<a href="<?php echo esc_url($button1_link); ?>" class="slider btn btn-primary" aria-label="contact-with-us">
<?php echo esc_html($button1_text); ?>
</a>
<?php }
$button2_text = get_field('button2_text');
$button2_link = get_field('button2_link');
if (!empty($button2_text)) { ?>
<a href="<?php echo esc_url($button2_link); ?>" class="slider btn btn-primary border" aria-label="learn-more-about-us">
<?php echo esc_html($button2_text); ?>
</a>
<?php } ?>
</div>
<!-- <p data-animation-in="slideInRight">
<a href="contact_us.html" class="slider btn btn-primary border">Contact Now</a>
</p> -->
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>
Comments
Post a Comment