How to Design Navigation Menus in WordPress

Navigation menu is one of the first elements which draw the attention of site viewers. So why don’t you change the appearance of your menu to make the navigation more interesting? Simply, you can change the colors or add some eye-catching looks. Of course, your WordPress theme have to manage the look of navigation menus. Thus, you can add CSS to customize it to meet your requirements. And in this post, I will show you an in-depth guide on how to design navigation menus in your WordPress site.

There are two common ways to style your navigation menus: using WordPress plugins, and adding custom code. Let’s get started now!

Method 1: Using a Plugin to Design Navigation Menus

All of WordPress themes use CSS to customize the navigation menu. However, not all of us are comfortable to edit the theme files or add CSS on this, or good at coding knowledge. Don’t worry about it. WordPress offers tons of effective plugins to help you with this task. They save you from editing theme files and adding any code. Especially, you just install and activate it in a matter of minutes, and then it will complete the task successfully.

Among a wide range of WordPress plugins, the CSS Hero plugin is highly recommended for you. This is a premium plugin which enables you to style your own WordPress theme without adding any single line of code. This means no HTML and CSS here. With this plugin, you can also receive more than 30% discount on the purchase.

Using the CSS Hero plugin has never been easier. Once activation, you will get the CSS Hero License key. Next, you just follow the on-screen instructions, and redirect back to your site in a few clicks.

After that, on your WordPress admin toolbar, you will see the CSS Hero button, click on this. 1

CSS Hero provides you a WYSIWYG (What you see is what you get) editor. Now click on this button, and it will take you to your site with a floating CSS Hero toolbar visible on the screen.2

At the top of the editing screen, you need to click on the blue icon.

Now start to style your navigation menu. Take your mouse around the menu, and this will highlight each element by showing borders around it. Clicking on this will show all options that you can edit.  3

They may be menu item, menu navigation, navigation menu container, and much more. If you want to change the textcolor of all items in your navigation menu, you choose the menu navigation that affects the entire menu.

In addition, CSS Hero will show you more properties such as editing text, background, border, margins, padding, so on.4

To change them, click on the item which you want to style. Especially, the CSS Hero offers a simple interface, ensuring the easiest changing process for you.

For example, the picture below show the nice interface when changing text. Select your desired fonts, change text color, size and other options.5

Once making change, you can see them live on the theme preview.6

Remember that once you are satisfied with all changes, you have to click on the save button to store all of them.

On top of that, with this plugin, you can undo any changes that you have done. Because CSS Hero stores a complete history of your changes, you can go back and forth between changes.

Method 2: Manually Style WordPress Navigation Menus

If you master at coding skills and themes, this method is for you. Because it requires you to edit theme files.

To make customizations to your WordPress theme, you should create a child theme. So you can add custom CSS in WordPress without changing your theme files.

WordPress navigation menus are placed in an unordered list.

It will be on a list with no CSS classes associated with it, if you used the following tag:

1 <?php wp_nav_menu(); ?>

The unordered list may be named “menu” with each list item containing its own CSS class.

This can work if you have only a menu location. But, many themes have multiple locations that you can show navigation menus.

If you only use the default CSS classes, it may conflict with menus on other locations. This is the reason why you need to define the CSS class and menu locations as well. Chances are that your theme is already doing that by adding the navigation menus with code like this:

1 <?php

 

2     wp_nav_menu( array(

 

3         ‘theme_location’ => ‘primary’,

 

4         ‘menu_class’     => ‘primary-menu’,

 

5          ) );

 

6 ?>

This tells WordPress where the theme displays primary menu. Also, it adds a CSS class primary-menu to the navigation menu.

Now, you can design your own navigation menu using the following CSS structure.

1 #header .primary-menu{} // container class

 

2 #header .primary-menu ul {} // container class first unordered list

 

3 #header .primary-menu ul ul {} //unordered list within an unordered list

 

4 #header .primary-menu li {} // each navigation item

 

5 #header .primary-menu li a {} // each navigation item anchor

 

6 #header .primary-menu li ul {} // unordered list if there is drop down items

 

7 #header .primary-menu li li {} // each drop down navigation item

 

8 #header .primary-menu li li a {} // each drop down navigation item anchor

Don’t forget to replace #header with the container class or the ID your theme uses.

With this structure, you can completely change the appearance of your menu. But some classes are automatically added by WordPress to each menu and menu item. Classes below let you customize your menu even further.

1 .current_page_item{} // Class for Current Page

 

2 .current-cat{} // Class for Current Category

 

3 .current-menu-item{} // Class for any other current Menu Item

 

4 .menu-item-type-taxonomy{} // Class for a Category

 

5 .menu-item-type-post_type{} // Class for Pages

 

6 .menu-item-type-custom{} // Class for any custom item that you added

 

7 .menu-item-home{} // Class for the Home Link

In addition, WordPress allows you to add CSS classes to each menu item within the admin area. You can take an advantage of this to style menu items. For example: adding image icons with your menus, changing colors to highlight a menu item.

Go into Appearance > Menus page, and then click on the Screen Options button. 7

Once you have a tick on that box, an additional field is added when you edit each menu item.8

Now you can add this CSS class in your stylesheet. This only change the menu item with the class you added.

That’s all when you want to design your own navigation menus. I hope that this guide can help you more on styling menu. If you liked this, please share it with your friends. Thank you for reading!

 

7 ways to improve WordPress security

1

WordPress is a secure platform. However, its security still a big concern for us. We can do a lot of things to improve the security even when we are low-tech. In this post, we would like to introduce to you some of suggestions on how to improve WordPress website security.

  1. Don’t use admin as a username

It is very easy step but you should care about as a WordPress user. You just need to keep in mind this issue to avoid attacks because most of attacks target your wp-admin. Of course, attacker can still list user ID and name. We cannot eliminate all risk attach, we just can reduce it to the minimum.

You can create a new user in WordPress easily. You can go to User >> New User and make that a user with administrator rights, after that remove admin user. You don’t need to worry about the pages and posts which are created by admin user because WordPress will ask you to delete all content or assign it to a new user.

  1. Use a less common password2You should try to avoid using common password or use the same password for many different types of account. Complex, long and unique password will play strong role in security because it makes harder for attackers. You can look for some useful tools such as https://1password.com/ or https://www.lastpass.com/ as each of them has password generators. You just need to type the length and the password will be generated. You save the link, password and move on with your day. You can decide the length of password depending on how secure you want the password to be. Remembering to avoid using some popular characters such as * or #.
    1. Add Two-Factor Authentication

    Brute Force attacks are still a problem whether you are not using admin or using a strong password. In this case, two-factor authentication is one of the keys to reduce the attacks. It’s a bit complicated but for now, it’s your Fort Knox. Its name implied its essence: two forms of authentication. It contributes to enhance security at your access points. You may hear about it for the first time but in fact, you are still using it for Gmail, Paypal and other works.

    1. Hide wp-config.php and .htaccess

    This step is really simple especially when you are editing your .htaccess by using Yoast SEO for WordPress.

    For better WordPress security, you’d need to add this to your .htacces file to protect wp-config.php:

    1 &lt;Files wp-config.php&gt;
    2 order allow,deny

     

    3 deny from all
    4 &lt;/Files&gt;

    It can prevent the file from being accessed. You can use the same code for your .htaccess file by the way

    1 &lt;Files .htaccess&gt;
    2 order allow,deny

     

    3 deny from all
    4 &lt;/Files&gt;
    1. Use WordPress security keys for authentication

    Authentication keys and salts are in correlation with each other to protect passwords and cookies in transit between the browser and web server. These authentication keys are installed in different random variables. You can change it easily by getting a new set of keys and add these. You page will be refreshed and you will have a fresh set. You can see new set of keys here https://api.wordpress.org/secret-key/1.1/salt/

    1. Disable file editing

    If your files are hacked, the easiest way to change them will be going to Appearance >> Editor in WordPress. To lift your WordPress security, writing of these files could be disabled via that editor, then open wp-config. Php and add this code:

    1 /define(‘DISALLOW_FILE_EDIT’, true);

    Your templates are still edited via your favorite FTP application (not via WordPress)

    1. Limit login attempts

    Your login form is usually targeted by some attacks like Brute Force. You can use All in one WP security and Firewall plugin to change the default URL. After that the number of attempts to login can be limited from a certain IP address. There are several WP plugins that can help you protect your login form. You can experience by yourself to know which one is the best for you.

Top WordPress Plugins For Better Backend Administration

WordPress is a powerful platform which has a great support from plugins. With tons of plugins, you can easily customize your WordPress. You can manage frontend content, improve image performance, detect malicious code, or improve user management, etc.

Although WordPress is structured to fit as many scenarios as possible, you still want to change something like removing menu from the dashboard for particular users or less technically savvy users. This will make users feel better and more easily manage widgets. To do this, the following plugins can give you all that and more to have better backend administration.

1. Adminimize

If you allow your clients to access to the backend, the Adminimize plugin should be considered to install. It enables you to control more on the WordPress backend, you can hide or display for users. This plugin offers some sections which you can manage the administration menu, posts and page editing screen, the Help menu, the menu in the admin bar and so on.   t1

2. Client Dash

Client Dash is an easy to use plugin which can simplify the WordPress dashboard. Once activated, it can replace the default dashboard widget with menus, including the menu, account, summary of website content such as posts and pages.  t2

3. Dashboard Widget Sidebar

WordPress actually has two types of widget, in which the website widget is displayed in the front-end, and another is the widget inside the dashboard. If you want to add the website widget, visit Appearance > Widgets and drag and drop the widgets. With this plugin, you can easily add new widget in the Dashboard through the Widgets menu. t3

4. Remove Dashboard Access

The Remove Dashboard plugin is the powerful one which doesn’t allow your clients to access to your dashboard. You can control and block the dashboard access for non-administrative users.t4

5. Wider Admin Menu

For some plugin, once installed, this will automatically add a new menu in the WordPress administration. But this menu sometimes is longer than the width of WordPress admin menu, so the name is split into 2 lines. With Wider Admin Menu, the width of your menu will be widen in the backend.t5

6. Admin Color Schemer

From WordPress 3.8, it has come with a completely revamped look for the dashboard menu. The new one is designed through SCSS. If you know well about SCSS you can create a new one by yourself. But if you are not up to write SCSS code, the Admin Color Schemer plugin is the right option for you. The only thing you have to do is to install this plugin and customize the dashboard theme with a few clicks.  t6

7. Admin Bar Button

Another choice which can simplify the WordPress admin bar is the Admin Bar Button plugin. It can manage the admin bar at the top when you are logged in. Without spanning sully across the window, the plugin will transfer the bar into a button and will be revealed upon click and hover. It delivers many options through the Settings > Admin Bar Button menu to set the button behaviors and the position as well.  t7

8. WP Help

This plugin will help you instruct your clients or someone who are not familiar with WordPress and how to get in the backend. The WP Help plugin allows you to create a new section below the Dashboard menu that you can add hierarchical sections of tutorials. For example: creating posts, pages or editing posts.   t8

9. Dashboard Notes

As the name suggests, the Dashboard Notes plugin will let you add notes to the dashboard. All notes which are added will appear at the top of the dashboard widget. Also, you can change the color of the note, or add better logo to grab one’s attention. This is quite useful when you want to notify your users with backend access of something importantt9

10. WP-Hotkeys

WP-Hotkeys is a great plugin in adding keyboard shortcuts to your WordPress administration. Thus you can navigate through the backend area, such as the post editing screen, by using keyboard. If you master keyboard or enjoy using keyboard rather than others, this plugin may be nice for you.

Here are 10 top WordPress plugins which can help you manage better backend administration. Is there something missed? Which one you choose for your WordPress admin? Please share it in the comment below. Thank you for reading!

 

Top Reliable Providers Of WordPress Themes

WordPress is a powerful platform coming with tons of versatile themes. Choosing the right theme from a reliable providers is always a challenging task for any site owners. The themes should be structured with the the clean interface, best code, and offer many cool features and excellent support. So where can you get these themes? There are many studios and development agencies providing themes. To help you decide easier, I have listed top reliable providers of WordPress themes. 1

1. Themefuse

Themefuse is one of the top theme providers with the huge collection of eye-catching and professional themes. All themes at Themefuse are built with advanced features and various functionalities. All are powerful and easy to use. On top of that, themefuse comes with TestLab feature, allowing users to experience the WordPress back-end admin and check the compatibility with your site. Of course, this provides full support on your site.

2. WPMUDEV2

For more than 10 years as a part of WordPress community, WPMUDEV has become a reliable provider. Stunning designs, powerful functionality, creative layout, etc. All are available on WPMUDEV themes. Themes provided by WPMUDEV is highly customizable, so you can design the theme to fit your style. Drag, scale, or position elements of your themes, how convenient it is! In addition, WPMUDEV themes can be integrated with many other plugins to boost the performance of your site.

3. TemplateMonster3

Founded in 2002, TemplateMonster has owned thousands of WordPress themes. They are well-known for trendy designs and perfect customer support. You can easily pick the right theme for your site, because it offers many categories that can fit your requirements, including functionality, style, or color schemes, so on. Especially, all themes at TemplateMonster come packed with high resolution photos, and the responsiveness. That ensures the best view of your content on any devices with different resolution, from cellphones, tablets, to PCs.

4. Elegant Themes4

Another provider that you can consider is Elegant Themes. It offers sophisticated and neatly designed themes. All are focused on great UI/UX and the best user-friendly navigation. Moreover, you can customize the theme with ease. With the built-in WordPress theme customizer, Elegant themes comes with various theme options, allowing you to change the background, manage custom logo and many more. Thanks to built-in custom post types, adding content to your site has never been easier! With other premium features, you even pick the desired style, typography for your site. Don’t worry about the installation and configuration of Elegant themes, it also provides well-written documentation.

5. ThemeIsle5

If you are looking for a rock solid WordPress themes and excellent customer support, ThemeIsle may be the right option for you. Designed by CodeinWP website, ThemeIsle has provided 10 different theme categories for you to choose the best one. You can upload your Photoshop files and receive high quality themes fitting your way. Its WordPress collection is compared to the diamonds sought by pirates. Let’s try ThemeIsle themes now!

6. Colorlib6

Currently minimalistic  yet powerful design is most prefer in WordPress theme designs. If you want to own a simple one like this, Colorlib will fit your demand. With dozen of theme options, themes from Colorlib is highly customizable, so making it to fit your style is extremely simple. Additionally, these themes are well coded and reviewed by WordPress experts. With themes at Colorlib, your performance of your site can be improved significantly without requiring any coding skills.

7. Teslathemes7

Teslathemes is considered the Netflix for WordPress themes. Teslathemes has provided you more than 60 different WordPress themes which are perfect for your vision. Now you can create any type of website with Teslathemes, from a blog page to a business. All themes are easy to use. All you have to do is subscribe and get 2 or more themes every month. So, your website won’t look the same.

8. WooThemes8

If you are starting a business, and need a good-looking website for your eCommerce store. You can’t definitely skip WooThemes. It is the integrated themes for WooCommerce, a well-known WordPress plugin for online store. They include a parent theme named Storefront and a huge number of child themes. You can buy each individual or the whole package for $399.

9. iThemes9

You can create theme layouts thanks to iThemes. It offers many pre-designed template or make them of your own. Parker, Klein, Anderson, etc. All WordPress themes from iThemes are worth on any penny. These themes come with outstanding features, like responsive, exchange, classic design and allure. Pick the theme you enjoy and give your site an attractive look and feel.

10. Themspond10

Themespond is a quite new member of WordPress community. It provides high-quality, eye-catching WordPress products, including PSDs, HTML templates, themes. All of them can be suitable for any type of website. Themespond comes with beautiful designs and easy-to-use features for both beginners and professionals. They are responsive to ensure the good readability on any devices. Themes from Themespond are also SEO ready, boosting the performance of website.