Category Archives: Computer Science

Mostly programming and coding work related to PHP, HTML, Java, C#, Python and any other that I come across. May also include consumer level articles.

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.

VMware Workstation setup

vm_mainNot everyone knows what is a virtual machine, let along using them. They are used by students and industry professionals to learn, program and test software operations in different platforms. I use them to learn the behaviors of multiple different flavors of operating systems (OS) without using expensive hardware.

Skip Tech Jargon

VMware

In computing there are many methods and processes used for creating these “dummy” environments. I called them “dummy” because when I installed an OS or a program in a virtual environment, I am not actually using separate hardware for my needs. You can install Windows Server 2012, Lubuntu or any version of desktop OS in you desktop computer without deleting any of your files or formatting the main hard drive.

VMware is a company specialized in virtualization software. They have a wide range of products. The VMware Workstation is one of the most basic programs used by non-advanced users. You do not have to be a programmer and/or a geek to use it as long as you can read and understand basic computer instruction!

Basally virtualization software allow any supported OS versions to installed into a folder (directory), which acts and behave as a separate computer, but it uses the exact same hardware as your current unit. VMware have developed programs to act as this middle man for processing I/O (inputs and outputs) to the virtual directory.

You have to buy a copy of VMware Workstation from here or find an evaluation copy and install it in your computer. Follow the instructions on screen, like any other software install. Please keep the default settings if you are unfamiliar with this program.

Choose the OS

VMware provide the platform for virtualization and you can choose from many different OSes to install. I recommend, Lubuntu, which is based on the Open Source OS, Ubuntu. You may download Ubuntu instead, but it requires more resources to run and good for the advanced users. In addition, you may installed any other proprietary software such as Windows 8, as long as you have a valid license.

Mounting the OS

I should have used the word, “mounting” instead of “installing”, because we don’t really install the OS in our machine with VMware. What we do is mounting it (Google it for the difference). Mounting allow to create independent Virtual Machines for each OS. Follow the instructions below for mounting. This is specific to VMware Workstation, but generally most of these instructions can be used for other virtualization programs with little modifications.

First download the preferred OS iso file and either save it in the same same computer in which VMware is installed (recommended) or burn it into a disc (not recommended, read below for why).

  • Open VMware and go to File (dropdown) –> chose New Virtual Machine…
    Adding a new virtual machine.
    Adding a new virtual machine.
  • Choose Typical –> press Next >
    Two paths to install.
    Two paths to install.
  • There are two options for the install. I strongly recommend using the iso disc image method. This will not only save you from burning CDs every time you want to install a new OS, but also give you the flexibility of OS updates. The mount media can be updated by replacing the ISO file in the future. It also provide added protection of having the media always in computer.
    Choosing the downloaded iso file.
    Choosing the downloaded iso file.
    Click on Browse… and select the downloaded iso file.
  • If you choose to mount Lubuntu, you will get this warning message;
    Warning: Could not detect the OS type.
    Warning: Could not detect the OS type.
    That is perfectly fine. Just click Next > and you will be directed to a new window (see below). Choose Linux for Guest operating system and Other Linux 2.6.x kernel or it’s 64-bit cousin.
    Guest OS and it's version.
    Guest OS and it’s version.
    If you have 32-bit ISO file, choose Linux 2.6.x kernel without 64-bit. If you have an older or a newer kernel based ISO file, choose appropriately.
  • Click Next > and choose whatever the name you want to give your Virtual Machine and the location of the install. I recommend using an SSD location if you have dual hard drives. Click Next > again for Disk Capacity Options.
    Disk capacity configuration.
    Disk capacity configuration.
    While the VMware recomonds 8.0 GB for maximum size, if you have lots of space, I recommend using a bit more like 10.0 GB. Yes, splitting is better for most computers under 500 GB hard drives. If you are on an SSD, I would not expect a typical SSD user to have more than 500 GB on their single SSD drive (at the time of this post, 2013).
  • This is the final step in which, a summery of all your configurations will be displayed. Do not open Customize Hardware… unless you are an advanced user.
    Summery of configurations before install.
    Summery of configurations before install.
    Click Finish and you are done.

Virtual Machine

After installation is done, you will see your new VM under My Computer tab. You may install several VMs on a single computer. All your VMs will be listed under My Computer tab. The status of the newly installed VM should read “Powered off” and double click to open it.

VM open tab.
VM open tab.
You will be directed to a new tab with operational information (see above).

There are few important things in this tab. Please refer to the figure above;

1. VM Details: Useful when troubleshooting errors.

2. Window: Indicates the current state of the VM.

3. Devices: Provide a lot of valuable information on the entire VM. You can double click on any of the items to modify the machine settings.

You can now use the Power on (green “Play”) button to turn on the VM.

My Lubuntu VM.
My Lubuntu VM on a Windows unit.

Termination Options

Do not get confused by the power down options when leaving a VM. These options are there to help you.

Power down options popup window.
Power down options popup window.

Suspend: VM will keep track of your last operation but will terminate all the processes. It is similar to hibernation or sleep function on Windows computers. You will not lose your data and yet the allocated memory for the VM will be free for other processes (no background runs).

Power Off: Completely shut down the VM. If you have any opened files, all the modifications will be lost. This is equivalent to normal shutdown of a physical computer.

Run in Background: VM will continue to it’s operations in the background. Use this options for installing updates in the VM OS but it will consume memory in your main computer.

Optimizing print friendly version

Sometimes it is very important to provide users with access to “print friendly” (printer friendly, print file, etc) version of the web content. When publishing content focused pages, the added images / diagrams, side bars and other items that help creates a smooth surfing structures can also work against “printability” of a website. Newspapers, University and other text-content based websites are catered towards individuals who may want to have a physical copy of the materials published. But when a user try to print without a properly formatted print friendly option, it could print with; lots of black space in between, off centered, advertisements and occasionally not printing anything at all. This article is written based on WordPress CMS, but can be used as a guideline for any website with CSS driven print friendly files.

Skip Tech Jargon

What is a print friendly version?

A print friendly version is exactly what it describes. It is a version of the web page formatted specifically for printing as opposed to “looks and feels”. A good printer friendly version would reduce the ink usage and maximize the area of printing for content. Most developers like me, also reduce the unwanted texts and formatting such as in page buttons such as “Also check out these articles” list and the “Skip Teach Jargon” button.

This version can also be used for saving web pages. I use Adobe Acrobat Professional to save web pages with just the text. If you convert a web page into a PDF (Portable Document Format) file, it will also include those junk materials. By using the print friendly version, not only the PDF file would be easy to read, but also it will reduce the file size significantly. This is an advantage for web developers as well. Since the file size has been reduced, the server load for downloading text content from your site for printing and PDF formatting will be significantly reduced.

Print friendly files

There are several ways of creating print friendly version of a web page. But with ten years of experience I can safely say there are only two categories of doing things in computing; the dumb way and the smart way.

The “dumb” method of doing it is actually was not always dumb. In the old days (back in 1995 and such) we used pure HTML with graphics for web development. We did not have access to web based programming languages like PHP (Hypertext Preprocessor) or CSS (Cascading Style Sheets). Most developers decided to create two separate files of the same material; one with margins, side bars, menus, etc and another with just the context. Then the Adobe came up with their PDF platform. By utilizing PDF now people created separate files, but this time as PDF files instead of HTML files. Still this is redundant and consumes a lot of time and energy.

Then several server operating system developers like Microsoft (.NET/ASP) came up with automated solutions to get rid of the unwanted clutter from printing. As long a web developer uses their framework, one can build a site with no redundant files. It was still expensive and not an effective method for small scale websites that still may be on pure HTML.

In 1980s a web based styling language was created called CSS. However, it didn’t get popular until recently when PHP was introduced in 1994. Not only major web sites like IBM.com extensively began to use CSS and PHP, but the CMS (Content Management Systems) have picked up their phase with it. Long story short, thanks to CMS programs and open source nature of CSS and PHP has revolutionized how we create print friendly versions.

In CSS, div and /div tags are like boxes that holds your code. You can label every div box using arbitrary identification (id) values which can be letter or numbers of both (no white space). Using these ids you can make changes to specific set of content (as long as you do not have two divs with same id).

CSS class vs id

Either class or id attribute can be used with elements such as p and div. Their functions are actually the same/similar. There is a confusion even among professional web developers on which one to use. If you go by the book, then id is used when the behavior occurs only once per page. The class is used when the behavior is applied multiple times on a single page. For our discussion, I am going to use ids to keep it simple.

Creating a print friendly file

ERRORS
If you make an error during modifications and could not log back into your WP Dashboard, use the backend access of your server to delete the newly added code and fix the problem.

Please use CSS because this is the best way to reduce server load on your computer. It is a very flexible language. CMS programs like Drupal and WordPress use div elements to indicate where different types of information begins and where they ends. They are like anchors or identification hooks. By manipulating the behaviours of these, we can produce very well developed print friendly files. In fact, they are dynamic and never create the file in advance (except if you have cache enabled). Every time you make a change to your page, it will also affect the printer friendly version since it also uses the exact same database as the one you just edited.

Another important thing with CSS is that you can edit a CSS file without changing anything in the original file. Here is an example of print friendly setup on the HTTP end. In the CSS code below, I use an external CSS file to give the instructions for print friendly version. The actual print friendly version is not directly modified.

<div id=”header”>
<img scr=”boo.jpg” width=”900” height=”60”>
</div>
<div id=”content”>
Hay Sanuja, <br> I think you are cool!<br> Do you think SiO<sub>2</sub> is <u>super-hot</u>?
<p id=”like”>But I remember you said you like <i>kyanite</i>. That is not cool and I hate you.</p> 
</div>
<div id=”myads”>
Google Ads are awesome. Do you like the following ads?
<p>Go crazy with minerals! Buy our microscope today. It comes with Germans for your convenient.</p>
</div>

Optimizing printed materials

By controlling what gets printed, we can optimize the print friendly format. Do you want your users to print with advanced styles such as large text headings? Do you want your users to print unwanted texts such as related posts? How about the title image of your site?

On this website, I have disabled title image, Google Ads, unwanted texts and clumsy formatting. If you decided to add scripts from different sources, you can still manage them as long as the scripts you used are well written. I use FireBug plugin for FireFox browser (it is also available for Chrome) to determine what div container is used for each section of the script. By using this knowledge, you can say {display: none;} for any and all elements you do not want your users to get print.

For example, by using .tag-cloud {display: none;} in the CSS file for printing, will remove the tag-cloud (if it uses “tag-cloud” as it’s div id) from printing.

Remove title image

Now by writing into the external CSS file with the id for the title image (it is header in my particular site), I can produce a file for printing without the large image.

/*
REMOVE TITLE IMAGE FROM PRINT
*/
@media print
{
  .header {display: none;}
}

REMINDER
The identification values for div containers may varies from site to site since they are arbitrary values.

Remove advertisements

I have the ads div container with identification “myads”. To prevent it from printing, I added the following to my external CSS.

/*
REMOVE ADS IMAGE FROM PRINT
*/
@media print
{
  .myads {display: none;}
}

In the above example, we keep all the styling elements such as breaks, underlines and so on. But we get rid of the unwanted containers such as ads and header.

Remove Print icon from a specific page

On my Welcome page, you do not find an option for Print. The icon has “disappeared” because I specifically removed (hide) the print friendly version from the front page. To do this you have to specify the page id and the div container id, In this particular example, the page/post id is 888 and the div id is print.

REMINDER
Regardless of what we edit, these codes are added to the main CSS file (NOT to the print CSS file). However, the @print will inject the CSS modification into the print.css file.

/*
REMOVE PRINT ICON FORM SPECIFIC POSTS
*/
body.page-id-888 .print {
    display: none !important;
}

The tag, !important is a used to promote the condition to priority. We do this because by default servers read CSS files one line at a time going from top to bottom. During this read, whatever the first condition given to an element will be applied or some cases what ever the last one. By adding !important at the end we force that particular styling condition regardless of where it appears in the style sheet.

If you want to do this to several specific pages, you can add each area with the same display: none condition using a comma between them.

/*
REMOVE PRINT ICON FORM WELCOME, CONTACT AND DONATE PAGES
*/
body.page-id-888 .print, body.page-id-80 .print, body.page-id-5694 .print {
    display: none !important;
}

This reduces the CSS file size (and remove clutter) hence improving the load on your server.

For sites on CMS programs

If you are on a CMS program like Drupal or WordPress, please create a Child Theme (“sub-Theme). Edit the CSS file(s) in this Child Theme because it optimize the load time (since it will only be loaded once) and it will prevent your custom edits from deletion during theme updates.

Advanced Modifications

Please be advised that if you are going to perform the following edits on a live website, you take the risk of bringing down the entire site if you make an error during the following edits. This segment is specifically for those of you who are advanced PHP and CSS users.

Overriding the default print.css style page with another in WordPress CMS. You can use the following code (copy and paste) to create your custom print CSS file.

add_action ('wp_head', 'printstyle' );
function printstyle() {
echo "<link rel='stylesheet'  href='LOCATION_OF_CSS/YOUR_NEW_print.css' type='text/css' media='print' />";
 }

I would like to thank Kenneth John Odle for teaching me CSS codes over the last few months. The above code also from his great work. Please visit his blog for more fun stuff.

Replace the LOCATION_OF_CSS/YOUR_NEW_print.css with the location of the new CSS file and the file name.

Summery

Click on any print icon on the top right hand side of my posts or pages for a live preview on some of these conditions. I recommend using Google Chrome for this because it will generate a preview before printing. If you do this on FireFox or IE, it may directly send the file to your printer. If you have a PDF program, try it out by printing my Print Friendly versions to PDFs.

Following is a set of all the code with general inputs. Replace tags and ids appropriately.

/*
REMOVE XXXX FROM PRINT
*/
@media print
{
  .XXXX_ID {display: none;}
}
/*
REMOVE XXXX FORM SPECIFIC POSTS
(not specific to print friendly)
*/
LOCATION_HERE.page-id-ID_NUMBER_HERE .XXXX {
    display: none !important;
}
/*
REMOVE XXXX FORM SPECIFIC MULTIPLE PAGES/POSTS
(not specific to print friendly)
*/
LOCATION_HERE.page-id-ID_NUM_01 .print, LOCATION_HERE.page-id-ID_NUM_02 .print {
    display: none !important;
}

  • Sanuja recommended using FireFox browser with FireBug plugin for identification.
  • He also recommended using Notepad++ for editing and/or FTP live editors (when the site is not on a CMS).
  • Create a separate CSS file for print friendly version. Most CMS programs comes with independent print friendly CSS file(s).
  • Use div and other element ids to denote specific segments of your data.
  • Main content should have it’s own div/element id.
  • While you can just print out the content only, it is recommended to have ids on all major elements such as ads, extra texts, etc.
  • Always perform edits in increments and create backups in between.
  • Reduce CSS file size by reducing clutter when same modifications is applied to several different pages/areas.

Export and import SQL databases

Migrating SQL/MySQL databases from one location to another is not something most of you will do. There are circumstances where migrating a database from the administration side of a server is easier than trying to manually copy data. If you change your web host (or server) after creating databases in the current location or if you wanted to back up your database files manually, then it is essential to know the fundamentals of migration.

Skip Tech Jargon

Background

SQL/MySQL databases are like MS Excel spreadsheets or MS Access files. The only difference is these databases run on a web (or internal) server as oppose to running on a local computer. Fundamentally they are similar in operation, but differ in how they process and store data. The MS Excel is one of many low level database program. The MS Access is step up from Excel with much more advanced functions. The SQL/MySQL databases are much more advanced and extremely flexible than the previous products.

The flexibility of SQL/MySQL can be summarized…

  • They will run most (as far as I know, all) operating systems.
  • The deployment and distribution management is very flexible.
  • They have the ability to run several databases while communicating between them.
  • Easy universal database migration options (no proprietary files).

Migration

For this example, I used phpMyAdmin program installed on a Linux server. This particular example involves in transferring databases of mTouch WP plugin data from one location to another. You can use the exact same steps to migrate SQL/MySQL databases in phpMyAdmin. If you you a different program for database management, it should be similar to phpMyAdmin, but be careful of how you export it.

This is for advanced users ONLY. A mistake can take down your entire website. Use the guide at your own discretion.

1. Make sure your program/plugin/add-on is upto date.

2. Log into your server and then phpMyAdmin.

3. Choose the database location from the left pane of the phpMyAdmin window.

Choose the database location from left pane.
Choose the database location from left pane.

3. Select the database related to your program. It is better if you export and import all databases used by the program. Then go to Export.

Select specific files for export.
Select specific files for export.

4. Choose the export settings appropriately. As long as you will be using the same phpMyAdmin at the new location, it should not matter which format you save export the files.

Choose the configuration for import.
Choose the configuration for import.

5. Log into the new server/location and install the save exact software. It is highly recommended using the exact same software version as the one you are migrating from.

6. Long into the phpMyAdmin (new location) and find the location of the databases on the left pane of phpMyAdmin window.

7. Backup the new databases created by the program by exporting them (same as above). Then upload and install the old files using import pane.

8. Validate the install by going into the front end. If you have done everything right, you should be able to now have the database up and running.

It is as simple as that. Backups are very important so never ever skip backups before and during modifications.

Creating a skin from Graphene theme

Please note this article is specifically written using Graphene Theme. The concepts can be implemented on others themes with slight modifications.

Yes, WP is a very flexible CMS with wide range of third party extensions. Another reason for it’s flexibility is that the developers of WordPress CMS are pushing for multipurpose program. Within few years of launch, it went from a casual and easy to use blogging platform to a large scale web management system. To me it is a good thing for average user. Like I always believe, jack of all trades is better than mater of none.

Skip Tech Jargon

Mix and match

When we have so many open source free software to choose from, why not use them all? Most of the time, it is better to use specific software for particular task than to use one for all. WordPress (WP) for blogging and small scale websites, Drupal for large scale websites with large user base, phpBB for forums, phpList for newsletters, etc are few specialized software out of many. If you are designer then you would have to theme each and every one of the independent system to match each other. This can be done in two ways; by creating themes or through skinning.

What is skinning?

Both skins and themes creates “holistic and integrated spatial organization” of materials in their own ways. Skinning is different from theming because what skin keep all the elements of one platform and embed into the looks and feels of another. It neither changes any theme files nor create a valid theme. Themes directly change the structure of the front end interface and they are limited to the conditions of the program. For example, if I want to create a phpBB theme (a well written one), I have to comply with the guidelines for phpBB. Skinning takes all those conformities out of the equation because it is just a “wrap around” for “eye candy”. Once a skin is extracted from one program and installed on another, it just apply the same/similar style across different platforms.

Graphene theme skin

I will guide you on how to skin a WP theme using Graphene for WordPress. Some parts of this site uses phpBB and phpList with this exact skin. First take a back up of all your files and data. I would take up a task like this at nadir hours. You don’t want to mess with any code when your website is full of visitors. If you are launching a new site, consider things like forums before hand.

Copying the code

Log in to your website and choose appropriate Column Option. It is better to choose an option with no side bars because the screen real estate is very important. You can do do this by two ways in the Graphene Theme. One is using the Graphene Options.
Log in –> Dashboard –> Appearance –> Graphene Options –> Display(tab)

This will make the entire website (each and every page) default to whatever you choose. Another way to do this is under each post/page, you should find an option to choose Column configurations specifically for the current post/page. I used the later since I don’t want the entire website to have no columns during the setup.

After you setup the page/post, visit the page and go to the source code from your browser. Copy the code from div id="container" to div id="content-main" class="clearfix grid_16". Do NOT copy the following code. It will break your site since this is specific to my site.

The following code is used as an example. DO NOT copy the code and paste to your system even if you are using this theme. I am NOT responsible for any issues arise out of editing the core files of phpBB and/or WordPress.

<div id="container">
<div class="bg-gradient">
<div id="container" class="container_16">    
<div id="top-bar">

<!--Top Social Profiles bar-->
  <div id="profiles" class="clearfix gutter-left">
      <a href="https://G+_URL" title="Sanuja on Google+" id="social-id-1" class="mysocial social-custom" target="_blank"><img src="http://FULL_URL.png" alt="Custom" title="Sanuja on Google+" /></a>
      <a href="http://FB_URL" title="Link sanuja.com on FB" id="social-id-2" class="mysocial social-custom" target="_blank"><img src="http://FULL_URL.png" alt="Custom" title="Link sanuja.com on FB" /></a>
      <a href="LI_URL" title="Sanuja on LinkedIn" id="social-id-3" class="mysocial social-custom" target="_blank"><img src="http://FULL_URL.png" alt="Custom" title="Sanuja on LinkedIn" /></a>
      <a href="TW_URL" title="Follow on Sanuja Twitter" id="social-id-4" class="mysocial social-custom" target="_blank"><img src="http://FULL_URL.png" alt="Custom" title="Follow on Sanuja Twitter" /></a>
      <a href="http://FULL_FEED_URL" title="Subscribe to sanuja.com RSS feed" id="social-id-5" class="mysocial social-custom" target="_blank"><img src="http://FULL_URL.png" alt="Custom" title="Subscribe to sanuja.com RSS feed" /></a>
  </div>

  <!--Search form-->
  <div id="top_search" class="grid_4">
      <form id="searchform" class="searchform" method="get" action="http://MAIN_URL">
      <p class="clearfix default_searchform">
      <input type="text" name="s" onblur="if (this.value == '') {this.value = 'Search';}" onfocus="if (this.value == 'Search') {this.value = '';}" value="Search" />
      <button type="submit"><span>Search</span></button>
      </p>
      </form>
   </div>
 </div>

<!--Banner image->
<div id="header">
<img src="http://BANNER_URL.jpg" alt="" class="header-img" />        	       
<h2 class="header_title push_1 grid_15"><a href="http://MAIN_URL" title="Go back to the front page">Sanuja Senanayake</a><h3 class="header_desc push_1 grid_15">noreply@sanuja.com may end up in spam. Check your spam box.</h3>                
</div>
    <!--Main navigation menus-->
    <div id="nav">
                <div id="header-menu-wrap" class="clearfix">
			<ul id="header-menu" class="menu clearfix"><li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-ancestor"><a href="http://MAIN_URL"><strong>Home</strong><span>Index Pages</span></a>
<ul class="sub-menu">
	<li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://sanuja.com">Front Page</a></li>
</ul>
</li>
<li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-ancestor"><a href="http://FULL_URL/about"><strong>About</strong><span>Site Information</span></a>
<ul class="sub-menu">
	<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/about">About this Site</a></li>
	<li id="menu-item-2297" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-ancestor"><a href="http://FULL_URL/about/biography/">Biography</a>
	<ul class="sub-menu">
		<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/about/cv">Résumé (Senanayake)</a></li>
	</ul>
</li>
	<li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/about/system">Home Network and Servers</a></li>
	<li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/about/faq">Frequently Asked Questions</a></li>
	<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/about/copyright">Copyright &#038; Privacy</a></li>
	<li id="menu-item-979" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/about/sitemap/">Site Map</a></li>
</ul>
</li>
<li id="menu-item-27" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-ancestor"><a href="http://FULL_URL/category/uncategorized/"><strong>Categories</strong><span>Article by Category</span></a>
<ul class="sub-menu">
	<li id="menu-item-1769" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/computer-science/">Computer Science</a></li>
	<li id="menu-item-2635" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/ce/">Consumer Electronics</a></li>
	<li id="menu-item-1716" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/earth-science/">Earth Science</a></li>
	<li id="menu-item-30" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/documentary/">Documentary</a></li>
	<li id="menu-item-23" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/opinion/">Opinion</a></li>
	<li id="menu-item-1142" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/philosophy/">Philosophy</a></li>
</ul>
</li>
<li id="menu-item-995" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-ancestor"><a href="http://FULL_URL/exams/"><strong>Resources</strong><span>Exam Bank/Links</span></a>
<ul class="sub-menu">
	<li id="menu-item-994" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-ancestor"><a href="http://FULL_URL/exams/">Exams and Quizzes</a>
	<ul class="sub-menu">
		<li id="menu-item-998" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/anth201/">Anthropology 201</a></li>
		<li id="menu-item-1512" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/cpsc217/">Computer Science 217</a></li>
		<li id="menu-item-999" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy201/">Geology 201 GLGY/GOPH I</a></li>
		<li id="menu-item-997" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy311/">Geology 311 Mineralogy</a></li>
		<li id="menu-item-996" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy323/">Geology 323 Geochemistry</a></li>
		<li id="menu-item-2489" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy341/">Geology 341 Structure</a></li>
		<li id="menu-item-2499" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/goph355/">Geophysics 355 Exploration</a></li>
		<li id="menu-item-1754" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy381/">Geology 381 Strat &#038; Sed</a></li>
		<li id="menu-item-2064" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy381-final/">Geology 381 Strat &#038; Sed Final</a></li>
		<li id="menu-item-1426" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/alberta-class-5-gdl-quiz/">Alberta Class-5/7 GDL Quiz</a></li>
		<li id="menu-item-1472" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/canadian-citizenship-test/">Canadian Citizenship Test</a></li>
		<li id="menu-item-1069" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/other/">Other Types of Quizzes</a></li>
	</ul>
</li>
	<li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/links">External Links</a></li>
	<li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://secure.sanuja.com/"><img src="http://sanuja.com/lock_24.png" height="12"> Secure Access</a></li>
</ul>
</li>
<li id="menu-item-990" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-ancestor"><a href="http://FULL_URL/science/"><strong>Science</strong><span>Geology/Computer</span></a>
<ul class="sub-menu">
	<li id="menu-item-991" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/science/">Introduction</a></li>
	<li id="menu-item-3038" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/science/computer-science/">Computer Science</a></li>
	<li id="menu-item-3026" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/science/earth-science/">Earth Science</a></li>
	<li id="menu-item-1722" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/science/field-geology/">Field Geology</a></li>
	<li id="menu-item-987" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/science/funny/">Funny Science</a></li>
</ul>
</li>
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-ancestor"><a href="http://FULL_URL/contact"><strong>Contact &#038; Feedback</strong><span>Please Leave a Comment</span></a>
<ul class="sub-menu">
<li id="menu-item-2965" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-577 current_page_item"><a href="http://FULL_URL">Subscribe to Newsletter</a></li>
	<li id="menu-item-1286" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/forum/">Forum</a></li>
</ul>
</li>
</ul>            
    <div class="clear"></div>
</div>
<div class="menu-bottom-shadow">&nbsp;</div>
</div>
<div id="content" class="clearfix hfeed">
<div id="content-main" class="clearfix grid_16">

You have to use the exact location of each file and replace FULL_URL plus whatever comes after that. For example, I have http://sanuja.com/blog/about/ instead of http://FULL_URL/about/ in the file I use.

Editing phpBB

After a successful install of phpBB, open overall_header.html and overall_footer.html file using cPanel, FTP or other back-end file access method in the following location:
…YOUR_INSTALLED_FOLDER / styles / prosilver / template /

The prosilver is a default theme that comes in the phpBB software bundle. You may edit any other theme and/or copy the theme for backup before editing it. Which ever the theme you decide to skin, find the template folder because that’s where we will find,

    → overall_header.html
    → overall_footer.html

In the overall_header.html locate the the area in which the phpBB begins it’s theme and paste the code just above it. I entered it in the first line after the body of the header file;

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

For the overall_footer.html repeat the same process except make sure all your div tags are closed properly. I found two divs not closing at the end causing the entire foot menu to get stretch. Of course, you add the footer code from WP at the appropriate place in the footer file. I added after the following code in the footer file;

<div>
     <a id="bottom" name="bottom" accesskey="z"></a>
     <!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>

Copy the information for the skin head as instructed above. If you have a different theme, then go to the source code of a loaded page and find the CSS containers for header and footer.

Summery

For those of you who tying to implement skins across WP and phpBB follow the following guidelines (with any theme):

  1. Install WordPress and phpBB on your server (recommend using two different folders).
  2. Make a backup of each system before editing the code.
  3. Create a page with no side bars (recommended, but may use side bars).
  4. Load the page/post on a browser and view the source code.
  5. Look for any div elements; where do they start, where do they end and what do they contain.
  6. Only copy the header data from WP to import into overall_header, vise versa. When copying, copy the information within div elements with full URLs to prevent 404 errors.
  7. Use the documentation for the new system (in this case phpBB) for it’s outline files.
  8. Paste the data copies in step 5 into the appropriate location in the new system and save.
  9. Clear cache; on server/system, browser and any others that would store cache files. I would clear the cache after completing on each and very single step. I recommend updating large scripts in segments, which will reduce the possibility of a major code error.

References