Search Box Implementation For WP

In this article we’ll explain how you can implement a Booking.com affiliate search box in WordPress using a shortcode.

 

Getting started

 

Creating a search box:

  1. Log in to the Partner Centre at: admin.booking.com/partner
  2. Go to the ‘Products Search Box’.
  3. Create a new search box.
  4. Chose a name and the size you need.
  5. Customise the look of the search box in ‘Advanced and Colors Options’. You can also add a filter in filters, to make sure you only show search results for specific types of accommodation.
  6. Hit ‘Create This Search Box’ and the search box code will appear below.
  7. You can now move on to the next step and create the shortcode. We’ll go on to explain this in more detail.

What is a shortcode?

As the name suggests, a shortcode is one that replaces the search box code you generate in the Partner Centre, with a shorter version. The shortcode will help you to place the search box within the content on your site and in the exact place that works best.

Here is an example of shortcode:

ins class=”bookingaff” data­aid=”AFFILIATE_ID” data­target_aid=”AFFILIATE_ID” data-
prod=”nsb” data­width=”500″ data­height=”330″
!­­ Anything inside will go away once widget is loaded.
a href=”//www.booking.com?aid=AFFILIATE_ID”Booking.com/a
script type=”text/javascript”
(function(d, sc, u) {
var s = d.createElement(sc), p = d.getElementsByTagName(sc)[0];
s.type = ‘text/javascript’;
s.async = true;
s.src = u + ‘?v=’ + (+new Date());
p.parentNode.insertBefore(s,p);
})(document, ‘script’, ‘//aff.bstatic.com/static/affiliate_base/js/flexiproduct.js’);
/script

Is shortened to this:
[bcom_searchbox]

 

How to create a short-code for your search box

Creating a shortcode is very simple, it just takes a bit of copying and pasting.

  1. In your WordPress dashboard go to ‘Appearance Editor’.
  2. Scroll through the ‘Templates’ list on the right-hand side until you find ‘Theme Functions’ and click here.
  3. On the left-hand side, you’lll see the content of the ‘Theme Functions’ (‘functions.php’) file.
  4. Copy the entire code and paste it in a separate ‘.txt’ or ‘.doc’ file, so that you have a back-up of the original file.
  5. Now return to the functions.php’ file and copy the code below:

/* Add short-code for B.com searchbox widget [bcom_searchbox] */
function bcom_searchbox( $atts ){
$b_sb_ins = ‘ XXX ‘;
$b_sb_script = ‘script type=”text/javascript”// ![CDATA[
(function(d, sc, u) {
var s = d.createElement(sc), p = d.getElementsByTagName(sc)[0];
s.type = \’text/javascript\’;
s.async = true;
s.src = u + \’?v=\’ + (+new Date());
p.parentNode.insertBefore(s,p);
})(document, \’script\’, \’//aff.bstatic.com/static/affiliate_base/js/flexiproduct.js\’);
// ]]/script’;
return $b_sb_ins . $b_sb_script ;
add_shortcode( ‘bcom_searchbox’, ‘bcom_searchbox’ );

Now paste it at the very end of the ‘functions.php’ code.

Go back to the Partner Centre, copy the piece of search box code before ‘ins’.

Return to the ‘functions.php’ file and replace ‘XXX’ with the code you just copied.

Click ‘Update File’ to save the changes.

And you’re done!

Now you can use the [bcom_searchbox] short-code anywhere you like on your site.