Add Search box in WordPress Menu

Add Search box in WordPress Menu with, With out using plugin.

By default WordPress Initially check for the search form from searchform.php

And this search form can call using “get_search_form()” function

get_search_form() will display the search form

Add Search box in Menu

To add the search box in menu, we need to add get_search_form() in the menu.

To make changes in menu items – can use “wp_nav_menu_items” filter

function add_search_form( $items, $args ) {
    $items .= '<li class="ht_menu_search_bar">' . get_search_form( false ) . '</li>';
    return $items;
}

add_filter( 'wp_nav_menu_items','add_search_form', 10, 2 );

( if plan to use different search form then the default one using get_search_form, here is an example form wordpress developers

Add this code in functions.php or in a any file and include that file in functions.php or add using plugin.

Its better to create a child theme and create functions.php in child theme and add. by this way you code wont replace when theme updates.

CSS

A sample CSS for an idea

make the menu to float right side of the menu, on medium, large screen

mostly you theme will collapse menu in small screen.

@media screen and (min-width: 767px ) { 
	.ht_menu_search_bar {
		float: right;
	}
}

plugins to add Search box in header menu

Bop Search Box Item Type For Nav Menus

Search box on Navigation Menu

( We did’t test any this plugin to add menu )


Create simple Search Form for Google Custom Search Engine

Create Simple Search Form For Google Custom Search Engine. 

A simple search form, less wait. and no need to load any dependencies to display a search form

simple search form
<div class="ht_search_form">
<form action="https://www.example.com/search"><input id="" name="q" type="search" placeholder="Search" />
<button class="ht_search" type="submit">Search</button>
</form>
</div>

This is the Form with an input filed to enter the search query, and a button to submit the query. ( button in not necessary )

two important thing have to notice here

action="https://www.example.com/search"

to where the form have to navigate ( For Dynamic Website Instead of hard-code this value, can use server side language to add dynamically, WordPress / PHP Version added later in this page )

name="q"

"q" is Google Custom Search Engine default search parameter

Now when user search for a term it will navigate to 

https://www.example.com/search?q=search-query

Google Custom Search Engine will get the Search term form URL and show search result

In the Search page where result have to show, Add Google Custom Search Engine code

When using Custom Search box, you may not need the default search box. so select "Result only" or similar at "Look and feel" settings and click on "save & Get Code"

look and feel - result only - cse

The last line, it makes to add the search result only, now Google Custom Search Engine won't Create Search box.

<gcse:searchresults-only>

If you are using WordPress, you can create the search form like above and add in a post or page.

or can change the default search form – form searchform.php

<div class="ht_search_form">
<form action="<?php echo esc_url( home_url( '/search' ) ); ?>"><input id="" name="q" type="search" placeholder="Search" />
<button class="ht_search" type="submit">Search</button>
</form>
</div>

Styles / CSS

This may not be perfect as you wish, but will give some idea

.ht_search_form button {
	color: #000;
	background-color: orange;
}

.ht_search_form input {
	max-width: 200px;
}

.ht_search_form button   –  selects the button 

color: #000;   – change the button text color

background-color: orange;  – change the button background color

.ht_search_form input  – selects the input field

max-width: 200px;  –  make the width of the input field does not exclude 200px

This syntax are added for an idea. based on this can edit the values easily. ( button text color, background color, input filed max width )

simple search form
o/p   ( image )

Add Google Custom Search Engine on you Website

Make WordPress Search Form as Google Custom Search Engine – Search box

Make The Default WordPress Search Form to search using Google Custom Search

WordPress initially check for "searchform.php" to display the search form. ( in child theme or in parent theme ) and this search form can access using "get_search_form()"

For demo purpose we are using Twenty Seventeen Theme

This is the Twenty Seventeen Theme – search form ( searchform.php )

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<label for="<?php echo $unique_id; ?>">
		<span class="screen-reader-text"><?php echo _x( 'Search for:', 'label', 'twentyseventeen' ); ?></span>
	</label>
	<input type="search" id="<?php echo $unique_id; ?>" class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder', 'twentyseventeen' ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
	<button type="submit" class="search-submit"><?php echo twentyseventeen_get_svg( array( 'icon' => 'search' ) ); ?><span class="screen-reader-text"><?php echo _x( 'Search', 'submit button', 'twentyseventeen' ); ?></span></button>
</form>

Notice the form – "action" attribute – it points to the home URL, we can change this

action="<?php echo esc_url( home_url( '/' ) );

and then at the "input" field notice the name attribute – name="s"

name="s"

this is the search field parameter, and this is the default search parameter for wordpress

you can check this by directly entering in URL bar – "youdomain.com/?s=some-query-text

Now WordPress will search for "some-query-text" and display result

"s" is query paramater

Google Custom Search Query default parameter is "q" ( can change this, but if you changed to "s" again default wordpress result may appear, so change to any letter other then "s", "p"   )

To Make the Default WordPress search form to search using Google Custom Search – Change the query parameter "s" to "q"

i.e. the "input" filed "name" attribute value will be "q"

name="q"

and have to add Google Custom Search Engine script in the page where the form action navigate

action="<?php echo esc_url( home_url( '/' ) );

here it navigates to home URL, so add Google Custom Search engine script in home page

or change the form navigation URL to some other page and add Custom code engine script in that page alone.

action="<?php echo esc_url( home_url( '/search' ) );

now create a page "search" and add custom search engine script in that page alone.

Google Custom Search Engine Code

Now When user search on any page – it navigates to "yourdomain.com/search" and will display the result using Google Custom Search Engine.

In Search form if you enter "nyc" then the page will navigate to "yourdomain.com/search/?q=nyc"

Google Custom Search Engine will get the search query term from the URL

You can add the Default search form in sidebar, footer or so . . using Widgets .. which is less wait, and no need to load google script all the time. and when user search's it will navigate to a page. and in that page alone Google custom search engine script will loads


Create simple Search Form for Google Custom Search Engine

Add Google Custom Search Engine in Website

Alternative to Google Custom Search Engine ( CSE )

Google Custom Search ( CSE ) is free product. Its a great tool.

Its easy to setup, just like plugin and play, with in a two minutes you can finish the basic setup and can Add Google Custom Search Engine in your Website

You can Customize Google Custom Search Engine by using API, or from Google Custom Search Engine Admin panel.

but it have some limitations in customization. like Google brand appears on Search result. Display ads on Search Result

Alternate to Google Custom Search Engine

Algolia ( Free plan available ) , Algolia Community build Free Plugins for Several CMS, Which makes easy to Integrate Algolia in your Website . ( WordPress, Shopify, Magento, Jekyll, Zendesk )

Apache solr is open source enterprise search platform build on Apache Lucene

Amazon AWS CloudSearch Fully Managed, Cloud based Custom Search Engine ( for Mobile, Web App )

Swiftype

Elasticsearch

Cludo

AddSearch


WordPress Plugins

Relevanssi replaces the standard WordPress Search Engine with extra features. 100,000 + Active Installation. one of the popular Search Engine plugin in WordPress. Relevanssi premium version

searchwp   –  WordPress plugin

Search Everything Improves WordPress default Search functionality. 90,000 + Active Installations.

Search & Filter

ElasticPress

WP AutoComplete Search


For most use cases Cloud based Search Engines are best instead on all the things loaded on your server.

Cloud Based Search Engines crawl, index your site on there server and manages. means less load on you server. And its easy to Setup, Maintain.

If you have large traffic website. Instead of using WordPress plugin which index you site on your Web Server use Cloud based Search Engine. ( for setup may need to use plugin, even if it is cloud based search engine )

But there are some Advantages of using WordPress based Search Engines

WordPress plugins Search Engines can know how your website content is, they know the popular products like Woo commerce, easydigitaldownloads. and know how they are structured. So more customize feature, better search result.

For Large Enterprises any thing is fine.  Apache solr may be one of the best choose.


Create simple Search Form for Google Custom Search Engine

Add Google Custom Search Engine in Website

Add Custom Search Engine in your Website using Google Custom Search Engine ( CSE )

Create Custom Search Engine using Google Custom Search Engine ( CSE ) and Add that search engine in your website

Google Custom Search Engine ( CSE ) is a tool to implement search engine on your website, or to a separate URL created by google.

Set your own settings. like which pages to search, What Domains to include, Exclude, Include page, look and feel, Image Search, Speech Input, synonyms keywords, Language and much more

Can add other website to you custom search engine. even that website is not owned by you. No need to verify any domain name, to add in Google Custom Search Engine.

First we will see how to setup Google Custom Search Engine, later we will setup some additional features

And we will check what the other things have to do When google Custom search Engine is Setup, later – Tricks / Hacks ..

add google custom search engine on  website

Create Google Custom Search Engine

Navigate to https://cse.google.com/cse/

It will navigate to show already created Search Engine list.

But if this is the first one to create

Click on "Create a Custom Search Engine"  if not, to create a new Search Engine Click on "Add" or click on "New Search Engine" from the left side menu.

Sites to Search

Enter the sites name to search, Can add multiple domain names. can Add domains that even if you are not owned that we.

Individual pages: To search only on some Individual pages – can that page URL e.g. www.example.com/about.html

Entire Site:  To Add Entire Site  e.g. www.example.com or www.example.com/* but this is not including all sub domains, search on all pages with in www.example.com. To search on Sub pages add like sub.example.com or sub.example.com/*

Entire Domain: to search on entire domain – all webpages that include sub folder, sub domains *.example.com

parts of site / sub folders:  www.example.com/blog/ or www.example.com/blog/*

URL Patterns – Google Custom Search

Languages

Add the desired language, Language for search engine Messages to display messages

( this is not the language of what your search result is, or what your website content is. )

This is useful to set the language to display search box. like the search box placeholder – text, sort by – text, powered by google custom search – text  and similar messages.

Name of the SearchEngine

Give a name to your Custom Search Engine,

If you are using Custom Search Engine public URL ( will check about that in this page ) This name shown at the top of that page just like an heading.

Click on Create to create a Custom Search Engine

cse - success message

on Success you will get the page which provide links to "Get Code", "Public URL", "Control Panel"

At Any Time to get this information

Click on "Edit Search Engine" – from the left menu. And then click on "Setup" – This is Control Panel – for Search Engine

cse  - admin - setup

To get the Code – from "Setup"  click on "Get Code"

To get, enable, disable the public URL click on "Public URL".

Copy the code and paste it where you like to display the search box, search result.

e.g  if you like to add search box in Sidebar, If you are using WordPress and have your Theme provide to add content on Sidebar using Widgets.

Then form wp-admin – Dashboard -> Appearance -> Widgets

Select "Custom HTML" Widget and place that widget where you want – sidebar, footer, header ..

and add the code in that widget and save.

Google Custom Search in Sidebar - using custom HTML Widget

We can arrange things like  – Display only Search result or Search box or Seach box at one place and Search result at one place.

To do this – Click on "Look and feel" from the left navigation.

or you change the last line of the code by your self

<gcse:search>   –  To display Search box, Search Result

<gcse:searchbox>, <gcse:searchresults> – Two Colums – To Display Search box, Search result on two columns with in same page.

<gcse:searchbox-only>  –  To Display only Search Box

<gcse:searchresults-only>   –  To Display only Search Result

Instead of manually editing this code, Google will generate this code by changing the settings at "Look and feel"

change look and feel - cse

Customize the color of the link, text, buttons, by navigate to Customize tab, or can change the look and feel using themes.

Synonyms

Add Variations for search terms

e.g. in your website you may use term like "New York City" but user may search for different term like "NYC"

Add synonyms

Now if search query is "NYC" Search Engine will show results that are related to "New York City"

Things May need to do

Make Google Custom Search or Google Search Engine know your Website, Web pages. Add your Site at Google Search console and add sitemap. 
So that Google know what the pages, Content exist on your site and what the result have to display based on the search query.

If you are using Google Analytics – You may be already Added Search Query String in filter "S", CSE default Query String is "q". Make sure you added "q" also. or change the Default Query String. ( in all case you don't need, use this in cases where your URL changes and adds "?q" string  before the search query )

At "Statistics and Logs"  -> Google Analytics. Select a profile to view Analytics.

Don't Enable  – Results Browsing History – just back to previous search result. ( by default disabled )

Tips / Hacks

Instead of adding Google Search Engine Script on all pages,

Just add the custom search box on all pages i.e. create your own search form which is less wait – just an input field, submit button inside form, and When user submit that form make sure to navigate to a page where you added Google Custom Search Engine script. ( have to extend the URL with query string, query text )

or

Instead of creating a new search form, you can use WordPress / theme default Search form, but one issue here  – WordPress search Query String is "s" where default CSE query String is "q". either one have to change to match.

or

In menu add one more item like "search" and make that link to navigate to page where Google Custom Search Engine Script is added. or add a search bar in menu


What about Google Site Search ( GSE ) ?

GSE vs CSE

Google Site Search ( GSE ), is discontinued

GSE is more Enterprise Edition of Google custom Search, can remove Google Branding, can remove Ads. Its not free. ( any how now its discontinued )


Alternative to Google Custom Search Engine ( CSE )

Make WordPress Search Form as Google Custom Search Engine – Search box

Add Search box in WordPress Menu

Best Social Media Management tools – Schedule, Analytics, inbox, reports, monitor keywords, shares

Best Social Media Management tools to maintain all your Social Media Accounts, For small to Big Business, Agencies

There is no proper monopoly in Social Media Site, of-course one have more use base then other. The popularity of Social Media sites vary based on Age, Gender, Region, Occupation and some other factor. Some are popular for Making Friends, and some are for Fan Followers

Young people spend most of time in some site, and 35+ age people spend on some other site. Film Industry, Sports followers spend on some site.

As an Entrepreneurs you should not fix to one social media site. your Company must focus on multiple social Media Sites. You have to play smart. You should no go all your social sites for posting, for reading comments, giving reply, or to view Analytics.

Connect all your Social sites to one Social Media Management tool, and make the thing Easy.

Social Media Management tools

What social Media Management tools Do

Helps to Maintain Multiple Social sites , Multiple Accounts of Social Sites from Single Dashboard

Take action at one place and make it happen in all places, view all your social sites data from one one place

Create post in one place and make your social media Manager to post on all you Social Sites

View All your Social Sites Analytics from one place. ..

Advantages of using Social Media Management tools

create, schedule, draft – post

Read, reply to Message / Comments / Chat

Analytics / Insights

Monitor Shares

Monitor Hashtags

Monitor Ads on Social Media Sites

URL Shortener

Create Teams to manage Social Media Manager


Here is the list of some popular Social Media Management tools.

Hootsuite

Hootsuite.com

Hootsuite is one of the most popular Social Media Manager,

With The Free plan you can manage up to 3 Social Profiles and comes with basic Analytics, and community support.

Hootsuite connects to over 35 popular Social sites

Some of the popular Social sites Hootsuite supports are Facebook, Twitter, YouTube, Google+, LinkedIn, Instagram.

Some of the Feature Includes – Schedule post,  Analytics, Monitoring, Team Management, Content curation

Hootsuite link Shortener domain names –  ow.ly, owl.ly, ht.ly, htl.ly

Useful Hootsuite links

Hootsuite pricing

Hootsuite integrations – App Directory

buffer

buffer

Buffer is one of the easy way to get started, Very easy to schedule the posts.

With Free plan, can manage up to 3 social profiles.

Some of the popular Social sites buffer supports are Facebook, Twitter, Google+, LinkedIn, Instagram, pinterest.

Some of the feature buffer provides – Schedule post, Analytics, Team Management, Managing Messages, Buffer pablo

Buffer pablo a free tools which helps to create images for multiple social media post, Buffer pablo provides some free images, even it grabs some CC0 images from some of the popular images directory.

buffer link Shortener domain names – buff.ly

Some Useful Buffer Links

Buffer Pricing

buffer integrations  – buffer extra

Buffer business

Buffer reply

Agora pulse

Agorapulse.com

Agora pulse is already a popular Social Media Manager. Still We are expecting as it will reach to new levels.

If you are an individual user who like to manage your social sites – Agorapulse may seems like expensive – Agorapulse starting price is $49 for up to 3 social profiles.

If you are in business might be small team or a large team, have an agency Agorapluse is the best choose.

I personally like Agorapluse User Interface

Some of the Agorapluse Features are – Schedule post, Team Management, Message, Analytics, Monitoring shares, Monitoring Hashtags and more..

Some of the popular Social sites Agoraplus supports are Facebook, Twitter, Google+, LinkedIn, Instagram, YouTube.


Free Social Media Management tools for min 3 social profiles

Social Management Tools for Small, large Teams

Some more list

sprinklr

If you are just concentration on posting alone, there are so many free tools  available, even this tools does great job. The above list is not just for only posting, its does some other great things.


Suggestions / Hacks

Using Automation Tools – IFTTT, zapier. Automate the tasks to post on Social Sites when you published a new Web page.


In case If there is an issue with the content – please Message us.

Manage all your WordPress Website from single location – three best ways.

Manage all your WordPress Sites from Single Location (Self-hosted WordPress websites or wordpress.com websites ), Manage from the cloud, or from one of your website or from wordpress.com or using Desktop, mobile App.

Manage Themes, plugins, core Updates, backups, clone, security, comments, create/edit posts,  and much more tasks for all your WordPress Websites, from single location.

If you have multiple websites or If you are an Agent, Freelancer who Manage your customer Website this Management tools will save lot of time spent on WordPress Maintenance.

There are multiple way we can Manage Multiple WordPress websites from single location

  • Manage form Cloud – i.e. the remote location from where you signup 
  • From one of your WordPress Installed site
  • At WordPress.com, Desktop, Mobile App
Manage Multiple Websites

Basic tasks

Update WordPress Version with single click for all your websites

Install, activate, deactivate, delete plugins

Change, update, delete Theme

Backup

Read all your Website comments form single location

login to your websites dashboard with a single click

these are basic things, some tools do much more, like Automatically take backup, Security Checks, Check Website performance – page speed insights, uptime monitor  ( reports if server downs ), Analytics, SEO, create restore points, Migration and much more ..

If you are an Agent, Freelancer you Can Manage all your customer's websites from the single location. can create custom Dashboard, whitelisted reports.

ManageWP / GoDaddy Pro

ManageWP is one of the most popular for its user base, Its Dashboard / UI make things easy to get started and Manage all your sites.

ManageWP is free for unlimited Website, Can handle most of the things with free version.

Some features there is free, paid versions. can take advance by adding a paid add-on.

e.g. like you can take monthly scheduled backup, 1-click restore with free version, with paid backup add-on which is $2 per site per month per site, can take on-demand backup, cloning, migration, send backup to an external destination like Google Drive, AWS S3.

If you have large number of website, or if you are an agent, freelance you can take advantage of taking bundle package – instead of paying $2 per backup addon, can take $75 for up to 100 websites.

or instead of paying for each bundle, pay for – all in one bundle package for $150 per month – for up to 100 websites – this includes several add-ons

more information at ManageWP Pricing page

GoDaddy acquired ManageWP

If you are already GoDaddy Customer, instead of signup for ManageWP, you can signup for GoDaddy pro for free, Some of the paid features in ManageWP are free if your website is hosted in GoDaddy.

Signup for GoDaddy pro user is free, just like ManageWP can take advantage of paid add-ons, if you are already GoDaddy customer it better to add your sites from GoDaddy pro and manage your bills easily.

ManageWP access your Website by using Worker plugin

While Adding WordPress site in ManageWP Dashboard, if you have given your WordPress Website username and password, ManageWP installs 'Worker plugin' on your Website. or instead of adding username, the password you can install Worker Plugin by your self, and while adding Website in ManageWP Dashboard add the Access key.

WordPress.com – Jetpack

Install Jetpack on your self-hosted WordPress website, then connect your website to wordpress.com account. That's all, you can mange your self-hosted website form wordpress.com or you can install Desktop, Mobile WordPress App ( know more about calypso )

If you update to premium plan, you can take advantage of taking backups ..

Jetpack is not just for Manage Multiple website form single location, its have wide range of features. like lazy loading images, image cdn, related post

It basically connect your site to wordpress.com, and from wordpress.com you can mange all the connected site.

here – wordpress.com access your self hosted websites using Jetpack plugin.

With the free Version of Jetpack, you can update the themes, plugins, write, edit posts,  Analytics and much more.

Jetpack Pricing

Jetpack is really a great tool to Managing WordPress Site – build, Manage, secure.

Jetpack services include Content Delivery, Security Services, Ad program, lazy loading images

While coming to Manage Multiple WordPress Sites it does something using WordPress.com – which are great. ( but it lack some feature when compare with alternates )

So our suggestion is, If you are already using Jetpack, then instead of adding another plugin in your WordPress use Jetpack and access all your sites from wordpress.com from browser or form WordPress Desktop, Mobile App

MainWP

unlike ManageWP – where your dashboard is in their premises .

MainWP Dashboard is on your WordPress Website,

It might be one of your main site, or a sub site create especially for Managing sites,

or even you can Create your Dashboard in localhost.
by installing wamp, xampp, mamp server,
or create your own server and install WordPress by using Apache, PHP, MySQL

MainWP Dashboard : install this plugin to get Dashboard to Manage WordPress Sites

MainWP Child : Install this plugin on all your WordPress sites to connect to your Dashboard.

MainWP Pricing

Free tier comes with several features like adding unlimited website, Manage Plugins, Themes, Manage Content of all your WordPress sites, 1-click admin access to your connected sites, taking backup ( multiple options ), uptime monitor and more.. ( Free Features, Add-ons )

can buy Add-ons, or all take membership plan

More tools

InfiniteWP

Conclusion

There are many tools out of this list, but we found this are top 3 tools for Managing Multiple WordPress sites.

Instead of taking decision from top 10 WordPress Management Services, or from top 100 list – this are the best What we found.

Find what suites for you based on your Who You Are, How Many Websites you have to Manage, are you Interest in paying Monthly, one time fee.

ManageWP is one of the easy option to get started, mostly you will like their user interface. Dashboard is hosted by ManageWP,  premium features are monthly bases and per site. ideal for individual users, agents

If you, or your company have enough Money to spend and it okay to pay monthly bills – then go for ManageWP ( wish you will like there User Interface ), Easy to use, Easy to Start, Easy to Maintain

MainWP is one of the best tool to Manage WordPress sites, Dashboard is on one of  your WordPress Website. Free for Adding Unlimited WordPress Websites, and there is Monthly, Yearly,  lifetime membership plan to use paid extensions.  ( can pay for selected extension ,  or for all extension ). . ideal for Agents, individual users

If you are Agent, and don't like to spend Monthly bills, and like to keep Dashboard form your own website, then MainWP is best choose.

If your are already using Jetpack, instead of adding another add-on, simply Manage all your WordPress sites form WordPress.com, or installing WordPress App on Desktop, Mobile, and can manage easily. Jetpack does great of what it does. Ideal for Individual users for managing multiple wordpress sites.

Manage multiple WordPress sites - Imfograpch

In case if we miss any of the best tools, please comment ( please add only if it works great then the above list )

private video support

We don’t like to share user website with issues.

In WordPress support system ( https://wordpress.org/support/ )
the messages are not able to edit/ delete after sometime ( that good )

But some times we need to share information to user but not like to stay long

In that cases mostly we do by adding an unlisted video ( can view who have that link )  in YouTube and later will delete that video or make private ( private videos are not visible with out permission, even link exists )

 

we plan to support our users much better

we like to receive your feedback, Ideas on how better we can give support

we are planning to arrange a support forum in HoliThemes

for private chat as now  – please message us using messenger

How to Find Post ID in WordPress for Posts, Pages, Media files

How to Find post Id for any Post Type

There are multiple way to find post id’s

one of the easiest way to find post id for most of ‘post types’ is from edit page of that post type.

Hover the mouse on the ‘Edit’ link,

at the bottom we can notice post id.

find post id from url

other method, from url while editing the post

Find post id for posts

post type - post

Find post id for pages

page id, post type page

Find post id for Media file pages

form Dashboard -> Media

and then click on image and then click on ‘Edit more details’ link and can get the post id from the url.

media post type - image id