To show categories in the header part of your website, create a new division in the header where you want them to display.
Before you start, you’d better create a child theme to make customization instead of directly modifying a theme. Take the default “twentyseventeen” theme for example, add below code to file templates-parts/header/site-branding.php of the theme:
<div id="category-list">
<ul>
<li><a title="Home Page" href="index.php">home</a></li>
<?php wp_list_categories(array('title_li' => '', 'echo' => 1)); ?>
</ul>
</div><!-- .category-list -->
wp_list_categories is used to display the categories list. You can use many parameters to control its result, below are some of them:
- title_li, text for the list title
<li>element -
echo, display markup marks.
- separator, separator between links.
- exclude, array of strings to exclude.
Add below code in style.css to style the categories:
/* category list in header */
#category-list {
margin: 0;
display: inline-block;
float: right;
vertical-align: middle;
font-size: 14px;
font-style: normal;
text-transform: capitalize;
}
#category-list li {
display: inline;
list-style-type: none;
padding: 0px 5px;
}
#category-list a:link, #category-list a:visited {
color: #eee;
}
#category-list a:hover {
opacity: 0.7;
}
The display and list-style-type make the list a horizontal layout.
Here is the header with categories:
