Hi there and thank you for purchasing 'TapTap'! This documentation will cover the ins and outs on how to get your newly-purchased WordPress plugin up and running, fast. Our goal was to make everything as simple and straighforward as possible, so without further delay, let's get you started!
Installing the plugin couldn't be simpler.
Once you've activated the plugin, you need to build and attach a menu to Taptap. Read the next step for instructions on how to go about that.
To attach a menu, you'll first need to build it through the standard WordPress menu editor:
Please note: As of version 1.3, menu descriptions can be added to single-level menu items. If you don't see the "Description" text area when editing a menu item, be sure to enable it by clicking the "Screen Options" tab in the top right corner (under Appearance > Editor) and then ticking "Description."
To add an icon to a menu item, you simply need to insert the icon code infront of the actual menu item's Navigation Label.
<i class="fa-solid fa-anchor"></i>Anchor
Now check your site and you should see the menu item inside the dropdown menu. Now we'll explain what does what.
What you entered into the "Link Text" textfield were both the icon and the text label.
This part is the icon: <i class="fa-solid fa-anchor"></i>
...and this part is the text label: Anchor
To see the full range of icons available, head to the Font Awesome website here.
To use one of the icons available there, simply click on it and copy its HTML snippet into the WordPress menu builder as described above.
For example, let's say you want to link to your Twitter account.
In that case, the full Navigation Label can be:<i class="fa-brands fa-twitter"></i>Twitter
Or perhaps you'd like to link to page that lists your podcasts. In case, this would work:<i class="fa-solid fa-microphone-lines"></i>Podcasts
Or, as a final example, you wish to link to
a gallery page: <i class="fa-solid fa-camera-retro"></i>Image gallery
Starting with version 5.5, the Line Awesome icon set is also included in TapTap. Making use of it is very similar to Font Awesome. To see the icons available, simply head to https://icons8.com/line-awesome, click on the icon you'd like to use and copy-paste the code into your menu.
A few examples that you can paste into the menu editor:
<i class="las la-charging-station"></i>Charge
<i class="las la-paw"></i>Puppy
As of version 5.0, TapTap includes a new image-based menu layout that can be used instead of or in addition to the main drop-down menu. To make use of it, simply add your menu to the TapTap: Image-Based Menu menu location.
Please note that the image-based menu supports up to nine top-level menu items and unlimited sub-menus. All of its settings reside under Appearance > Customize > TapTap Plugin > Image-based MenuAs of version 5.5, we've also included a horizontal menu layout. Just add your menu to the TapTap: Horizontal Menu menu location to make use of it.
An element unique to this layout's design is allowing the grouping of menu items under a joint title. To make use of this feature, create a new menu item as you normally would (under Appearance > Menus) and give it the ".taptap-title" class (if the CSS Classes field is not visible to you, you can enable it from the Screen Options tab in the top-right of the screen). Then just add your menu items below it.
We've put quite a lot of effort into making sure that TapTap can be customized to great extent. Whether you just wish to change a few colors here or there and change a few minor settings, or make it essentially unrecognizable from the default appearance, the goal was to give you easy-to-use tools that would allow you to extensively modify the plugin's appearance.
Modifications can be made under "Appearance → Customize". When there, simply enter one of the following sections to make your customizations:
We've separated the three different menu types (vertical, image-based, horizontal) into their own sections with each having their own settings. Each item here comes with an explanation to make sure everything is as straightforward as possible.
If you'd like to use a custom element to trigger the menu, you only need to give the element the "taptap-custom-activator" class. This is more of an advanced feature and you're expected to know what you're doing but as a quick example anyone can do, try this: Simply copy-paste the following into the WordPress editor's 'text/HTML' view: <span class="taptap-custom-activator">OPEN MENU</span>
Afterwards, the words "OPEN MENU" will activate the TapTap menu on that post/page.
Alternatively, if you're comfortable with making such changes on your site and
have the know-how, adding the same class to a custom button for example
will have the same result. Meaning you can use any link or object to
trigger TapTap just by giving it the taptap-custom-activator class.
If you'd like to hide the TapTap menu on a specific post or page, locate the "TapTap plugin" metabox as you're editing said post/page. Within it, simply enable the "Hide TapTap menu on this post/page" option. If you don't see the metabox, you may need to enable it from the "Screen Options" tab in the top-right corner of the screen.
Should you find something unclear about this documentation and have a question, then you can easily reach us through our CodeCanyon profile here (use the bottom-right contact form): http://codecanyon.net/user/BonfireThemes