Steps:
1.Add code in functions.php file for custom navigation menu
register_nav_menus(array('primary'=>__('primary menu', 'saloon')));
2. Add a primary menu from admin panel
3. Modify the menu section of header.php
<ul class="site-menu js-clone-nav mx-auto d-none d-lg-block">
<?php wp_nav_menu(array('theme_location' => 'primary'));?>
</ul>
4. Add the following css in style.css file under css folder for menu
li {
display: inline-block;
width: 20%;
transition-duration: 0.5s;
}
li:hover {
cursor: pointer;
}
ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
display: block;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
position:relative;
display: block;
width: 100%;
}
5. Add code in functions.php to support post thumbnail.
/* Add Theme Support for Post Thumbnails */
if (function_exists('add_theme_support')) {
add_theme_support('post-thumbnails');
set_post_thumbnail_size(742, 428);
}
6. Add at least 3 posts.
7. Modify index.php to display latest 3 posts.
<?php if (have_posts()) : ?>
<?php $counter=1; ?>
<?php while(have_posts()) : the_post(); ?>
<h3 class="line-height-1 mb-3"><a href="<?php the_permalink(); ?>" style="text-decoration:none;"> <?php the_title(); ?> </a></h3>
<?php the_excerpt(); ?>
<?php $counter++; ?>
<p><a href="#"><small class="text-uppercase font-weight-bold">Read More</small></a></p>
<?php if($counter === 3) break; ?>
<?php endwhile; ?>
<?php endif; ?>
8. Reload the theme
9. Add code to register three dynamic widgets in functions.php
/* Add three wodgets */
register_sidebar(array(
'name'=>__('sidebar1','saloon'),
'id'=>'sidebar1',
'description'=>'Dynamic Sidebar',
'before_widget'=>'<section id="sid" >',
'after_widget-'=>'</section>',
'before_title'=>'<h2 id="widget-title" >',
'after_title'=>'</h2>'
));
register_sidebar(array(
'name'=>__('sidebar2','saloon'),
'id'=>'sidebar2',
'description'=>'Dynamic Sidebar',
'before_widget'=>'<section id="sid" >',
'after_widget-'=>'</section>',
'before_title'=>'<h2 id="widget-title" >',
'after_title'=>'</h2>'
));
register_sidebar(array(
'name'=>__('sidebar2','saloon'),
'id'=>'sidebar3',
'description'=>'Dynamic Sidebar',
'before_widget'=>'<section id="sid" >',
'after_widget-'=>'</section>',
'before_title'=>'<h2 id="widget-title" >',
'after_title'=>'</h2>'
));
10. Apply the above widget in index.php
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar1') ) : ?>
<?php endif; ?>
11. Reload the theme
The full steps are shown in the following tutorial.
