How to Increase WordPress Menu Items Limit

If you are going to add too many menu items in your WordPress then beware, on saving your menu you will lost menu items that are beyond WordPress menu items limit. This thing had happened to us and we did a lot of extra work to add those menu items again but only after increasing this limit.

This limit is not imposed by WordPress but by your web hosting server because of some security reasons. In PHP, there is a thing called post vars that controls menu items. By default maximum post vars are much limited as most of the websites require only a few menu items.

First Method

Increasing max_input_vars

To increase input_vars add the following code in your php.ini file

max_input_vars = 3000;

Note – Create a text file name php.ini and add this code to that file and place this file in your WordPress root. If your host doesn’t support custom php.ini file get their support to add this code to php.ini file.

Second method

1.Add php.ini in wp-admin folder

Create a php.ini file with the below given code and put it into wp-admin folder

max_input_vars = 3000;

2.Add .user.ini file

Create a file .user.ini and add the following code to it and try placing it in WordPress root or in wp-admin folder;

max_input_vars = 5000;

Hopefully one of the method should work for you.

Convert a Menu to a Dropdown for Small Screens

We come across the digital world where the technology is at its pace. As the time passes the websites are compatible to mobile devices, but still there are some issues due to which the website cannot be made device compatible. So, what to in this case.

Here comes the solution:


The HTML for these two menus is different. As far as I know, you can’t style <select>and <option> elements to look and behave like <a>s or vice versa. So we need both. You could just put both in the markup. That’s what Five Simple Steps does:


    <li><a href="/" class="active">Home</a></li> 
    <li><a href="/collections/all">Books</a></li> 
    <li><a href="/blogs/five-simple-steps-blog">Blog</a></li> 
    <li><a href="/pages/about-us">About Us</a></li> 
    <li><a href="/pages/support">Support</a></li> 
    <option value="" selected="selected">Select</option> 
    <option value="/">Home</option> 
    <option value="/collections/all">Books</option> 
    <option value="/blogs/five-simple-steps-blog">Blog</option> 
    <option value="/pages/about-us">About Us</option> 
    <option value="/pages/support">Support</option> 


Let’s go with that for now.


By default we’ll hide the select menu with display: none;. This is actually good for accessibility, as it will hide the redundant menu from screen readers.

nav select {
  display: none;

Then using media queries, we’ll do the switcheroo at some specific width. You can determine that on your own (here’s some standard breakpoints).

@media (max-width: 960px) {
  nav ul     { display: none; }
  nav select { display: inline-block; }

But now you gotta maintain two menus?

Well yeah, that’s one concern. Maybe your menus are created dynamically and you can’t control the output easily. Maybe you and hand crafting menus but want to make sure you don’t accidentally get your menus out of sync. One way we can fight this is to dynamically create the dropdown menu from the original.

Using jQuery, we can do that with just a few lines of code:

// Create the dropdown base
$("<select />").appendTo("nav");

// Create default option "Go to..."
$("<option />", {
   "selected": "selected",
   "value"   : "",
   "text"    : "Go to..."
}).appendTo("nav select");

// Populate dropdown with menu items
$("nav a").each(function() {
 var el = $(this);
 $("<option />", {
     "value"   : el.attr("href"),
     "text"    : el.text()
 }).appendTo("nav select");

Then to make the dropdown menu actually work…

$("nav select").change(function() {
  window.location = $(this).find("option:selected").val();


Convert a Menu to a Dropdown for Small Screens

<!DOCTYPE html>
<meta charset=’UTF-8′>
<title>Convert Menu to Dropdown</title>
* {
margin: 0;
padding: 0;
h1 {
font: 300 21px “HelveticaNeue-Light”, “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, “Lucida Grande”, sans-serif;
width: 500px;
margin: 0 auto 15px;
nav {
display: block;
width: 960px;
margin: 100px auto;
text-align: center;
} Continue reading