WordPress: Theme and Custom Menus Installation Guide

To save myself the headache of editing a new docs.html file for every premade I’ve decided to put the installation guide on the site for easier access. You’ll find an easy step-by-step guide on how to install a WordPress theme in addition to creating your own custom menus below.

There are two ways to install WordPress themes on your website and they are as follows.

Step One: Installation

FTP:

Extract the theme zip file (example: sin21-wp-tb103.zip) and upload the extracted theme folder to the /wp-content/themes/ directory of your WordPress installation.

WordPress Dashboard:

In your admin panel, go to Appearance → Themes and click the Add New button at the top of the page. Then click the Upload button at the top of the page. Choose the sin21-wp-tb103.zip file from your computer and click Install Now.

Step Two: Activate Theme

After installing the theme, you must activate it. In your admin panel, go to Appearance → Themes and hover over the theme’s preview thumbnail. Click the Activate button next to the theme’s name.

▸ Recommended pluginsClassic Editor and Classic Widgets
▸ Gutenberg Editor Disclaimer: My WordPress themes often disable the following default WordPress styles, including relating styles for the Gutenberg Block Based Editor: wp-block-library, wp-block-library-theme, wc-blocks-style, global-styles, classic-theme-styles.

Tip: To read more about installing themes correctly: WordPress Adding New Themes.

Creating WordPress Menu

All of my WordPress themes come with the built-in Custom Menu feature offered by WordPress. Nearly all of my themes offer 2 Types of menus: a primary menu and a social icons menu. Many of my themes also offer child menu support better known as a “Dropdown Menu” as well, while some do not.

Here is how to set up your own custom menu:

Primary Menu (Main Menu)

This menu allows for link children. If a link has children it will allow for a dropdown menu to appear when the link is hovered over in desktop mode and usually a clickable slide-out feature in mobile.

Anything deeper than one level of link children will not be shown and/or break the menu altogether. This may not apply to themes created by different designers but it does apply to my own.

  1. WordPress menus can be found under Appearance → Menus.
  2. If you don’t have a menu already, click create a new menu to create one.
  3. On the left side of the Menu page, choose the pages/posts/links/categories to add to your menu and click Add to Menu.
  4. Now that you have the menu created, you need to assign it to the Primary Menu in the Theme Locations section.
  5. Save the menu when finished.

Social Icons Menu

  1. To add a social icons menu, go to Appearance → Menus.
  2. If you don’t have a menu already, click create a new menu to create one.
  3. On the left side of the Menu page, click the Custom Links menu item to add to your social links.
  4. Add the URL for each of your social profiles and a label for the link. The theme will do the work for you by detecting which site you are linking to and display the matching icon accordingly.
    Sin21 Themes Support 33 Sites: email (/contact/, /contact or mailto:), RSS Feed (rss, feed=, /feed/ or /feed), apple.com, blogger.com, bsky.app, dailymotion.com, deviantart.com, discord.com, dropbox.com, ebay.com, etsy.com, facebook.com, flickr.com, google.com, pay.google.com, plus.google.com, goodreads.com, instagram.com, messenger.com, patreon.com, paypal.com, skype.com, snapchat.com, soundcloud.com, spotify.com, tiktok.com, threads.com, tumblr.com, twitter.com, twitch.tv, vimeo.com, vk.com, yahoo.com, youtube.com, weibo.com, wikipedia.com, wordpress.com, x.com
  5. Now that you have the menu created, you need to assign it to the Social Icons Menu in the Theme Locations section.
  6. Save the menu when finished.

Tip: To read more about using the WordPress menus: WordPress Menu User Guide.

Please consider buying me a coffee to show your appreciation if you found this tutorial to be useful or educational. Every cup of coffee purchased will help fuel the future creation of additional posts like this one.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.