Customizing the Twenty Fifteen Theme: Creating a Vertical Menu

Published On - November 16, 2025

Sophia Willson blog

The Twenty Fifteen theme by WordPress is known for its minimalist design and strong focus on readability. Its left-aligned vertical sidebar provides a perfect opportunity for a vertical menu layout. However, for users looking to move beyond its default configuration, creating a truly customized vertical menu can elevate both visual aesthetics and user experience.

TL;DR

Modifying the Twenty Fifteen theme to create a customized vertical menu is a great way to enhance navigation and aesthetics. By using child themes, editing CSS, and potentially adding a custom widget area, you can tailor the menu to meet your site’s unique needs. This guide walks you through the required steps, offering a clean and responsive solution. Whether you’re a novice or experienced with WordPress, this customization will add a professional touch to your site.

Why Customize the Vertical Menu in Twenty Fifteen?

The built-in vertical menu in Twenty Fifteen is functional but limited in terms of layout design and interactivity. A customized vertical menu lets you:

  • Improve user navigation by highlighting key areas.
  • Match brand identity with fonts, colors, and hover effects.
  • Utilize screen space efficiently, especially on wider displays.

Fortunately, WordPress themes are designed to be customized. Let’s dive into the step-by-step process of building a refined vertical menu using Twenty Fifteen.

Step 1: Create a Child Theme

Important: Never customize the main theme files directly. Instead, create a child theme to ensure your changes are preserved during updates.

To create a child theme:

  1. Navigate to wp-content/themes in your WordPress directory.
  2. Create a new folder called twentyfifteen-child.
  3. Create a style.css file. Add the following header:
/*
 Theme Name:   Twenty Fifteen Child
 Template:     twentyfifteen
*/
  1. Create a functions.php file and enqueue the parent and child styles:
<?php
function twentyfifteen_child_enqueue_styles() {
    wp_enqueue_style('twentyfifteen-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('twentyfifteen-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('twentyfifteen-style')
    );
}
add_action('wp_enqueue_scripts', 'twentyfifteen_child_enqueue_styles');
?>

Activate your child theme from the WordPress dashboard under Appearance > Themes.

Step 2: Register a Custom Menu Location

To display a custom vertical menu, first register a new menu location in your child theme’s functions.php file:

function custom_vertical_menu() {
  register_nav_menu('vertical-menu', __('Vertical Menu'));
}
add_action('init', 'custom_vertical_menu');

This adds a new menu option under Appearance > Menus called Vertical Menu.

Step 3: Display the Custom Menu in the Sidebar

Edit your child theme’s sidebar.php or create a custom widget area. Add the following where you’d like the vertical menu to appear:

<?php
wp_nav_menu(array(
    'theme_location' => 'vertical-menu',
    'container_class' => 'custom-vertical-menu'
));
?>

Now you’ve linked your menu to a visible area in the theme!

Step 4: Style the Vertical Menu with CSS

The next step is to make the menu look unique and visually appealing. Open your style.css file and start customizing:

.custom-vertical-menu {
  background: #f8f8f8;
  border-right: 1px solid #ddd;
  padding: 20px;
  width: 230px;
}

.custom-vertical-menu ul {
  list-style-type: none;
  padding: 0;
}

.custom-vertical-menu li {
  margin-bottom: 10px;
}

.custom-vertical-menu a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.custom-vertical-menu a:hover {
  color: #0073aa;
}

This simple CSS block gives your vertical menu a fresh and clean look, aligning well with the minimalist aesthetic of Twenty Fifteen.

Adding Responsiveness

To ensure your new menu looks great on all devices, add these responsive tweaks to your CSS:

@media screen and (max-width: 600px) {
  .custom-vertical-menu {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #ddd;
  }

  .custom-vertical-menu li {
    display: inline-block;
    margin-right: 15px;
  }

  .custom-vertical-menu ul {
    display: flex;
    flex-wrap: wrap;
  }
}

This code converts the vertical menu into a horizontal, touch-friendly layout for mobile screens.

Optional: Add Icons to Menu Items

If you’d like to enhance your vertical menu further, consider adding icons next to menu items using FontAwesome or another icon library. You can do this manually by editing the menu label or dynamically with code.

.custom-vertical-menu li a::before {
  content: "\f007"; /* User icon for example */
  font-family: 'FontAwesome';
  padding-right: 8px;
}

Make sure you enqueue FontAwesome in your child theme’s functions.php.

Troubleshooting Common Issues

Sometimes things don’t go as planned. Here are a few common issues and how to fix them:

  • Menu doesn’t appear: Make sure you’ve assigned items to the Vertical Menu under Appearance > Menus.
  • CSS changes not visible: Clear your browser cache or use browser developer tools to ensure styles are being applied.
  • Menu location not found: Check your functions.php for syntax errors.

Bonus: Adding a Sticky Vertical Menu

Want your vertical menu to always be visible while users scroll? That’s possible with CSS position: sticky.

.custom-vertical-menu {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}

This is a lightweight solution that improves site navigation without needing JavaScript.

Where to Go From Here

What you’ve done is just the beginning. Here are a few ideas to take your vertical menu to the next level:

  • Add submenus and style them with CSS transitions.
  • Implement JavaScript-based toggles for collapsible sections.
  • Integrate animations to make interaction smoother and more engaging.

The flexibility of WordPress and the clean, modular setup of the Twenty Fifteen theme provide an ideal playground for these enhancements.

Conclusion

Customizing the vertical menu in the Twenty Fifteen theme is a great way to combine simplicity with unique design. By building a child theme, registering a custom menu, and applying thoughtful CSS styles, you can greatly enhance your site’s usability and branding. Whether you’re running a personal blog or a professional portfolio, this type of customization brings your WordPress site to the next level—and it’s fun!

So go ahead—experiment, tweak, and don’t be afraid to try new things. Your users will thank you for a better, more visually engaging experience.