CodeCanyon Button Menu - WordPress Plugin

A Practical Guide to Setting Up CodeCanyon Button Menu in WordPress

CodeCanyon Button Menu is useful when a site already has a standard navigation bar, but visitors need a more visible route to an action on a particular page, service section, or landing page. The plugin does not build your site structure for you. It starts with a WordPress navigation menu you have already created and turns its items into buttons that you can place where your theme’s regular menu would be too easy to miss or is not available at all.

This guide covers more than installation. First, we’ll decide which menu is worth turning into buttons, then prepare its structure and check for duplicate links, styling issues, icons, nested items, and hover states. After that, we’ll walk through a practical example for a services page, review the page from a visitor’s perspective, and cover cases where the buttons do not appear, look different than expected, or conflict with a block theme’s setup.

CodeCanyon Button Menu has one important characteristic: according to its official description, it works through a shortcode. The outcome therefore depends on three things at once: the contents of the source menu, where you place the shortcode, and the active theme’s CSS rules. If you do not separate these layers, you may start changing colors in the plugin when the real issue is an empty menu, the wrong insertion point, or the page’s styles.

In this guide, source menu means a menu created with WordPress, while button menu means the version of that menu rendered by the plugin. Keeping the two separate helps protect your site’s regular navigation while you experiment. For your first setup, work with a copy of the menu and one test page. That is safer than reworking the site’s main menu right away.

Start with the navigation task, not the effects

Buttons are useful not just because they stand out more than links. They work well when visitors need to choose quickly among several equally important paths. On a law firm’s page, for example, those paths might be consultation areas; on a course page, program modules; on a service page, terms, pricing, booking, and contact details. In this setup, the header menu remains the site-wide navigation, while the buttons guide visitors through one specific topic.

Before installing the plugin, write down one short answer: what decision should someone make after clicking one of these buttons? If the answer is "go to the relevant service section" or "choose a resource category," Button Menu fits the task. If the answer is "place an order," "submit a form," or "browse a complex catalog with filters," a button menu alone may not be enough. The plugin presents a menu; it does not replace a cart, form, search, access controls, or complex catalog behavior.

Three situations where buttons make sense

Local navigation on a long page. A service page may include an overview, pricing, case studies, answers to common questions, and a form. Near the top, or after the first explanatory section, you can add a compact row of buttons that link to page anchors. Visitors can see their options at a glance instead of searching the text for a small link.

A group of related pages. An education provider might have separate pages for its programs, an agency might list its services, and a clinic might offer different appointment types. A standard WordPress menu already stores these links. Button Menu lets you display that group in the content of a selected page without editing the theme template.

A second level of navigation for one service. The global menu might have a general "Services" item, while a page about one particular service could offer buttons for "Process," "Examples," "Questions," and "Request a Quote." This does not compete with the header if the two sets have different roles. The global menu answers "where am I on the site?" The buttons answer "what can I do on this page?"

When to hold off

Do not add Button Menu just because your site has a menu. A set with one item is simply a link or call to action. With fifteen items, the buttons will become clutter and make the page harder to navigate. If every item leads to an external site, first check whether those links are necessary, trustworthy, and clearly labeled. And if different items should be visible to different user roles, do not assume that a decorative menu presentation will handle access control.

A site built with full-site block editing calls for extra care. WordPress documentation distinguishes the Navigation block from the Shortcode block: in a block theme, you create and assign navigation in the Site Editor, then insert a shortcode as a separate block in the content. It makes sense to treat Button Menu as a standalone page element, not as a replacement for the Navigation block in the header.

A practical rule: Start with a small set of three to five clear paths, test it on one page, and then decide whether the same approach belongs elsewhere on the site. Good navigation narrows the choices; it does not display every link you have.

What makes up a button menu

The official product page confirms several core features: displaying existing WordPress menus as buttons on any page through a shortcode, support for unlimited submenu levels, icons, two styles, individual color settings, and a selection of hover animations. Together, these features suggest a simple but useful model: WordPress stores a tree of links, Button Menu reads that tree and renders it as a button interface, and the page editor determines where it appears.

This model matters more than the exact names of the plugin’s tabs. Screen labels and field order may differ between releases or change after an update, but the underlying sequence remains the same. If a button goes to the wrong place, check the source menu item. If the wrong set appears, check which menu was selected or duplicated and which shortcode was used. If the link is correct but the color, size, or position looks wrong, check the styling options and the active theme’s CSS.

Input: the WordPress menu tree

A WordPress menu contains links to pages, posts, categories, or custom URLs. In a classic theme, you usually manage it through the Appearance area; in a block theme, you work with the Navigation block or the Site Editor’s navigation area. The plugin will not automatically make a poorly structured menu clear. Duplicate items, labels that do not match their destinations, and links to removed URLs will carry over to the button version.

That is why preparation starts with the menu, not the colors. Open the source menu and read it as a visitor would: does each label make sense on its own? Is the order logical? Do the child items really belong under their parent? Does a label like "Learn More" hide several different actions? Short, specific labels work especially well on buttons: "Programs," "Pricing," "Questions," "Contact." A vague label does not become more useful just because it has a border and a color.

Transformation: duplicate, style, icons, and hover states

The product page explicitly says you can duplicate an existing menu in one action. For a first setup, this is more than a convenience; it is a way to stay in control. A duplicate lets you keep the header menu as it is while creating a separate version for the page content. You can shorten the list, rename items to suit the page, or add anchors without risking the site’s main navigation.

The next step is choosing how the menu looks. The product offers default and circles styles. The choice should not be automatic or purely decorative. The standard style is often easier to read when labels contain two or three words or vary in length. Circles can work better when the symbol carries most of the meaning and the label is short or displayed separately. If visitors need the text to understand an action, do not sacrifice clarity for the shape of the button.

An icon can help visitors find their way, but it cannot replace a label. A phone symbol beside a contact link or an arrow beside a section link can make the destination easier to scan. An unfamiliar icon beside an ambiguous word, on the other hand, gives visitors two things to guess at. Test each icon without a hint: can someone understand its purpose in a second? If not, keep a clear text label. The button’s meaning should still come through if the icon is missing, the font loads slowly, or a visitor is unfamiliar with the symbol.

Output: a visible path on the page

The shortcode connects the plugin settings to the page content. In the editor, it looks like a short line of text; to a visitor, it becomes a button menu. WordPress documentation describes a dedicated Shortcode block, which you can add through the block inserter or by typing /shortcode. The page needs to contain a working Shortcode block, not a regular paragraph, a code block, or a Navigation block item.

After publishing, check more than whether the buttons appear. Open the page in a new window while logged out, follow each link, hover over the buttons, narrow the window, and then go back. The goal is to follow the visitor’s path from the first glance to the destination. A published page is not necessarily easy to navigate.

What to check before installing on a live site

The CodeCanyon page indicates that Button Menu was last updated some time ago compared with recent WordPress changes, and lists compatibility only with the version range specified by the author. That does not mean the plugin will necessarily fail on a newer installation. It does mean you should not promise compatibility with your current WordPress, PHP, block theme, cache, or page builder without testing in your own environment. For a plugin like this, a staging site is part of a normal installation, not a sign that you distrust the author.

Check the source of the archive and make a backup

Use the original archive obtained legitimately from your marketplace account. Before changing the site, back up its files and database through your host or your usual backup solution. This is especially important if you plan to change existing menus: the same menus may serve the header, footer, account area, and several important pages.

A backup is not just for installing the archive. It gives you a quick way back to a known state if styles change after activation, an error appears on the page, or the plugin conflicts with another part of the site. Note which menu you plan to use, where it already appears, and which page will be your test page. That makes it easier to tell a new problem from existing theme behavior.

Identify your theme type and where the menu will appear

In a classic theme, you often edit traditional menus from the Menus screen. In a block theme, navigation is connected to the Navigation block and the Site Editor. WordPress emphasizes that creating a menu in the Site Editor does not make it visible by itself: the Navigation block must be added to a template part and connected to the menu you want. This matters for Button Menu for a different reason: the plugin displays its output in the content through a shortcode, so you should not try to insert that shortcode inside an existing Navigation block item.

Choose a regular page where you can add a Shortcode block to the main content. For your first test, avoid the header, footer, cart, checkout, login page, and post template. These areas often have additional styles and plugins. A straightforward services page makes it easier to test the basic behavior without extra variables.

Make a short list of possible conflicts

You do not need to turn everything off. Just note what affects the page’s appearance: the active or child theme, page builder, menu-related plugins, CSS and JavaScript optimizers, server or page cache, and minification tools. If you cannot see a change, first clear only the cache layers your site already uses and check the page in a private window. Do not remove cache plugin settings just to run one test.

• Record the test page URL and the source menu you plan to use.
• Make a copy of the source menu, or use the duplication feature if it is available in your installed version.
• Make sure you have permission to install and activate plugins in WordPress.
• Check that you can add a Shortcode block, or use an equivalent safe insertion point, on the test page.
• Have a way to clear the browser, plugin, and server cache without removing useful settings.

Do not skip this step: If you apply the plugin to the main menu without making a copy, it will be hard to tell whether a problem came from Button Menu, the theme, or the link structure itself.

Install and run a first check without making extra changes

After backing up the site, sign in to the WordPress admin with an account that can manage plugins. In the English-language interface, the usual path for uploading an archive is Plugins - Add New Plugin - Upload Plugin. Select the ZIP archive you obtained, complete the installation, and click Activate. If your interface is translated, the labels will be localized, but the steps are the same: add a plugin, upload the archive, install it, and activate it.

Do not jump straight into a full setup. After activation, open the plugins list and confirm that Button Menu is active and there is no system error message beside it. Then check the admin sidebar and the Appearance screens: the plugin may add its own page or connect to the existing menu management area. Do not assume an exact path before you see it in your version. With an older commercial archive, that is safer than following a random guide for another plugin with a similar name.

A minimal test after activation

For your first test, create or select a short menu with three links, such as "About," "Schedule," and "Sign Up." The links should work on their own first. Check the source menu as well as the appearance: if the WordPress menu does not contain valid items, the plugin has nothing reliable to display.

In Button Menu, find a way to select an existing menu or create a copy of it. The official description confirms menu duplication and use of an existing structure. After making your selection, save the changes with the usual save button, if one is provided. Then find the shortcode for that specific button menu. Do not copy a similar shortcode from someone else’s guide or guess its format: the official page confirms that the plugin uses a shortcode but does not give its exact syntax in the description.

Where to add the shortcode in the editor

Open the test page. In the block editor, add a Shortcode block, paste the string supplied by the plugin without adding quotation marks, and update the page. In the classic editor, use a mode that processes shortcodes, not a field intended to display raw text. If you use a page builder, look for its built-in shortcode element and test the published page, not just the builder’s internal preview.

Open the page in a separate browser window. A successful first test looks like this: a set of buttons appears where you placed the shortcode, the number and labels match the source menu, and the links go to the same URLs. Do not move on to colors, animations, or icons until this check passes. First confirm the "menu - shortcode - page" chain, then refine the appearance.

Prepare the source menu so it reads like an interface

Button Menu makes the weaknesses in your navigation more visible, too. In a standard header, long labels can get lost among the logo, search, and other elements. On buttons, they become the main text. That is why it helps to make a separate copy that does not have to repeat every link from the header. Its job is to guide visitors through one specific context.

Give each set one purpose

A set should contain one type of action. On a course page, for example, the links might be "Program," "Instructor," "Format," and "Enroll." For a portfolio, they could be "All Work," "Branding," "Websites," and "Contact." For a support service, they might be "Get Started," "Guides," "Status," and "Contact Support." Do not mix links to page sections, a phone number, social media, sign-out, and a privacy policy in one row. Different intents compete for attention and create an unpredictable path.

A label should name an action or a destination, not pose a riddle. "Pricing" is clearer than "Learn More." "Questions" is clearer than "Useful." If visitors really should reach a form, "Sign Up" is clearer than "Take the Next Step." Try not to mix grammatical styles in one set: if two items name sections, the third should not suddenly be a marketing slogan.

How to handle submenus

The official page says the plugin supports an unlimited number of submenu levels. That technical capability does not mean you should show every level. For local page navigation, one main level is usually enough; a second level is occasionally useful. Keep deeper levels for genuinely hierarchical information, such as catalog categories, rather than using them to hide every miscellaneous link.

Check the order in the menu editor. WordPress shows nesting through indentation: child items are offset beneath their parent. Before displaying the menu, make sure an item did not end up under the wrong heading after being dragged. If the page shows an unexpected dropdown or group of buttons, the cause may be the source menu’s nesting rather than Button Menu’s effects.

A safe approach using a copy

Name the copy so it cannot be mistaken for the main menu, such as "Course Page - Buttons." Remove anything that does not belong to that page’s use case. The regular header menu remains the source of site-wide navigation; the copy becomes a focused page element. Visitors do not need to know the copy’s admin name, but a clear name will make it easier for you to maintain a few months from now.

If the set should link to anchors on the same page, first create and test those anchors with your editor. The button menu only works with a valid URL or URL fragment. After changing an anchor, check both the menu and any links to it in the page text. This helps prevent a common problem: the button scrolls the page but stops between sections or at an outdated block.

Test each link before styling it as a button

Every menu item has two independent properties: its label and its URL. Do not assume that a polished label means the destination is correct. Click every item in the regular menu and then in Button Menu. Check whether it opens in the same or a new tab as intended, whether anchors work, whether any page returns a 404, and whether a link sends visitors straight back to the current page. For external resources, make the destination clear in the label or nearby page text.

This test is useful because the duplication feature copies the structure but does not fix outdated links. A duplicate helps isolate the design; it does not clean up the content automatically. If the source changes, update the menu that the shortcode actually uses.

Two styles, icons, and hover: keep the interface clear

The official description lists two styles, icons, individual button colors and hover states, and a selection of animations. Instead of searching for "the best settings," consider the choices in order: readability, fit with the theme, feedback on hover, and then decorative movement. This order helps you avoid a button row that looks good but is difficult to use.

Choose a style that suits the label length and purpose

The default style is usually a better fit for text links, especially when an item contains two or three words. It gives labels a consistent surface and keeps visitors from having to guess what a symbol means. The circles style is worth testing for short, familiar actions or compact navigation where the page context already explains the icons. The official page confirms that both styles are available, but does not claim that either one works everywhere.

Take a screenshot or make a quick note before and after changing the style. Ask yourself four questions: can you read the label from a normal viewing distance? Is the clickable area easy to see? Does the color blend into the section background? Can a visitor tell where the button leads without hovering over it? If the answer to any of these is no, the style is not ready for the page.

Colors: keep branding and contrast separate

The product offers separate settings for the button color, hover color, background, and hover background. That gives you flexibility, but it also calls for restraint. Do not use the same shade for the regular and hover states; visitors should get visual feedback. Avoid such a sharp change that the text disappears against the background. And do not make color the only cue: visitors should be able to understand an important link from its label and shape, not just from whether it is red or green.

For a typical site, start with a calm base color, readable text, and one noticeable but restrained hover treatment. Then check it against both a light and a dark part of the actual page. A color that looks good in the settings panel may disappear over a photo, gradient, or colored section in your theme. If the menu sits on an uneven background, first decide what surface should sit behind the buttons before adjusting dozens of individual shades.

Check the interface without a mouse

Hover states are not visible to every visitor. On a touchscreen, people usually tap directly; keyboard users rely on focus states from the browser and theme. A hover animation is an optional cue, not the only way to convey meaning. Check that the text remains readable in its regular state and that visitors can use the links without first hovering over them.

If the active theme already adds strong transitions or transforms to links, start with a minimal Button Menu animation. Two effects running together can make the interface feel delayed or jumpy. If you are unsure, temporarily turn off the plugin’s extra effect and compare. The most useful hover state signals that an action is available without distracting from the choice.

Icons as a second cue, not a code

An icon works well when it reinforces a label that is already clear. A calendar beside "Schedule" or an arrow beside "Go to Section" can offer a quick visual cue. Do not assign random symbols just to make every item look uniform. Icons do little to help when items differ by subtle business terms, legal services, or content types. In those cases, an accurate text label matters most.

Review the set as a whole: are the icons the same size? Is the spacing before the text consistent? Are any icons too busy or hard to distinguish from the background? If one item has a longer label, do not try to compensate with an oversized icon. Shorten the label or change the structure instead. A button menu does not have to look like a set of identical squares if that makes it harder to read.

Individual colors should preserve the visual hierarchy

Setting each item’s color separately can help distinguish actions with different purposes. For example, secondary sections can stay neutral while one "Sign Up" button stands out more. But if every button has its own bright color, visitors will no longer know which one matters most. Use color to establish hierarchy: one primary path, with a few equally important secondary ones, rather than a rainbow of equally urgent choices.

After making a change, check where your eye goes first, what you notice second, and which path looks primary. If the page already has a form or a prominent call to action, the button set may not need another loud element. Good navigation supports the page’s goal instead of competing with its main action.

Duplicate the menu and use its shortcode without risking the header

Menu duplication is one of the most clearly documented features of Button Menu. It is especially useful when an existing WordPress menu already serves the site header. Instead of changing that menu to suit one page, create a copy for the button layout. The sequence is straightforward: choose the source, create a separate version, trim it to fit the page, style it, get the shortcode, add it to a test page, and check the result.

Step 1. Separate site-wide navigation from page navigation

Open the menu currently used in the header. Do not change its order or labels while you are trying Button Menu for the first time. Use the plugin’s documented duplication feature, or create a separate set with WordPress if your version handles the process differently. Give the copy a descriptive name right away. When the admin area contains several menus called "New Menu," maintaining them becomes guesswork.

Keep only the items that help visitors on the current page. For a service page, for example, you might keep "Process," "Pricing," "Examples," "Questions," and "Get a Quote." Do not copy the home page, privacy policy, every blog category, and social links if they already appear elsewhere. A menu is more useful when its purpose is clear.

Step 2. Make sure the copied structure still makes sense

After duplicating the menu, review the items from top to bottom. Shorten labels that are too long, but do not sacrifice accuracy. Remove secondary links that do not belong on the page. Check the nesting: every child item should have a clear parent. If the group does not fit on one screen without scrolling, do not hide the problem with an effect. Split it into two logical sets or shorten the list.

Remember to check anchor links, too. If the local menu points to sections on the same page, the URL must include the correct ID for each section. After changing an anchor, check both the menu and any links to it in the page text. This helps prevent a common problem: the button scrolls the page but stops between sections or at an outdated block.

Step 3. Save the setup and get the exact shortcode

Choose a style, use a limited set of colors, and add only the icons you need. Save your changes, then copy the shortcode from the installed plugin’s interface. Shortcodes for similar plugins can look alike but belong to different products and will not work here. Paste the entire string as provided: do not escape it, wrap it in quotation marks, or manually change numeric or text parameters unless you understand what they do.

Keep the shortcode where the page editor can use it, not in an admin note. If you want to use the same menu in more than one place, first add the same shortcode to two test pages and confirm that it works in both. Then decide whether one set really suits both contexts. It may be better to create two similar but independent sets, so a change to the services page does not affect the contact page.

Step 4. Check what visitors actually see

Open the page as a guest. Compare the number of buttons with the number of items in the copy. Click the primary and child items. Hover over the buttons, then press Tab and check whether your browser displays a focus indicator. Narrow the window to make sure long labels do not overflow. Then return to a page that uses the original header menu and confirm that it has not changed.

A problem at this point usually points to one part of the setup. If nothing appears, check activation, the shortcode, and where you inserted it. If the wrong items appear, check the duplicate and selected menu. If the links are wrong, check the WordPress menu items. If the appearance conflicts with the theme, start with the plugin’s basic settings, then check the page styles. This order saves time by keeping content and presentation separate.

Adding the shortcode: classic and block themes call for different expectations

Button Menu uses a shortcode to display its output. That fact determines how you should place it. The plugin does not promise to add the menu to your header automatically, replace the theme menu, or become a Navigation block. Its natural home is page or post content, a page builder area, a widget area that processes shortcodes, or another place supported by the theme. The closer the placement is to the page’s purpose, the easier it is to check the result.

In the block editor

WordPress describes the Shortcode block as a separate block. Add it through the inserter or by typing /shortcode, paste the string from the plugin, and update the page. Do not put the shortcode in a regular Paragraph block if the editor displays it literally, and do not use a Code block, which is meant to show code to readers. If the page displays the shortcode as text in square brackets, that is an early sign that you chose the wrong block or WordPress did not recognize the shortcode.

Choose the placement based on what visitors need. A set of links to sections on the page usually belongs after the introduction, once visitors understand the topic but before the longer main content. You can repeat "Sign Up" and "Contact" buttons closer to a practical section if the page is long. Do not repeat the entire set every couple of paragraphs. Repetition is useful only when the context changes and visitors are ready to take action.

In a classic theme or page builder

In a classic theme, you will usually add the shortcode in the post or page editor. If the theme offers widgets, first check its documentation to see whether the selected area processes shortcodes. Do not assume every text widget will run the shortcode automatically. In a page builder, use its built-in shortcode element and check the page outside the builder, since the internal preview may load styles differently.

Do not edit theme files just to place the shortcode for the first time. The plugin’s documented workflow is to use a shortcode, so start there. Editing a template, child theme, or PHP file only makes sense when you know exactly why the standard output is not enough and can maintain the change. For local page navigation, that is usually unnecessary risk.

A block theme’s header is separate from its page content

WordPress documentation explains that the Navigation block manages a menu in a template part and is connected to a specific menu. The Shortcode block is separate. Do not try to make Button Menu part of every global navigation item or use it to edit the header. On a block theme, it is usually better to keep site-wide navigation in the header and use a shortcode to display a separate, compact menu in the page content.

This separation helps reduce the risk of conflicts. If a theme update changes the header, the local button menu remains in the content of its page. If you need to change the local set, you do not affect the Navigation block. A clear division of responsibility makes both design and troubleshooting easier.

Practical example: navigation for an educational program page

Consider a specific use case. An education center has a long page for one of its programs. The page walks through an overview, who the course is for, its modules, schedule, pricing, answers to common questions, and an application form. The global header already links to the home page, all programs, instructors, and contact details. Someone reading about a particular program should not have to return to the header to find its price or application form. They need a short set of links within the page.

Goal and preparation

The goal is to show five buttons after the introduction: "Program," "Modules," "Schedule," "Pricing," and "Sign Up." The first four point to anchors on the same page; the last leads to the form below or to a separate page. Before enabling Button Menu, make sure each section has a stable anchor and the button labels do not overlap in meaning.

Create a separate WordPress menu or make a copy of an existing one. Add five custom links with anchor URLs or the form URL. Open the page and test each link before using Button Menu. This separates the navigation itself from its future styling. If an anchor does not work as a regular link, the plugin cannot fix it.

Steps in the interface

1. In Button Menu, select the menu you prepared or use the duplication feature as a safe starting point.
2. For the first setup, keep the text labels and use a calm standard style without assigning many individual colors.
3. Add an icon only where it reinforces the meaning, such as for the schedule or application form.
4. Save the setup and copy the shortcode for this button set.
5. Add the shortcode in a Shortcode block after the introduction to the program page, then update the page.
6. Open the published page as a guest and follow every link, including the route back to the top of the page.

Do not try to make the menu a promotional block in its own right on your first pass. It should be more visible than an ordinary text link, but less prominent than the page’s main heading. If the five buttons overpower the program description, tone down the styling, shorten the set to four items, or move a secondary path farther down the page.

Check the setup

Test the result in an order that resembles how someone would actually use the page. Open it from its direct URL, not from the admin area. Read the heading and first few paragraphs. Then check whether the buttons make sense without further instructions. Click "Modules" and make sure the page stops at the section heading, not halfway through the text. Go back and click "Pricing." Then test "Sign Up."

If the site has a sticky header, it may cover the top of an anchor-linked section. That is not necessarily a Button Menu problem: the link may be correct, but the page’s scroll offset does not account for the header’s height. Confirm that this is what is happening, then adjust the anchor offset with the theme or editor if supported. Do not try to fix it by randomly changing button colors.

How submenus fit this use case

Suppose the "Modules" item has several child topics. Use nesting only if readers need to choose a specific module before scrolling. If all the topics already appear one after another in the same section, a single "Modules" button is probably enough; show the details in the page content. Do not add a dropdown just because the plugin supports multiple levels.

The same rule applies to animation. A small hover cue may help visitors notice that an item is interactive. A long animation every time a menu opens distracts from the course material and makes touch devices harder to test. In course navigation, direct and predictable movement to the content matters more.

Check the page from a visitor’s perspective, not just in the admin

Checking Button Menu involves three layers: data, behavior, and usability. The data is the right set of items and URLs. Behavior means that clicks, hover states, nested levels, and anchor links work. Usability means that the menu is clear, has enough contrast, follows a sensible order, and does not compete visually with the main content. If you check only the first layer, you may publish a menu that works technically but is hard to use.

A quick test path

Open the page in a private window. This reduces the chance that you are seeing an authenticated session or an old browser cache. Make sure the shortcode is not printed as text. Count the buttons. Compare their labels with the menu you prepared. Click each item. Check that external links do not point to a test URL and that anchors do not still reference an outdated page version.

Then narrow the window. Even though the plugin is for WordPress, the actual layout depends on the theme. Look for specific issues instead of relying on the general idea of "responsive design": is there horizontal scrolling? Do labels overlap? Can you tap every button? Do submenus extend past the edge of the visible area? If you find problems, first reduce the number of items and shorten the labels. Then check the plugin’s built-in settings and only after that investigate the theme’s CSS.

Check the feedback visitors actually get

The hover state should look different from the regular state without changing the button’s meaning. The official page says that hover colors and animations can be configured. Confirm that the label remains readable when hovered, the button does not jump and shift its neighbors, and the transition does not feel delayed. If the menu has nested items, make sure visitors can move the pointer to a child item without the open state disappearing.

Then try navigating with a keyboard. Press Tab and watch for a visible focus indicator on the current item. The theme often determines what the focus state looks like, but the practical requirement is the same: visitors should be able to tell where they are and open the link. If focus is hard to see, check the theme’s styles and the link’s accessibility rather than adding another hover animation.

A final check before publishing

Ask someone who has not seen the setup to complete a simple task: "find the pricing" or "go to the schedule." Do not tell them where the buttons are. If they spend more than a few seconds looking or misunderstand a label, the problem is the information structure, not a lack of effects. Adjust the wording, order, or number of items and test again.

This test is especially useful for account areas, legal services, medical topics, and complex B2B pages where visitors arrive with a specific question. A bright interface cannot make an unclear label easier to understand. Button Menu works best when visitors find the section they need quickly and barely notice the tool itself.

Product limitations and compatibility with modern WordPress

CodeCanyon Button Menu advertises support for WordPress menus, shortcodes, styles, icons, and submenu levels. However, the product page does not call it a Gutenberg block and explicitly marks it as not optimized for Gutenberg. Do not promise that it will become a native Site Editor element, appear automatically in the block list, or replace the Navigation block seamlessly. On a block site, the safer approach is to add it to the content with a separate Shortcode block and test the result.

You also cannot guarantee compatibility with every page builder, menu plugin, optimizer, or PHP version in advance. The main risk with an older extension is not that it must fail, but that the author may not have tested it with your particular combination of technologies. Staging lets you replace assumptions with what you can observe.

What the plugin handles, and what it does not

Who handles what when using CodeCanyon Button Menu in a typical project

Task	Responsible component	What to check
Link structure and nesting	WordPress menu	Labels, URLs, order, and parent and child items.
Displaying the menu as buttons	Button Menu	Menu selection, style, icons, colors, hover states, and shortcode.
Placement on the page	Page editor or builder	The correct Shortcode block and the content around the menu.
Header, container width, and some responsive behavior	Theme and its CSS	Wrapping, overlap, focus, sticky header, and mobile layout.
Showing the latest page version after a change	Browser, cache, optimizer, and server	Clearing the necessary cache and checking again as a guest.

This table does not shift responsibility away from the plugin. It helps you avoid troubleshooting every symptom in the same place. For example, if Button Menu has the right set selected but the published page shows an older version, the cause may be the cache. If the shortcode appears as text, the wrong block may have been selected. If the items appear but a link is wrong, the source is usually the WordPress menu.

Make safe adjustments without guessing at code

For this product, avoid suggesting PHP changes, hooks, or selectors that are not confirmed by the official description. First use the built-in settings for colors, icons, style, and animation, then the page editor’s container settings. If you need a CSS adjustment, inspect the rendered markup in your browser first and add the rule through a standard theme feature, such as Additional CSS, or through a child theme. Do not edit the plugin files: an update would overwrite the change and make troubleshooting harder.

Keep each CSS change small and document the issue, the URL where it occurs, the window width, the selector you actually found, the expected outcome, and how to remove the rule if you need to roll it back. Test on one page first. That is more useful than a generic code snippet that knows nothing about your theme, HTML markup, or the Button Menu version’s classes.

Troubleshooting Button Menu: from symptom to check

Button menus are relatively easy to troubleshoot because you can see the output immediately, and the cause usually lies in one of four areas: activation and shortcode, the source menu, theme styles, or cache. Do not change several settings at once. After each check, note what changed so you can safely undo an unsuccessful step.

The shortcode appears on the page as plain text

Symptom: Instead of buttons, the page shows a line in square brackets or a code-like string. Likely cause: The string was added to a paragraph, code block, or field that does not process shortcodes, or the shortcode belongs to a different or inactive plugin.

What to check: Is Button Menu active in the plugins list? Did you add the string to a Shortcode block or the builder’s built-in shortcode element? Did you copy it from the interface of the installed plugin? WordPress documentation describes the Shortcode block as a separate block in the block editor. How to fix it: Remove the paragraph or code block, add a Shortcode block, paste the original string without quotation marks, and update the page.

When to roll back: If replacing the block with the correct shortcode causes an error, temporarily remove only that block and check the page without it. Do not immediately disable the theme, cache, and every plugin. First note whether removing this specific output makes the error go away.

No buttons appear, even though the shortcode is in place

Symptom: The insertion point is blank or only shows extra spacing. Likely cause: The plugin is inactive, its settings were not saved, the selected menu is empty, the shortcode belongs to another set, or an external cache is serving an older HTML version.

What to check: First, open the plugins list and confirm the status is Active. Then check that the selected menu in Button Menu contains items and that its settings were saved. After that, open the page in a private window and clear only the page cache you use, if any. How to fix it: Copy the shortcode from the intended set again, add it to a test page, and make sure the source menu is not empty.

When to roll back: If you changed several settings before the buttons disappeared, go back to the last saved minimal setup: one menu, standard style, and no complex nesting. Do not erase the working global menu. The goal is to get a minimal output and then add settings back one at a time.

The wrong links appear, or child items look out of place

Symptom: There are more or fewer buttons than expected, old links appear, or a child group is under the wrong item. Likely cause: The shortcode is connected to a different copy, the source menu changed after setup, or the WordPress menu has incorrect nesting.

What to check: Compare the labels and order on the published page with the specific menu in the admin area. Check the indentation of child items in the menu editor. If you duplicated the menu, make sure you are editing the copy rather than the header’s source menu. How to fix it: Correct the nesting, save the menu, update the Button Menu settings if needed, and copy the shortcode for the right version again.

When to roll back: If moving items changed the site header, restore the global menu’s original structure from a backup or saved state and continue with the duplicate only. This is exactly why it helps to create a copy in advance.

The buttons appear, but color or hover changes are missing

Symptom: You selected a color in the settings, but the page still looks the same; the hover state does not change; or some styles look like the theme’s defaults. Likely cause: The cache contains an old CSS version, the theme has more specific rules, the optimizer combined outdated styles, or the page is displaying a different Button Menu set.

What to check: First, open the page in a private window. Then clear the plugin or server cache using the project’s usual procedure. Check the test page URL and shortcode. If the issue remains, temporarily set one item in Button Menu to a noticeable but safe test color. This can show whether the configuration is reaching the page.

How to fix it: After confirming that the right set is displayed, restore a restrained color palette and inspect the theme styles with your browser’s developer tools. Do not add generic CSS at random. When to roll back: If individual colors made the text hard to read, return to a consistent base style and add an accent only for the primary action.

Buttons overlap, extend past the edge, or behave poorly on narrow screens

Symptom: Long labels overflow the container, the row causes horizontal scrolling, a dropdown closes beyond the edge of the screen, or a sticky header covers an anchor section. Likely cause: There are too many items, labels are too long, the style does not suit the content, or the theme’s CSS sets conflicting sizes or positions.

What to check: Reduce the number of items one step at a time, shorten labels without changing their meaning, and compare the standard style with circles. Then check the page at different window widths. For anchor links, confirm that the link itself works and the issue is specifically the header covering the section. How to fix it: Start by adjusting the menu structure and label length, then try the plugin settings, and use a local CSS adjustment based on the actual markup only as a last step.

When to roll back: If a fix made the menu work on one page but broke another, split the sets. A single shortcode set does not have to serve every container on the site.

The output changes after updating WordPress or the theme

Symptom: A menu that used to work disappears, becomes untidy, or produces different output after an update. Likely cause: The older plugin may not account for the theme’s new markup, editor changes, or interaction with an optimizer. The marketplace page does not provide grounds for promising support for every future version of WordPress.

What to check: Compare the updated site with a test copy, note which components were updated, and review PHP messages. Check the simple parts first: is the plugin active, does the source menu still exist, and does the shortcode remain in place? Then temporarily display the button menu on a clean test page without complex blocks. How to fix it: If the issue is specific to the theme, look for a theme setting or a compatible alternative for styling. If the basic output no longer works, do not edit the plugin files on the live site. Contact the author through an available support channel and provide the exact symptom and test environment details.

When to roll back: If the menu is critical to visitors and you cannot restore predictable behavior quickly, temporarily replace it with regular links or a WordPress navigation block. The saved menus and valid URLs let you do this without losing the structure.

Questions about using CodeCanyon Button Menu

Does this replace the main WordPress menu?

No. It is better to think of the plugin as an alternative way to display a specific menu on a selected page. The official description says it displays WordPress menus as buttons through a shortcode. It is usually best to keep the global header menu separate, especially on a block theme. That way, local changes do not disrupt the site-wide navigation.

Can I display more than one button set?

The product page says you can display an unlimited number of menus. In practice, that means multiple sets are possible, but it does not prove that you need them all on one page. First make sure each set has its own purpose; one might be for navigation and another for a catalog. If the sets repeat the same links, they add clutter instead of making the page easier to use.

Do I need another plugin to create a menu?

No. You can create the source structure with standard WordPress tools. Button Menu uses an existing menu and displays it as buttons. In a classic theme, you usually manage menus from the Appearance screens; in a block theme, you use the Navigation block and Site Editor. Choose the method that fits your active theme.

Can I put the shortcode inside a Navigation block?

Do not rely on that as the standard approach. WordPress treats the Navigation block and Shortcode block as separate blocks. For Button Menu, use a dedicated Shortcode block in the page content or your builder’s built-in shortcode element. If you need the shortcode in a template area, first test what the theme supports on a copy of the site rather than adding untested code to the global navigation.

Does the plugin support multi-level menus?

Yes. The product page lists support for an unlimited number of submenu levels. That is a technical limit, not a user interface recommendation. Most local menus need only one level, and occasionally one nested level. The deeper the tree, the more carefully you should check how it opens, whether it fits, and how easy it is for visitors to understand.

Why not promise compatibility with every new version of WordPress?

The marketplace page lists the compatibility range stated by the author at the time and says the plugin is not optimized for Gutenberg. That information does not confirm automatic support for newer WordPress versions, modern block themes, PHP, or every page builder. The right approach is to test the archive on a copy of your site, record what happens, and keep regular links as a simple fallback.

Can Button Menu improve SEO?

A polished set of buttons does not guarantee better search visibility on its own. It may help indirectly: clear local navigation can help visitors find a section and reach the content they need sooner. Focus on meaningful labels and working links, not promises of an automatic SEO boost.

Do animations affect speed or usability?

A small hover animation usually should not be the main criterion, but it is worth checking on the actual page alongside the theme and other effects. Too much motion can distract visitors, cause layout shifts, and conflict with other styles. First make sure the links work, the labels are readable, and the layout holds up on a narrow screen. Then keep only the effects that make the interactive elements easier to notice.

+

Map the page’s paths before styling the buttons

A button menu is especially useful on pages with several distinct choices, not just on any long page. To keep it from becoming a decorative copy of the table of contents, first sketch the visitor’s path on paper or in a working note. Start with the question that brought them to the page. Then add one or two sections that provide context. After that, the visitor should have a choice of paths. The destination should be specific information, a form, a document, or the next section. If you cannot describe the path without saying "somewhere" or "something," it is too early to style it as a menu.

Here is an example for a service page: a visitor wants to know whether the service is right for them. The introduction explains what the service involves and what it provides. Then the buttons offer "How It Works," "Pricing," "Examples," "Questions," and "Request a Quote." Each button answers a different question instead of repeating another. At the end of the path, the visitor gets an answer or moves on to a meaningful next step. That is good local navigation.

Separate orientation, details, and next steps

Orientation items help visitors get their bearings: "About the Program," "Who It’s For," and "How It Works." Detail links lead to specifics: "Modules," "Timeline," "Documents," and "Examples." Next-step links move visitors toward a decision: "Sign Up," "Get a Consultation," and "Contact Us." Do not put all three types in a random order. It is usually helpful to start with the basics, then give details, and end with a next step. An exception might be a page whose main goal is to send visitors directly to a service, such as checking an application status.

Order matters more than it might seem. Visitors read the buttons as a brief promise about what the page contains. If the first button leads to a form and useful explanations are buried at the end, some people may see the page as an aggressive sales pitch. If every action is buried after ten informational buttons, visitors who are ready to get in touch may have to search for a way forward. Button Menu lets you change the display order, but that order should serve the page’s purpose, not simply copy the order of items in an old menu.

Anchor links need to be set up carefully

An anchor is a URL with a fragment after the # symbol that points to a specific element on the page. It is useful for long content, but it should not lead to empty space or a decorative image without context. Put the target anchor on the heading of a meaningful section. That way, visitors can see where they have landed and continue reading.

Check the anchors after publishing and letting the page load fully. Click a button, copy the URL from the browser’s address bar, open it in a new tab, and make sure the page opens in the right place. Then test the same path while logged out. Sometimes an anchor is visible to the editor, but its block is not published, belongs to a template, or behaves differently in the page builder. This check catches the problem before visitors do.

Pay special attention to a fixed header. If a heading is hidden behind the header after you click a button, do not assume the link is wrong. The URL and target block may be correct; the scroll offset may be the problem. Look for a built-in theme setting for anchor offsets or contact the theme developer with specific details: the URL, the heading, and how much of it is covered. That is more useful than asking them to "fix the buttons."

How many items should the first set have?

There is no universal number, but there is a practical limit for a first setup: if readers cannot take in the options at a glance, shorten the set or split it into two. Three to five items are usually enough for local navigation. Six or seven may work if the labels are very short and the items have equal weight. More options need a particularly clear structure; otherwise, the button menu becomes a second, less convenient main menu.

Check the longest label in the language your visitors will actually read. Do not judge the layout based only on an English or test label. "Schedule" and "Sign Up" behave differently from a longer label such as "More Details." If your site is localized, check each language separately. A translation can make a label longer, change word order, and affect the available width. It is better to leave room than to shrink text until it is hard to read.

Do not repeat a button without a reason

It is fine to show the set again at the bottom of a long page, but only if it serves a new decision point. For example, after a long section about the modules, you could show two buttons: "View the Schedule" and "Sign Up." Do not repeat the entire row of "Program - Modules - Schedule - Pricing - Sign Up" after every section. Visitors have already seen the navigation, and repeating it can make the content feel like it is not trusted to stand on its own.

If you need one main path, add one clear link in the relevant section. A link to the application form makes sense after pricing; a link to a consultation may fit after the examples. Button Menu helps organize multiple paths; it is not a replacement for an ordinary in-text link.

Maintaining the menu after publication: who changes what

Navigation rarely stays the same. A page gets a new section, a service is discontinued, a form moves, or a program changes its structure. Without a maintenance routine, button links gradually point to outdated sections and undermine visitors’ trust. Button Menu has one advantage: it gets its links from a WordPress menu, rather than from a set of links manually added to every paragraph. But that only helps if someone clearly owns the menu and follows a consistent publishing process.

Name an owner and document where to edit the menu

For each button set, it helps to record three things: the name of the source or duplicated menu, the URL of the page with the shortcode, and the editor responsible for it. You do not need extensive documentation. A line in an editorial note is enough: "The Program page uses the 'Program - Buttons' menu; its shortcode is after the introduction; the training editor owns it." This can prevent someone from changing the main menu when they think they are editing only the program page.

If your site has several similar menus, give each one a functional name rather than a number. "Buttons 2" will soon lose its meaning. "Audit Service - Local Navigation" will still explain the menu’s purpose a year later. This does not affect visitors, but it greatly reduces the chance of someone making a mistake in WordPress.

A safe order for changing a link

Suppose you need to change "Schedule" to "Dates." First update the target section or page and make sure the new URL works. Then edit the item in the relevant menu. After saving, open the published Button Menu page and check the label, URL, and appearance. If the site uses a cache, clear only the necessary layer and check again as a guest. Remove the old section only after that, if you no longer need it.

This order matters for anchors. If you remove an old anchor first and forget to update the menu link, visitors may land at the top of the page or fail to reach the expected content. If you publish the new section first and then change the link, both paths remain usable briefly. That is safer than rebuilding everything at once.

Check after updates to the theme, plugin, or cache

After updating the theme, do not check only the home page. Open every page that uses Button Menu. Themes often change link styles, container widths, spacing, and sticky header behavior. The plugin may still output the right data while the layout becomes harder to use. A list of page URLs with button menus helps you check the places that depend on the presentation.

After updating Button Menu itself, check the basic chain: can you open its settings page? Is the right set selected? Is the shortcode still there? Do all the buttons appear? Do the links work? Has the layout changed on narrow screens? Do not judge an update only by whether it caused a critical error. A small CSS change might not break the page technically, but it could make an important path hard to see.

How to prepare a support request

If you need to contact the author or site developer, describe a problem that can be reproduced. Include the test page URL, expected behavior, what actually happens, the steps leading up to the issue, your active theme, WordPress and PHP versions, related optimization plugins, and a screenshot. Do not include personal data, admin URLs, keys, or credentials in a public request. A precise description makes it less likely that you will get a generic reply telling you to clear the cache.

For Button Menu, include two details in particular: the name of the source menu and where the shortcode is placed. If the developer can see that the menu has five items but the page shows three, they can quickly check filtering, nesting, or a configuration problem. If all they see is "the buttons don’t work," they have to guess where the issue is.

A rollback plan that preserves the links

A resilient site should continue to work if the plugin is temporarily disabled. Keep your regular URLs and important anchors, do not hide the only route to a critical section inside a complex effect, and do not edit core files. If you need to disable Button Menu while troubleshooting, replace it with a simple bulleted list of links or the page’s built-in navigation block. It may be less polished, but visitors will still have a path forward.

This plan does not mean the extension is unreliable. It is standard engineering practice for any third-party site component. If the plugin does not pass testing in your current environment, it is better to preserve clear links and choose a compatible solution than to keep an effect at the cost of unpredictable navigation.

Review the setup before rolling it out across the site

Once the first set works, it is tempting to add similar buttons to every page. Before you do, run a quick review. This is not busywork; it helps keep a useful local tool from becoming general visual clutter. Consider the page’s purpose, number of paths, relationship to the main menu, accessibility, and ongoing maintenance.

Questions about the content

• Does each item answer a different visitor question, or does it repeat the next button in different words?
• Can visitors understand the label without an icon, hover effect, or extra explanation?
• Does each button lead to an existing section, page, or form with the expected content?
• Does the order match a natural decision process: understand the topic, review the details, then take action?
• Does the local set repeat links that are already easy to find in the header without adding anything useful?

Questions about the presentation

• Is there enough contrast between the text and background in the regular, hover, and focus states?
• Does the row stay within the page on a narrow screen, and can visitors still read the labels?
• Does the set have a clear hierarchy, with one primary path if needed and several secondary ones?
• Does the button menu compete with the main heading, form, or primary call to action?
• Is animation the only way visitors can tell that an item is interactive?

Questions about maintenance

• Is it clear which source menu the shortcode uses?
• Is there a copy if the set differs from the site’s main navigation?
• Have you checked the result after clearing the cache and while logged out?
• Do you have a simple temporary set of links ready in case the plugin is disabled?
• Have you avoided editing Button Menu files directly, where updates would overwrite your changes?

If you cannot answer one of these questions clearly, do not add another set. Fix the one you have. The number of button menus is not a measure of quality. A better measure is how often visitors get a shorter, clearer path to the section they need.

+

Measure whether the button menu is actually helping

After installing Button Menu, it is easy to judge it by its appearance: does the color match? Do you like the animation? Are the icons aligned? But the more important question is whether visitors can reach the content they need more easily. You do not need a complex analytics project to get a useful answer. Choose a few tasks you can observe, test them on the page, and repeat the test after changing the structure.

Define one action for each button

Each button should have a measurable expected outcome. For "Pricing," the outcome is a section with clear pricing, not merely a page scroll. For "Sign Up," it is a visible, usable form or a separate registration page. For "Modules," it is the start of the program section. If you cannot name the outcome, do not add the button; it is not part of a real user path.

Make a simple table in a working note, not on the website: label, target URL, expected heading after the click, how to check it, and who owns it. This is more useful than a general feature list. When the page changes, the editor can see that "Questions" leads to a specific section, not just an arbitrary point lower down.

Test all five paths

Open the page as a guest and follow each main path. First find the menu without scrolling, then click a button, confirm that the right section loads or opens, and check that you can return to the page content. Do not test only the first button. The last items are often the ones with the longest labels, outdated URLs, or untested anchors.

For an external link, check that it is clear the visitor is leaving the current page. For an anchor, make sure the heading is not hidden behind a sticky header. For a form, confirm that the context is preserved after the click: visitors should be able to tell which service or program the form is for. For a child item, check that visitors can open it without having to hover nervously over a menu that keeps disappearing.

Compare different states, not just the admin view

The same set can look different to an editor, a guest, someone with a cleared cache, and someone using a narrow screen. Editors often see an admin bar that affects spacing and some CSS. Guests see the published HTML, which may be cached. That is why the final check should always happen at the public URL while logged out.

Also compare the regular and hover states. In its regular state, a button should make sense on its own: the label is readable, the contrast is strong enough, and the clickable area is easy to spot. Hover should simply confirm that the button is interactive. If a label only becomes clear after its color changes or it moves, simplify the styling.

Track changes without promising an automatic outcome

A button menu may make it easier to find content, but it does not prove that inquiries, sales, or search visibility will increase. Do not attribute an outcome to the menu if it could also be due to revised copy, an advertising campaign, seasonal changes, or a new form. If your site already uses an approved analytics tool, you can track visits to destination pages or form events under its existing privacy policy. First, make sure the paths themselves are clear and work as expected.

A simpler sign that the menu is helping is that visitors find the answer they need without going back to the header or searching the page for a long time. If no one uses the buttons, adding more color is not necessarily the answer. They may be too high on the page, unrelated to the visitor’s question, or duplicating a visible table of contents. Change one thing at a time: the label, order, placement, or number of items.

Recheck the meaning after editorial changes

Menus often go out of date because the content changes, not because of the plugin. A new price is added, the questions section moves, or the form is replaced, but the button remains the same. Set a simple publishing rule: whenever a heading, URL, anchor, or order of key sections changes, check the related Button Menu set too. It takes only a few minutes and helps prevent the most noticeable element on the page from leading to outdated information.

Pay particular attention to pages edited by different people. The writer may not know there is a separate shortcode using a duplicate menu. The menu administrator may not know that the copy appears on an important landing page. A clear menu name, a short note about where it appears, and a final guest check connect these roles without a complex management system.

A minimal post-launch report

After the first successful setup, keep a short internal report with the date of the check, the page URL, the button set’s name, which links you tested, how it looked on a narrow screen, the cache state, and any notes. This operational information does not need to appear in the public guide. It helps the site team distinguish a new problem from the original setup a few months later.

If the check reveals a conflict with the theme or block editor, do not try to hide it with individual colors or random CSS changes. Record the exact symptom, keep regular links as a fallback, and decide whether further adjustments are worthwhile. Publish the most predictable path for visitors, not the most eye-catching one.

When CodeCanyon Button Menu is a good fit

CodeCanyon Button Menu has a clear purpose on a WordPress site that already has a good menu but needs a compact, more visible set of buttons on a particular page. Its strength is not replacing every kind of navigation; it is the direct workflow: choose an existing menu, make a copy if needed, choose a style, get the shortcode, and display the menu in the content. That is why it is worth putting effort into the link structure and the visitor’s path before you start styling.

If your project needs this kind of local navigation, prepare a copy of the menu, test it on one page, and only then roll it out elsewhere. You can then download CodeCanyon Button Menu and install it on a test copy of the site. The best outcome is not a colorful set of buttons on its own, but a clear path that quickly takes visitors to the information or action they need.