Theming of Ajax Search Pro with Bootstrap

Facebooktwittergoogle_plusredditpinterestlinkedintumblrFacebooktwittergoogle_plusredditpinterestlinkedintumblr

This post explores the subject of searching in WordPress and the theming of Ajax Search Pro with Bootstrap, using Ultimatum Theme. It will also cover how to use Ajax Search Pro to provide a search dedicated to a single Custom Post Type (CPT), in this instance to search articles created using BWL Knowledge Base Manager. A few days ago I started to write a series of posts (Part 1 and Part 2) about BWL Knowledge Base Manager, and also a post about Synchronizing Ultimatum Theme Bootstrap & UberMenu 3.

To summarize the previous posts, I had come to the conclusion that BWL Knowledge Base Manager was an excellent plugin and does ‘what it says on the tin’. But, and there is often a but, it was let down by the somewhat poor search engine provided in the WordPress core. Not a surprise to anyone who has used WordPress. The WordPress core developers like to keep WordPress slim and extensible. Those extensions are called plugins, and you often have to pay to get decent ones. Free core software supplemented by paid for optional extras. Much the same model as free apps/games on your smartphone that have paid for add ons and/or ‘pro’ versions. The first search I will make using Ajax Search Pro is for use in a page sidebar on BWL Knowledge Base Manager pages.

Remember, in this run through, I am both theming the search to look like the Bootswatch 3 Darkly theme I am using for my site and also making a search for use the Article CPT that BWL Knowledge Base Manager has installed. Before we go much further, it is assumed that you have already added the categories you want in the knowledgebase, and you will need to add one test article in each category, otherwise the categories will not appear in these options we are about to set. Furthermore, if you later add one or more categories to the knowledgebase, you will need to return to the search setup and add them. I do not think that they will be automatically added.

Theming of Ajax Search Pro with Bootstrap - New Search - General Options SourcesTheming of Ajax Search Pro with Bootstrap - New Search - General Options Sources - 2Theming of Ajax Search Pro with Bootstrap - New Search - General Options - Behaviour

Having installed and activated the Ajax Search Pro plugin, go to the Ajax Search Pro main menu. Create a new search – I called mine kb-search. Click on the gear (settings) icon of this new search and you will be on the General Settings panel for that search (see above screenshot), with the Sources tab showing. note that when making changes on each tab, you do not need to save when you switch tab, but I do, just in case! Also note in the bottom right of the screen is a preview pane. Click the green ‘show’ button and it will render the menu as it will appear in your site. Each screenshot above shows where to make the changes for this search to work with the knowledgebase. Where I haven’t shown any changes, that means they were not necessary for my purposes, which means that some tabs will not be covered in this blog post.

Theming of Ajax Search Pro with Bootstrap - New Search - General Options - Image OptionsTheming of Ajax Search Pro with Bootstrap - New Search - Frontend Search Settings - GeneralTheming of Ajax Search Pro with Bootstrap - New Search - Frontend Search Settings - Categories & Taxonomies

For the knowledgebase, I didn’t see the need to show images in the search results. On the the Frontend Search Settings. Again, this has to look only inside the knowledgebase. The important section is the Categories & Taxonomies panel. You can see how the normal post type categories are excluded. If you add categories for normal posts, you will have to edit the search and remove them here, as the re is no ‘All’ option. Similarly, you must select the taxonomy type you want, and then use all of the categories available. the same comment applies about when you add categories to this CPT.

bwl-kb-new-search-layout-res-laybwl-kb-new-search-theme-over-box

The other three tabs under Frontend Search Settings do not need any changes, so on to Layout Options, where there are two tabs with settings. Again, the settings that I have changed make sense for the Article CPT on the Results Layout panel, and no changes on the Results Behaviour panel, but you may wish to set the Highlight search text in results to on and pick suitable colors. I did not change any Autocomplete settings, and so on to theme settings.

 

Rather than use a pre-defined theme, I am going to use the options available to style the search box to match the Bootswatch 3 Darkly theme.

Categories: Ultimatum.