Category Archives: Content Management

I will list all the web CMS and database management systems related articles under here. You may come across useful article also in the Computer Science category.

Random Item from CMS Database

There are few ways to do this in WordPress CMS using the PHP web language. What I would say the “best way” involves editing either original or Child Theme functions.php file. Therefore it is bit risky and you could potentially take your side down in an event of an incorrect implementation. Let’s look at the fool safe “easy way” first.

By creating a page template

The advantage of this method is that we are not editing your original or Child PHP theme files. Instead, a separate PHP file is created (either directly on the server or outside then uploaded using FTP) as a template file. This may also potentially create coding conflicts but usually can be resolved by simply removing the newely created file from the server. This new template must be located in the templates folder of your WordPress theme files. Hence the location should be the same as the page.php file location. Usually it is in “themes” folder.

First, create a PHP file with a desired name. Let’s call this file “template-random.php” in this particular example.

<?php
/* Template Name: Random Item */
query_posts(array('orderby' => 'rand', 'showposts' => 1));
 if (have_posts()) :
   while (have_posts()) : the_post(); ?>
     <h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
     <?php the_content(); ?>
   <?php endwhile;
 endif; ?>

After creating the template go to the Admin Panel of your WordPress and create a new page (let’s call it “random”). Choose the template we just uploaded as the template of the page. The template we just created should appear on the list of selectable templates under “Attributes” pane as “Random Item”. A random page/post will be generated every time this new random page is generated. For example, sanuja.com/blog/random will give you a random item from the database. Now you can use “a href” type links or buttons to direct users to random pages.

By updating the functions.php

Update the functions file in your main theme files or Child Theme files with the following code.

function le_random_post() {
if ( isset( $_GET['random'] ) && $_GET['random'] == 1 ) {
   $posts = get_posts( 'post_type=post&orderby=rand&numberposts=1' );
      foreach( $posts as $post ) {
      $link = get_permalink( $post );
      }
      wp_redirect( $link,307 );
   exit;
       }
}
add_action( 'template_redirect','le_random_post' );

Now you are done! Just use the appropriate URL to generate items from this script. For example, this will generate a random item as soon as the URL, http://sanuja.com/blog/?random=1 is requested.

Mobile tools for Webmasters

There are many different types of Webmasters (and Owners / Developers / Administrators / etc). One thing most of us love is to save money by opting for free services whenever it is possible. You do not always have to pay for high quality services. For example, Google Inc. is one of my favorite high quality free service providers. However, keep in mind that often these services are provided “as it is” without a warranty and for personal website Webmasters and small business owners.

Mobile Computing

This is not so much of a new tread but rather a continuation of the teach bubble. Many personal website owners and increase number of small business owners maintain their sites on the go. This is where smartphones and tablets can be very useful. But, I found keeping things up to date on a website can be a difficult thing to do. Looking out for those unwanted DOS attacks and server downtime can be time consuming. But it doesn’t have to be like that because there are tools to keep an eye on your site 24h/7d/year on your mobile device.

Introducing Pingdom

Pingdom is one of the most popular site among Webmasters. They offer wide range of technical tools for monitoring and managing your website. This includes the world famous, the Pingdom Speed Test. While there are two tears for their services (free as well as Pro paid version), for a novice Webmaster with a personal website, their free services are more than adequate. For example, if you want to keep an eye on your HTTP side of your server, you can create a free account and automate that process. This free account also comes with the access to a very well written Android and Apple apps.

The Pingdom mobile app provide critical server information such as outages, uptime and response time. Again, yes for FREE! I use it to keep track on this website. I would specially recommend anyone who is paying for their web hosting to use this wonderful free service. Because if you found that your site is not up 99.9% like some hosting companies claim, you can ask for your money back.

Android Mobile Pingdom App
Android Mobile Pingdom App

I should also thanks the Pingdom for coming up improved mobile support. Even while I am typing this article they released a new version of their app improving overall quality of presentation.

Google Google Analytics

I use a lot of Google free services. They include great services such as search engine, Google.com/cTLD, Custom Site Search, Google Adsense and other free Webmaster services offered by the company. While I do not have a favorite Google service, I can say Google Analytics is the best tool for monitoring web traffic.

Android Google Analytics App
Android Google Analytics App

Once you set up a site with with the Analytics tracking code, this mobile application will provide live traffic at your finger tips. Additionally, when used with Google Adsense, you can combine the visitor behaviors with your ad revenues or vice versa. This is a great tool for Webmasters with multiple sites too. You can combine data from several sites into a single app.

Android Terminal Emulator

As the title suggests, this is specifically for people with Android devices. But, this will also work on a Windows phone, tablet or a PC. The term “Terminal” is known as “Command Prompt” in Windows or simply “Terminal” in Linux/Unix.

So how can this be useful? Instead of using an application like Pingdom, you can use the Terminal Emulator to ping your site. Unless you write a script, you can have to manually ping your site(s) each time, one at a time. Therefore, this is a time consuming process for Webmasters with slow older devices. If you find that your phone “hangs” or crashes upon loading the Pingdom app, this is a good solution (although no means it is a prefect solution).

There are many other tools available in the market. I only introduced few of the most basic and generally bugs free items. I would not recommend using paid mobile tools unless you are running a large company. For most average Webmasters, these free applications can be as useful as Calculus to a an Engineer.

Google Custom Search Refinements

Google is a very popular search engine. One of the driving forces behind the popularity is the Google Inc’s generous offers such as free site based search. The Google Custom Search Engine (CSE) is a such free Webmaster tool. It allows the site owners to integrate the powerful Google search system into their website. I already discussed how to replace the default WordPress site search with your CSE. In this article, I will introduce you to creating content filters.

Filtering the web

As time progress, the amount of pages and media also increase with it. This is not just true for large scale cooperate websites, but also true for personal websites like SANUJA.COM. Someone who publish articles and other web items regularity would at least have one or two articles/items per week. If you multiply them by the number of weeks per year, that’s a lot of information. The problem with general web search on your site is that the visitor may move out of the site as a result of it. The solution is to use an integrated site search that only search your site. All Content Management System (CMS) comes with some form of built-in or modular site search. For average web owners, that’s all they need. But what if you would like to have more control over how the site content is search? The CSE will allow you to restrict your search to specific area of your site. This is how you configure your Google CSE to refine your search results.

Refining

If you have a section of your website that is more important than the rest, then refining is a good way to help the visitors narrow down their search. For example, on my site I empathize the academic exam bank. I want my visitors to filter out all the materials under Exams and Resources during a search (if desired). Here are the steps to creating a refining filter:

1. Log-in to Google Custom Search Engine (GCS) and select the search engine you would like to edit.

Selecting your Google CSE
Selecting your Google CSE

2. Choose “Search features” from the right hand menu and select the second tab “Refinements”. Now press “Add” button from the Refinements pane.

Adding a refinements.
Adding a refinements.

3. A pop-up window will appear with form for new Refinement addition. Save the item.

Add new refinement popup.
Add new refinement popup.

4. Choose “Setup” from the right hand menu and select the “Basics” tab. Under “Sites to search” you can add a limitation.

Refinement directory/link limitation.
Refinement directory/link limitation.

In this particular example I provided my visitors an option to limit their search to my exams area. Since all my exams bank questions are followed by the common URL, “http://sanuja.com/blog/exams/*”. Which is like a prefix. It will allow the Google CSE to limit all the returned search results to Exams pages.

5. Choose the Refinement option created in step 3.

Limiting the site directory and adding the Refinement
Limiting the site directory and adding the Refinement

Here is an example of a refined search…

Refined search results using the tab style.
Refined search results using the tab style.

Excluding content

You can prevent the Google Custom Search from indexing certain pages or URL (link) patterns. To do that, you can:

1. Navigate to exclude section by clicking the “Advanced” link at the bottom of “Sites to search” section.

Advanced link.
Advanced link.

2. Once in the Advanced sections, you should see “Sites to exclude”. Add either one URL at a time or use the prefix method just like in the refinement configuration.

Restricting (excluding) a prefix URL pattern.
Restricting (excluding) a prefix URL pattern.

There are few reasons to why you may exclude URLs, pages, images or other data. Pages from access restricted or membership based areas can be hidden from search results to prevent unwanted traffic to such areas. Sometimes images have copyright agreements that specifically restrict your users from searching images. You may have “junk” or temporary URLs such as http://domain.xxxx/P?7299 which often generated by some Content Management Systems or plugins/scripts.

Fixing overlapping content

We can use CSS codes to arrange containers of information in variety of ways. The vertical stacking order called z-index is used to denote which container will go on top of the other. Problems occurs when you write CSS containers without the consideration for the z-index value or use scripts from several different sources with undesirable stacking order. You can fix these problems in several ways.

z-index

The z-index tag can be placed in any CSS box. It is a relative value defined with either positive or negative integers. Higher the z-index value of a specific container, more forward it will be with respect to others. This is very useful when we need to place several different containers in a specific order. Therefore, if the z-index is set to 50 on one and 10 on another, that means the first one will be on top of the second. Yes, the z-index do take the values as it is including +/-.

Example of an issue and a fix

I do not want to go into too much tech details, so here is a great example of z-index overlapping problem.

On this website, I use two independent scripts for my main menu and the image popup. Both uses CSS and the main menu used to overlap on top of the popup image. This is undesirable because now we have this ugly menu on top of my beautiful pictures as shown here;

Menu on top of the popup image box.
Menu on top of the popup image box. Click for larger image.

To fix this, we need to know the div element id that creates the popup box. I found two; fancy_overlay and fancy_outer in the popup box CSS file that effect the behavior of the popup window.

/*fancy_overlay id*/
div#fancy_overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 30;
}
/*fancy_outer id*/
div#fancy_outer {
	position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    padding: 20px 20px 40px 20px;
    margin: 0;
    background: transparent;
    display: none;
}

I still don’t know which one will fix the issue, except fancy_overlay looks promising since z-index: 30; is in there. Through trial and error I found changing this z-index value would not fix my problem. My second suspect is fancy_outer and when I edited it with a z-index with a very high z-index value (I used 999, but it doesn’t have to be that large), it brought the popup to the front.

Note, it may be overkill to use !important but it is always a good one to use to make sure your modification take precedence over the others. CSS files always reads from top to bottom one line at a time. By making it !important we make sure our new condition is applied regardless where it appears.

/*fancy_outer id*/
div#fancy_outer {
	position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    padding: 20px 20px 40px 20px;
    margin: 0;
    background: transparent;
    display: none;
    z-index:999 !important; /* OVERLAY ISSUE: fix */
}

This fixed the main menu overlapping issue.

Popup on top of the menu image box. Yay!
Popup on top of the menu image box. Yay! Click for larger image.

Custom CSS edits on a CMS

If you are using a CMS program like most websites out there, then please edit either your Child Theme (slave theme) CSS file or the custom CSS injection file. Do not edit the main CSS of any of the scripts, themes and files that will get updated over time. Every time you update an item in your CMS you run the risk of deleting all your custom CSS codes. This is why it is so important to edit a separate CSS file.

/*
OVERLAY ISSUE: popup image and main menu fix
*/
#fancy_outer {
z-index:999 !important;
}

Conclusion

It is not difficult to fix CSS overlapping conflicts. The most difficult part is finding the specific element causing the issue(s). I highly recommend using a program like FireBug plugin for FireFox to determine the conflicting code location. You may also use “view source” in any web browser and look for the div id of the element overlay. Have a happy CSS edit this summer!

Integrating Google Custom Search

The Google Custom Search Engine (CSE) is a server side program written in C++ for web developers to improve their individual search results. It comes in few different flavors as advanced as Google Enterprise Search servers to Google hosted search pages. I will go into deep end with Google Custom Search for personal websites, a free service provided by Google Inc (THANK YOU Google).

Advantage of CSE

Unlike a general Google Search or website specific Google Search (chocolate site:http://sanuja.com/), CSE allows great deal of control over the behaviors of your site search. The themes, refining filters, AdSense and results page layouts are few examples of customization options. You do not have to use all them, but you can improve the user experience of your visitors utilizing these tools.

Yes it is a free service as long as you allow Google Ads in results pages. I do not have any problem with this and I think it is a good deal for me too. Why do you ask? Because if you have an AdSense account, you can use that for the must have ads. This way if someone clicks on an ad, it will also goes to your AdSense revenue. To me this is a win-win situation. If you do not want them to insert ads, Google Inc offer several different packages. They are based on the volume of search requests. Once you signup for an CSE account, you will be able to choose one under “Business” section. NGOs and registered Educational institutions such as University of Calgary, could apply for a ad-free account without any addition cost. Contact Google Inc for more details.

This will also reduce the load on your servers specially during peak search periods. For some users CSE will speed up the search results because it is run on a Google server independent of their web server.

Some claim, which I am not sure about, that the CSE quarries will increase the page racking of your web pages in Google index. However, I can not seems to find any official information on their website.

Creating a Search Engine

Google Inc constantly updating their user interface (UI) on all of their products and services. The Google CSE administration section has been changed several times now that if you “Google search” information about it, you will see slight variations in instructions. As of 31-May-2013, the following steps would work for sure. Also keep in mind, they have switched from using PHP functions and iframes to JavaScript codes. This is better for most developers working with CMS programs.

  • Signup for a Google CSE Account or use your existing Google Account (Gmail, Drive, etc) at here
  • Create a Search Engine using admin options using New search engine. After creation verity your website ownership (if you haven’t done that in the past for other Google services such as AdSense). These are very easy to do, so I am not going to explain in depth.
  • Click on the newly created CSE and go to Setup. There you will see a lot of option, which also may appear in other areas such as in the Look and feel section. Again, I am not going to touch this today. The only thing we will change right now is the layout under Look and feel.
    Layout tab in Look and feel section.
    Layout tab in Look and feel section.
    Because most website owners wants to have a search form separated from the results page (almost all default CMS search engines), choose Two page layout and click Save and Get Code.

    Note: There are several options on how the results are shown. We will just stick with one, Two page option. Play around with your account for others.

  • Before you copy the code, click on Search Results Details button. It will show you an option for your results URL and an option for query parameter.
    Search Results Details drop down window.
    Search Results Details drop down window.
    Enter the intended search results page location (second red arrow) and change the query parameter to whatever you like. I recommend keeping the query parameter in its default state, q, because most CMS programs use s and other letters for their default built in site search. I found if this parameter is exactly the same as the built in one, it could potentially create a code conflict. But you can use anything you like from one character to several. Examples of custom parameters I came across on well reputed sites, cx, ser, search, s, etc.
  • After you set up everything by following the steps above, you are ready to copy the code! Make sure you copy and paste both the search form and the search results code.
    Get the codes.
    Get the codes.
    We will make a one simple modification to the results code later…
  • Copy and paste the search form at whatever the location you like and the results code in the same per-defined location.

Search form on steroids

If you want to use all the Google default settings on a simple HTML/PHP site, then you are done. But where’s the fun in that? There are few things you can do with a custom written search form. But you have to be careful on certain tags and attributes. You must have the name is set to the per-defined query parameter. I choose to go with the Google default, q. I will walk you through several different scenarios of integration.

Integrating CSE to HTML/PHP site

The following code will create a simple HTML form.

<form id="cse-search-box" action="http://google.com/cse">
  <input type="hidden" name="cx" value="YOUR SEARCH ENGINE ID goes here" />
  <input type="hidden" name="ie" value="UTF-8" />
  <input type="text" name="q" size="31" />
  <input type="submit" name="sa" value="Search" />
</form>

But this will not send the results to your custom results page we created. In order to do that, replace the http://google.com/cse with YOUR_URL. On this site it would be /blog/gsearch/(from now on I will be using this URL in my examples) or I could also use http://sanuja.com/blog/gsearch/.

Custom form background image

The copy/paste code Google provide for your CSE has a background image, cse_watermark. But in our custom search form, have the text “Site Search (type+Enter)”. If you prefer the original Google CSE look and feel, we can add that using the the same code Google uses. The only change I would make is to load the background image from your own server as opposed to loading directly from Google. This will reduce the load time of your pages with the CSE form.

First we will extract bits of code from Google provided search box and then we will add that to our custom HTML form. Copied the following from the official Google CSE Blog.

<input autocomplete="off" type="text" size="10" class="gsc-input" name="search" title="search" id="gsc-i-id1" style="width: 100%; padding: 0px; border: none; margin: 0px; height: auto; outline: none; background-image: url(http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif); background-color: rgb(255, 255, 255); background-position: 0% 50%; background-repeat: no-repeat no-repeat;" dir="ltr" spellcheck="false"/>

The part we are interested in is style="width: 100%; padding: 0px; border: none; margin: 0px; height: auto; outline: none; background-image: url(http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif); background-color: rgb(255, 255, 255); background-position: 0% 50%; background-repeat: no-repeat no-repeat;" You can add this exact background image code within your input tag. If you took my advice and decided to load the image from your own server, change the background-image: url(YOUR_IMAGE_URL) to the appropriate URL.

Integrating CSE to WordPress

Let’s say you want to replace the default search in your CMS with the Google CSE. You can do this by editing the file or the code that contains the default search form. In WordPress it is searchform.php and in Drupal it is search-theme-form.tpl.php.

For the WordPress(WP) and Drupal(DP) examples, I am going to strip the search form as much as possible and add items from the barebone code. The following codes are separated with comments in between them. It is very self explanatory; the first one is the most barebone (must have values) and new tags, values and attributes get added as you go down the code.

<!--1. Must haves in searchform.php-->
<form method="get" id="searchform" action="/blog/gsearch/">
<input type="text" class="field" name="q" id="q" />
</form>

<!--2. Value added attributes-->
<form method="get" id="searchform" action="/blog/gsearch/">
<input type="text" class="field" name="q" id="q" autocomplete="on" placeholder="Site Search (type+Enter)"/>
</form>

<!--3. Adding webkit speech support-->
<form method="get" id="searchform" action="/blog/gsearch/">
<input type="text" class="field" name="q" id="q" x-webkit-speech/>
</form>

<!--4. Full blown HTML form-->
<form method="get" id="searchform" action="/blog/gsearch/">
<label for="q" class="assistive-text">Search</label>
<input type="text" class="field" name="q" id="q"/>
<input type="submit" class="submit" id="searchsubmit"/>
</form>

Few new items autocomplete="on" is one of many Google CSE input tag attributes. “Google it” for more information on it. The placeholder="Site Search (type+Enter)" is a HTML/5 input tag attribute for displaying a message to the user within the search box (kind of like the background image). The x-webkit-speech or x-webkit-speech="x-webkit-speech" is an odd code. It is only utilized by webkit browsers and most specifically Google Chrome. It is speak to text framework. The nice thing about it, when it is not supported by the browser, it will simply disappear.

You can replace the default code in searchform.php with one of the three codes above in WP. DO NOT save all three sets; it may result in a PHP error. I recommend using a Child Theme with the searchform.php to implement this change to the theme file.

I prefer the second or the third one. On this site we have a combination of the second and the third one. The problem with the forth code set with full blown version is that it may mess up your theme. It will add two extra lines; one on top with “Search” and one on the bottom with the button, “submit”. However, if your search box is in a sidebar area or placed in a location with lots of room, this last option can be the best one for you. It is all coming down to the styling of the website.

Integrating CSE to Drupal

Now I have already introduced all the nuts and bolts of Google CSE, we can jump into custom Drupal module creation. According to the guidelines for Drupal modules, which is like WP plugins, you should create the following files;
– CHOOSEN_NAME.info
– CHOOSEN_NAME.module
– CHOOSEN_NAME.js

The only major difference between DP and WP implementation is that in Drupal, even the integrated search itself is actually a “module block”. Therefore, you can simply create a module and install it. All the instructions for this is already well written here. If you have any specific questions, feel free to contact me.