Convert HTML Template to WordPress Theme – Part 2

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.