Category: How to

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.

10+ Best 3 Column WordPress Themes Free Download

10+ Best 3 Column WordPress Themes Free Download

You can find many magazine and news website using 3 column themes. 3 column themes are useful because it has a fluid and functional layout design. Columns on sites give extra space for you to place modules, widgets, or even content or catches to clarify what your website is about or to push individuals to your social media accounts.

In case you’re searching for some amazing 3 column WordPress themes free download, then we’ve selected 120+ best 3 column themes for you underneath.These WordPress Themes are useful for blog, news and magazine websites.

Hueman – 3 column WordPress Themes free download

Download: http://presscustomizr.com/hueman/

Demo: http://demo-hueman.presscustomizr.com/

3 column wordpress themes free download 01

Hueman is a 3 column WordPress themes free download with responsive layout and incredible cutting-edge features. Its versatile layout settings and broad styling options allow users to build a unique website.

You have the control on how your widgets or sidebars will show on your site. You can assign each widget area to individual page or post. This free 3 column magazine theme guarantees that your website will work spectacularly on desktops or mobile devices. Without any doubt, Hueman is the all-in-one theme for your blogging needs. It is super flexible, well-made, and user-friendly that you can utilize for free.

MesoColumn

Download: https://wordpress.org/themes/mesocolumn/

Demo: http://demo.dezzain.com/?wptheme=mesocolumn

3 column wordpress themes free download 02

MesoColumn is a WordPress theme that supports HTML5 and CSS3. This theme’s versatility is really amazing, given its compatibility with most of the useful plugins in the industry: BuddyPress, BBPress, and Jigoshop.

Commercializing goods and services is the key to any successful online marketing strategy. It helps generate brand awareness and increases revenue. With WooCommerce plugin integrated with, it makes all these things possible, assuring that your online store will be a remarkable one.

MesoColumn also offers unlimited color customization options and a versatile menu for pages and categories for personalizing your website, give you an ability to create your own unique and recognizable brand image.

You can also translate your website to your language with RTL support. Besides, MesoColumn is also a mobile-friendly theme with fully support responsive layout.

DW Minion

Download: https://www.designwall.com/wordpress/themes/dw-minion/

Demo: http://demo.designwall.com/dw-minion/

3 column wordpress themes free download 03

This straightforward and clean theme is ideal for blogging. It features a responsive design and has been optimized for social sharing. This is one of the 3 column WordPress themes free download, which provides responsive layout with sharp design.

DW Minion is ideal for using as a magazine site or a blog site.

DW Minion supports post formats.

LunaMag

Download: https://freewpthemes.co/lunamag/

Demo: https://flexithemes.com/demo/LunaMag/

3 column wordpress themes free download 04

LunaMag is a very powerful, fully responsive and super clean design WordPress theme. Specially designed for blogs or News/Magazine websites.

LunaMag is one of the 3 column WordPress themes free download we want to introduce you in this article. It comes with lots of built-in features:

Built in theme options page

  • Responsive Design
  • Shortcodes + Shortcode Generator in post editor
  • Featured Image Ready
  • Custom Page Templates
  • SEO Optimized
  • Featured Posts Slider
  • WooCommerce Ready
  • 7+ Custom Widgets
  • Translation Ready
  • Contacts Page Template
  • Compatible with latest WordPress versions
  • Compatible with all major browsers: Chrome, IE, Safari, Firefox

Poseidon

Download: https://wordpress.org/themes/poseidon/

Demo: http://preview.themezee.com/poseidon/

3 column wordpress themes free download 05

Poseidon is an elegant designed 3 column WordPress themes free download featuring a beautiful fullscreen image slideshow. The spacious white layout and clean typography make it great to share your stories.

Poseidon is a free multi-purpose WordPress theme. It comes with a homepage layout, full-width slider, and multiple page templates. You can use the theme as a simple blog or easily create a news or magazine website with the Magazine Homepage template widget-based.

Semicolon

Download: https://wordpress.org/themes/semicolon/  

Demo: https://semicolon.kovshenin.com/  

3 column wordpress themes free download 06

Semicolon is a responsive 3 column WordPress themes free download magazine theme. It uses a grid based layout utilizing the featured images. This theme is designed for clear readability. Semicolon also provides beautiful page templates for your website.

Hitchcock

Download: https://wordpress.org/themes/hitchcock/  

Demo: http://andersnoren.se/themes/hitchcock/  

3 column wordpress themes free download 07

Hitchcock is a theme mainly used for designers and photographers portfolio websites. It has a responsive website design with infinite scroll, gallery support, custom header image and three column layout design.

Hitchcock makes logos, illustrations, and photographs even more enticing with the brilliant design way in which it uses single column posts to make sure that all distractions are eliminated so people can notice the post quickly.

You will be able to get an overview of your work very easily with the help of the 3 column grid layout used in the theme. You can also make a bigger impression on your viewers with a full-size background image. The typography and layout scale brilliantly to match different platforms, so it should not be a big problem. You can pick the logo you want, choose your own accent color and also change the background image to something that suits your need. You can easily work on Hitchcock to give it a personal touch.

Sketch

Download: https://wordpress.org/themes/sketch/  

Demo: https://sketchdemo.wordpress.com/  

3 column wordpress themes free download 08

If you want to display your portfolio on a website, then Sketch – a 3 column WordPress themes free download – can be a good theme to use. Whether you want to display photographs, illustrations, designs or videos, Sketch is a great idea to try.

The light and clean of the theme helps the audience focus on your projects. It minimizes visitors’ distractions and makes every post stand out for the viewers. It’s fully responsive feature ensures that it can adapt to different screen sizes without collapsing your site’s structure, making your work look unwanted.

ColorMag

3 column wordpress themes free download 09

Download: http://themegrill.com/themes/colormag/  

Demo: http://demo.themegrill.com/demos/?theme=ColorMag  

ColorMag is a modern and clean theme for newspapers, magazines, and publishing sites. The theme has a beautifully elegant and look, with featured slider, colorful buttons, and an intuitive content structure. ColorMag has a multipurpose design, which fits any idea you want to write about.

Features:

  • Responsive design
  • primary color
  • WooCommerce compatibility
  • boxed and wide layout option
  • 5+ custom widgets and 15+ widget areas
  • 1 custom menu
  • 6 social icons

IsleMag

Download: http://themeisle.com/themes/islemag/  

Demo: http://themeisle.com/demo/?theme=IsleMag  

3 column wordpress themes free download 10

A modern and catchy theme for news and magazines, which comes with a friendly design. IsleMag lets you post great image galleries, display ads, add various social media feeds, reviews, and use different colors to make its appearance even catchier. The theme provides a boxed layout style and beautiful sliders and carousels.

Features:

  • Carousel slider
  • Instagram feed
  • Responsive design
  • Review system
  • Ad banners
  • Widgetized footer
  • Unlimited colors

Karen

Download: https://www.wpkube.com/themes/karen-responsive-blogging-theme/  

Demo: http://www.wpkube.com/preview/?theme=Karen  

3 column wordpress themes free download 11

Karen is a 3 column WordPress themes free download that is light on resources and big on delivery with its fantastic functionality and minimalistic looks. This theme has all the right functions for running your WordPress blog.

Karen has handy features that allow webmasters to make easy tweaks to its appearance in order create a truly unique website. You can customize all the color elements on your own using an intuitive color picker for background, text, and links.

There are many different page and post types to help cater to a niche blog. In addition to this, there is a handy widget that helps your audience to navigate to recent posts, comments, categories or archives quickly. You can also choose where the sidebar should be displayed on. Webmasters are also given access to meta tags and can assign thumbnails to post so you can give a more personalized look that provides more value to the reader.

MH Magazine Lite

Download: http://www.mhthemes.com/themes/mh/magazine-lite/

Demo: http://www.mhthemes.com/lite/?theme=magazine_lite

3 column wordpress themes free download 12

A simple theme for news and magazines sites, with a clean and multipurpose look. It comes with a minimalist design, a small featured slider on the homepage, a static custom background, and simple post categories.

Features:

  • Responsive design
  • Fully widgetized
  • Contact Form 7
  • Custom widgets
  • Translation ready
  • FlexSlider 2
  • Custom background

This is the free version of MH Magazine WordPress Theme with only basic functionality. MH Magazine is ideal to create excellent online magazine website at a glance. In case you need additional features, custom widgets, and extended options, you can upgrade to the premium version for more flexibility and excellent theme support.

SuperMag

Download: https://wordpress.org/themes/supermag/

Demo: http://www.demo.acmethemes.com/supermag/

3 column wordpress themes free download 13

SuperMag, an ultimate 3 column WordPress theme free download for magazine. SuperMag is specially designed for blog, news, and magazine, suitable for any magazine style site. SuperMag is also a fully supported advertisement theme, and you can add advertisement added from customizer and widgets. SuperMag is a highly customizable theme. You can customize sidebar, header, footer, main homepage, widgets and inner sections.

You can also change the whole site color with a single click. Moreover, you can design your site widgets yourself, develop your website without touching a single code line.

Top WordPress Translation Plugins for Going Multilingual

Top WordPress Translation Plugins for Going Multilingual

Apart from attractive content, responsiveness, and SEO friendliness, you may get limited a huge number  of potential site visitors, because not everyone speaks the same language. One of the easiest ways to connect your content with a wider readers is with a plugin. Today I’m going to look at some free and premium plugins for making your WordPress site go multilingual.

But first…

Why Multiple Languages should be required on Your Site?

  • Improve and extend the functionality of your WordPress sites
  • Increase the traffic and bring more viewers
  • Represent a massive opportunity for many site owners

Thus WordPress translation plugins are necessary in attracting many more audiences. The following ready-made plugins can improve the functionalities of any website in a matter of minutes without any code. Let’s crack on with the list! Continue reading “Top WordPress Translation Plugins for Going Multilingual”