Nowadays we see Google search in almost every WordPress site or blogs. There are many advantage to use Google Search. The benefits of using Google search are speed, users already trust Google brand, you will not have to maintain or update it and if you have adsense account, you can advertise your product on Google search result page. The default WordPress search is not much useful, that’s why every WordPress site owner look for an alternative solutions. There are many plugins for WordPress Google search implementation, but we will show you without plugin solution.

How to add WordPress Google Search

The first thing we are going to need is to generate Google search box code from Google CSE. CSE stand for Custom Search Engine. You can generate you code by adding your site name to cse.google.com.

You probably already used Google account to register your site, if not, login and add your site. Once you login, click on add button and fill the necessary information.

Add WordPress Google search page

One added your site, now you click on Get code button to copy the code we need.

Depending on your site, it will generate a unique code for you. Here is what we have generated.

<script>
  (function() {
    var cx = '000132328623297516430:yfpvgjmz5b4';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

By unique code, I means the code we generate is completely different from the code you generate. So make sure you are not copying our code.

Now, open your theme folder. It is located in the wp-content/theme/yourtheme.  You see a searchform.php file there, open that file with notepad or any other text editor you have. Now past the code you have copied form Google CSE site. Save the file and close.

Now you can go to widget page of your WordPress site and add the search widget to side bar. Instead of default WordPress site search box, you will see the Google search. If you search anything in that field now, It will open a modal dialog and show the result.

Conclusion

If you want to customize and make the search field look different, you can customize it from Google CSE. Make sure you save the customize code and replace the searchform.php file with the new code generated. We have it has been informative for you. If you have any question or problem, feel free to share it bellow. 🙂

The post How to Add Google Search To WordPress Without Plugin appeared first on TECHNIG.

In previous tutorial, you have learn how to add and configure the WordPress Kirki customizer. In this tutorial we will continue on by learning how to add panel, section sections and control to our WordPress customizer. If you have came to this tutorial directly, I recommend to read the previous tutorial first.

If you look at the above picture, you will understand the concept of a panel, section, settings and controls better. The first thing you will need to do is to create a panel. After creating the panel, you can add section and hook them inside that panel. Inside sections, you can add control or section or maybe to say it clearly, adding fields options.

Creating Panel in WordPress Kirki Customizer

So, let’s start adding our first line of code and make a panel in WordPress theme Customizer. To do that, all you need is to write an function and inside that function add your panel using add_panel() function.

Example:

function technig_options( $wp_customize ) {
	/**
	 * Add panels
	 */
	$wp_customize->add_panel( 'technig_theme_options', array(
		'priority'    => 10,
		'title'       => __( 'Theme Options', 'technig' ),
	) );
}

Now, inside technig_options() function, we can add our panel and sections. You can add as many panel as you want. But before that, we should hook this function to WordPress customize_register() function.

Here is how you do that.

add_action( 'customize_register', 'technig_options' );

Until now, if you check the WordPress Customizer, you will see nothing. It’s because, WordPress will show the panel if there is no section hooked to that. In the same way it will show the section if their is no setting hook in to it. So let’s add the section and hook it as well.

First, Create the section. Inside teching_options() function add the following code for adding a general option section.

	/**
	 * Add sections
	 */
       $wp_customize->add_section( 'general_options', array(
 		'title'       => __( 'General Options', 'technig' ),
 		'priority'    => 10,
 		'panel'       => 'technig_theme_options',
 	) );

Secondly, create a function for fields and hook it into general options section. For this example, will use image uploader to upload a favicon and than use it in our site.

function technig_fields( $wp_customize ) {

   /*General Options*/
    $fields[] = array(
	'type'        => 'image',
	'settings'    => 'fav_icon',
	'label'       => __( 'Favicon', 'technig' ),
	'description' => __( 'Upload your site favicon here', 'technig' ),
	'section'     => 'general_options',
	'default'     => '',
	'priority'    => 10,
);

    return $fields;
}

add_filter( 'kirki/fields', 'technig_fields' );

Now, check the WordPress Customizer, you have successfully add the first panel, section and fields with WordPress Kirki customizer. It will look like this.

How to Use the Value?

Now, you can use get_theme_mod() function to display the value of the field anywhere in your theme. For our demo, which is favicon, we will use it as favicon in the header of our site.

Example :

<link rel="shortcut icon" href="<?php echo get_theme_mod('fav_icon'); ?>" />

Conclusion.

This was the part two of the WordPress Kirki Customizer. We have successfully created our theme option panel with section, settings and fields inside. In the next part will discuss about more fields like radio, radio-image, checkbox, textrea and more. We will also discuss about conditional statements and default values in Kirki. I hope it has been informative for you. If you have any types of questions related to this topic, feel free to comment it below. 🙂

The post Adding more Options to WordPress Customizer with Kirki appeared first on TECHNIG.