WampServer, TNG, and WordPress for Genealogists

The Next Generation of Genealogy Sitebuilding (TNG) and WampServer are an unbeatable combination for developing genealogies. Adding WordPress to this combination extends TNG to include a blog.

Early on, I decided to install both TNG and WordPress online. I decided to allow both packages to do what they do best: TNG to host my family’s genealogy and WordPress to compliment TNG with useful articles, tips, and tutorials to help others with their own genealogies.

I use WampServer to test, develop, and maintain TNG and WordPress on my PC. With WampServer, I was able to learn about installing and styling TNG and WordPress quickly and easily—before putting them online. When new versions of the software are released, I can try them out first on WampServer to insure that they will work properly online. WampServer also enables me to test WordPress plugins before activating them online. For backup purposes, I can mirror all of my online data on the testbed.

In this article, I will show how to install WampServer and, once installed, how to install TNG and WordPress on the testbed—and, finally, how to link TNG and WordPress together. Links to web sites and additional information are provided in the “Resources” section at the end of the article.

If you work through this tutorial, you will not only end up with a great testbed for TNG and WordPress but you will also learn the skills necessary to install other software packages. For example, if you ever wanted to try out a PHP and MySQL forum, such as Phorum, or explore a different Content Management System (CMS), you will have the skills and the development platform to do so.

INSTALLING WAMPSERVER

As stated on the WampServer website,

“WampServer is a Windows web development environment. It allows you to create web applications with Apache2, PHP and a MySQL database. Alongside, PhpMyAdmin allows you to manage easily your databases.”

WampServer is very easy to install, although there are a couple of after-installation fixes that need to be done. These fixes will maximize the software’s security and usefulness.

After downloading and starting the installation file, it is only a matter of clicking through a few screens for a successful install. For my installation, I downloaded the latest 64-bit version of WampServer. My installation choices differed from the defaults only once: I chose Firefox for my browser. When the installation completed, there was a new icon inWampServe icon in system tray the system tray and also on the desktop. I “pinned” the desktop icon to the task bar for one click availability.

Left clicking the system-tray icon brings up the main WampServer menu (Figure 1). Since I only use WampServer as a testbed for local use, I never click the “Put Online” menu item. Selecting “Localhost” from the main menu brings up the WampServer default web page (Figure 2).

WampServer Menu

Figure 1: WampServer Main Menu

Activate the Apache Rewrite Module for Permalinks

Figure 2: WampServer Default Web Page

In preparation for WordPress, I activated one additional Apache module. From the quick-start menu, I selected Apache/Apache modules/ and checked the rewrite_module. You may have to “Start All Services” for this to take effect. When the module has been activated, a check mark will be in front of the option. The rewrite_module is needed for “pretty URLs,” or permalinks. For my WordPress sites, I use a permalink of /%postname%/.

WampServer Default Web Page

Figure 2a: Activate the Apache Rewrite Module for Permalinks

To exit WampServer, right click the server-tray icon and select “Exit” from the menu (Figure 3).

Exit WampServer

Figure 3: Exit WampServer

MySQL FIXES

MySQL is used to store the TNG database. The data is stored in tables. The database is managed using phpMyAdmin. After clicking phpMyAdmin from the WampServer main menu, the administrative screen appeared and displayed two information messages and one security warning at the bottom of the page (Figure 4).

MySQL information messages

Figure 4: MySQL Information Messages

SET PASSWORD FOR LOCALHOST USER ROOT

I cleared the most critical security message first by setting a password for the “root” user. To clear this message, click the phpMyAdmin “Users” tab to display the current MySQL users (Figure 5). As shown in the figure, there is no password assigned to the user root.

no MySQL password for user root

Figure 5: No MySQL Password for User Root

Here’s the procedure for assigning a password to the root user:

  1. Click the “Edit Privileges” icon (Figure 5) for user root to display a pop-up screen which will allow the creation of a password.
  2. Click the “Generate” button to generate and automatically enter a strong password (Figure 6).
  3. Copy and save the generated password.
  4. Click the “Go” button.
set root password

Figure 6: Set Password for User Root

Once the password has been created, a refresh of the phpMyAdmin page will display a couple of nasty looking error messages (Figure 7). These will clear when the phpMyAdmin configuration file is edited to include the new root-user password.

access error messages

Figure 7: Access Error Messages

The WampServer installation placed the phpMyAdmin configuration file at C:wamp/apps/phpmyadmin3.5.1/config.inc.php. Using a basic text editor, the saved root password has to be added—between the single quote marks—to this file as shown (Figure 8) and the file saved.

 configuring the phpMyAdmin root password

Figure 8: Configuring the phpMyAdmin Root Password

Refresh the browser (to refresh the phpMyAdmin screen) and return to the phpMyAdmin Users overview. The user root should now show that a password has been assigned (Figure 9). The error message about the configuration file should no longer appear. Exit WampServer.

phpMyAdmin root password has been set

Figure 9: phpMyAdmin Root Password Has Been Set

UPDATING phpMyAdmin TO THE LATEST VERSION

To update phpMyAdmin to the latest version and clear another information message, first download the latest version. I downloaded the latest version, phpMyAdmin-3.5.3-english.zip, and unzipped it to the C:\wamp\apps\ directory. Next, with a text editor, open the file “phpmyadmin.conf” at C:\wamp\alias\phpmyadmin.conf. Two lines need to be changed in order to point to the new version (Figure 10).

phpmyadmin.conf changes for new version

Figure 10: phpmyadmin.conf Changes for New Version

One more step to go for this fix. Copy the config.inc.php file from your old version of phpMyAdmin to your new version: copy C:\wamp\apps\phpmyadmin3.5.1\config.inc.php to the C:\wamp\apps\phpmyadmin-3.5.3-english\ directory.

After completing this last step, restart wampServer. Select phpMyAdmin from the main menu. The phpMyAdmin information box on the right side of the screen should indicate that the new version is running (Figure 11) and the update information message should no longer appear. Note: you might not see the information as shown in the figure or clear the information message until after a system restart.

new phpMyAdmin version up and running

Figure 11: New phpMyAdmin Version Up and Running

CONFIGURING THE phpMyAdmin STORAGE

Now, for the last fix. This fix configures the phpMyAdmin storage to enable some MySQL extended features. To begin, select “phpMyAdmin” from the WampServer main menu to bring up phpMyAdmin. Select the “Databases” tab. Enter “phpmyadmin” (without the quote marks) into the “Create database” text box and then click the “Create” button. This creates a phpmyadmin database. Next, create a user for this database and a password for the user. To do this, click the “Check Privileges” link for the new phpmyadmin database (Figure 12).

database phpmyadmin has been created

Figure 12: Database phpMyAdmin has been created

add new userClick on the “Add user” link and add the new user as shown below (Figures 13). Note that I used the “Generate” button to generate and automatically add the password. Be sure to copy and save the password for a later step. Click the “Add user” button.

add new MySQL database user and password

Figure 13: Add New MySQL Database User and Password

Now that the phpmyadmin database has been created, we need to create the database tables. In phpMyAdmin, click on the “Databases” tab and then the phpmyadmin (Jump to database) link (shown in Figure 12). Next, click on the “Import” tab and browse to the “create_tables.sql” file, which is located at C:\wamp\apps\phpmyadmin-3.5.3-english\examples\create_tables.sql (Figure 14). An information message will report a successful import and table creation (Figure 15).

importing the phpmyadmin tables

Figure 14: Importing the phpmyadmin Tables

import successful

Figure 15: phmyadmin Database Import and Table Creation Successful

Open the C:\wamp\apps\phpmyadmin-3.5.3-english\config.inc.php file with your text editor. Copy the code shown below to the end of the existing code but before the PHP closing tag (?>). Note: the code was originally copied from C:\wamp\apps\phpmyadmin-3.5.3-english\config.sample.inc.php.

/*
* phpMyAdmin configuration storage settings.
*/

/* User used to manipulate with storage */
$cfg['Servers'][$i]['controlhost'] = '';
$cfg['Servers'][$i]['controluser'] = 'pma';
$cfg['Servers'][$i]['controlpass'] = 'pmapass';

/* Storage database and tables */
$cfg['Servers'][$i]['pmadb'] = 'phpmyadmin';
$cfg['Servers'][$i]['bookmarktable'] = 'pma_bookmark';
$cfg['Servers'][$i]['relation'] = 'pma_relation';
$cfg['Servers'][$i]['table_info'] = 'pma_table_info';
$cfg['Servers'][$i]['table_coords'] = 'pma_table_coords';
$cfg['Servers'][$i]['pdf_pages'] = 'pma_pdf_pages';
$cfg['Servers'][$i]['column_info'] = 'pma_column_info';
$cfg['Servers'][$i]['history'] = 'pma_history';
$cfg['Servers'][$i]['table_uiprefs'] = 'pma_table_uiprefs';
$cfg['Servers'][$i]['tracking'] = 'pma_tracking';
$cfg['Servers'][$i]['designer_coords'] = 'pma_designer_coords';
$cfg['Servers'][$i]['userconfig'] = 'pma_userconfig';
$cfg['Servers'][$i]['recent'] = 'pma_recent';
/* Contrib / Swekey authentication */
$cfg['Servers'][$i]['auth_swekey_config'] = '/etc/swekey-pma.conf';

/*
* End of servers configuration
*/

Enter “localhost” for the controlhost and replace “pmapass” with the pma password you saved earlier (Figure 16). Save the file. Exit WampServer and any other open applications and restart the system. When the system is reloaded, start WampServer and go to phpMyAdmin. All information and security messages should now be cleared.

adding pma password to config.inc.php

Figure 16: Adding Host and pma Password to config.inc.php

INSTALLING TNG

Congratulations! Now that the latest version of WampServer is up and running—error free—it’s time to install TNG. But first, you can use your WampServer experience to create a MySQL database for TNG. The steps are similar to those used when the phpmyadmin database and pma user were created. Feel free to use another database name, username, etc., while completing your own installation.

CREATING THE TNG DATABASE

From the WampServer main menu, select “phpMyAdmin” and then select the “Databases” tab. Enter a database name in the “Create database” text box and click the “Create” button. I called the database for this tutorial “family_connections.”

Next, create a user and password for the database by clicking the “Check Privileges” link for the “family_connections” database. Click the “Add user” link and enter a “User name,” “Host,” and a “Password” (Figure 17). I used the “Generate” button to automatically create and enter the password. Be sure to copy and save the username and password. Click the “Add user” button.

set username and password for the TNG database

Figure 17: Set Username and Password for the TNG Database

DOWNLOADING AND UNZIPING TNG

Rename the default WampServer home page at C:\wamp\www\index.php to something else, such as “original-index.php.” Otherwise, the file will be replaced when TNG is installed—and you might want to refer to it later. Download TNG and unzip the files to the C:\wamp\www directory.

CONFIGURING TNG

Open a browser to C:\wamp\www\readme.html. There are two types of installation: an “Express Installation” and a more complex “Regular Installation.” For this installation, I will use a combination of the two to closely simulate an actual online install. Start by clicking the “Express Installation” link. Perform the following steps (Figure 18):

  1. 3. set permissions and
  2. 6. establish a database connection.

In step 6, you will need to reuse the username and password used to create the MySQL family_connections database.

set permissions and establish a database connection

Figure 18: Set Permissions and Establish a Database Connection

Under the “Regular Installation” at the top left of the readme.html page, select the “Folders” link. Insert a prefix of “fc_” in front of the folder names and rename the folders. Also, from the “Regular Installation,” expand the “Database Tables” link and select number 2, “Create the Database Tables.” Change “tng” to “mfc” for all table names. Save and Create the tables (Figure 19). In an online TNG installation, these simple changes provide extra security against hackers.

configuring folders and tables

Figure 19: Configuring Folders and Tables

Reselect the “Express Installation” link and complete the following steps (Figure 20):

  1. 8. create a user,
  2. 9. create a tree, and
  3. 10. select a template.
finishing the tng installation

Figure 20: Finishing the TNG Installation

TNG is now installed. Enter “localhost” into your browser or select it from the WampServer main menu and the default home page for template 4 should display (Figure 21).

tng home page

Figure 21: TNG Home Page

IMPORTING THE GENEALOGY

You can create your genealogy from scratch or, as I did for this tutorial, import it from an existing GEDCOM file. At the completion of the TNG install, the user is already logged in as “Administrator.” From the TNG sidebar menu, select “Administration.” Select “Import/Export” to import a GEDCOM file (Figure 22).

import/export

Figure 22: Import/Export a GEDCOM

Since I already have the GEDCOM file on my computer, I “Browsed” to it and clicked the “Import Data” button for a successful import (Figure 23, 24).

imort gedcom

Figure 23: Import GEDCOM

gedcom import sucessful

Figure 24: GEDCOM Import Successful

After the conclusion of the import, I selected the “Public Home” link from the top of the page (Figure 25).

page navigation menu

Figure 25: Navigation Menu

I clicked on the “Surnames” link (just below the “Search” button, Figure 21) and got a list of surnames in the genealogy. I next put a name in the “LastName” search box and verified that the search returned the expected results.

STYLING TNG

I customized the TNG home page by

  1. removing the graphic header and replacing it with text,
  2. changing the default home-page images,
  3. simplifying the sidebar menu, and
  4. adding a blog link to the sidebar.

Figure 26 (home page) and 27 (other pages) show these changes. The “Welcome, Administrator” message and the menu items “Access Log” and “Administration” only display if the Administrator is logged in.

customized home page

Figure 26: Customized Home Page

customized tng pages

Figure 27: Customized TNG Pages

Some of the changes to the home page were made by modifying code; other changes were made by adding new content to template 4 (Administration >> Setup >> Configuration >> Template Settings, Figure 28) and from the “Histories” menu item.

template4 settings

Figure 28: Template4 Settings

To accomplish the code changes, files located in the c:\wamp\www\templates\template4\ directory needed to be customized:

  • index.php,
  • topmenu.php, and
  • css\mytngstyles.css.
REPLACING THE GRAPHICS HEADER WITH TEXT

Styling the TNG home page is done mainly with the template 4 index.php file. To begin with, I replaced the header image with text for faster page loading (Figure 29):

changing the default graphic header with text

Figure 29: Changing the TNG Default Graphic Header with Text

Similarly, I modified topmenu.php to change the header on other pages. I styled the header text by adding the following CSS code to the template 4 css\mytngstyles.css file:

/*your custom style goes in this file*/

.header_title { 
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.title_1 {
color:#990000;
font-size:30px;
font-weight:bold;
}
.title_2 {
color:#999966;
font-size: 45px;
font-weight:bold;
}
.tdtitle {
padding-top: 12px;
}
#blog {
text-align: center;
font-size:24px;
}

These changes resulted in a new header (Figure 30).

new header text

Figure 30: New Text Header

REPLACING THE DEFAULT HOME-PAGE IMAGES

Replacing the home-page images was just a matter of replacing the old bigphoto.jpg and smallphoto.jpg in the template 4 “img” directory with new images. I sized the new images the same as the old and kept the same image names.

SIMPLIFYING THE SIDEBAR MENU

My genealogy database is small and does not include, at this time, much of the data that can be accessed from the sidebar menu. So, in order to help visitors focus on existing data, I removed several of the sidebar menu items. Two template 4 files were modified for this: index.php and topmenu.php. In these files, I commented out the menu items I did not want to appear (Figure 31).

removing menu items from index.php and topmenu.php

Figure 31: Removing Menu Items from index.php and topmenu.php

Next, I added code to place the “Contact Us” menu item below the others (Figure 32).

replace the "Contact Us" menu item

Figure 32: Replace the “Contact Us” Menu Item

ADDING A BLOG LINK TO THE SIDEBAR MENU

In order to connect my genealogy site to an associated WampServer WordPress blog, I added a blog link in the sidebar menu by adding code to the template 4 index.php and topmenu.php files (Figure 33).

add a sidebar blog link

Figure 33: Add a Sidebar Blog Link

The text for the new link name, “Blog,” needs to be added to the file at c:\wamp\www\languages\English\cust_text.php (Figure 34).

adding text for the new blog link

Figure 34: Adding Text for the New Blog Link

INSTALLING WORDPRESS

I use WordPress as a way to help anyone who is interested in creating his/her own genealogy. I do this through informative articles, tips, tutorials, and resource links on the blog. I will now show you how to install WordPress on WampServer. This will only be a very brief discussion of how to get the latest “out of the box” version of WordPress running on a local PC and linked to the genealogy. The installation will seem very familiar to you after installing TNG.

Use the link in the Resources section to download the latest WordPress version. Unzip the file to C:\wamp\www.

CREATING A DATABASE FOR WORDPRESS

From the WampServer main menu, go to phpMyAdmin. For this tutorial, I created a database called “wordpress.” Next, create a user for this database and a password for the user (Figure 36). To do this, click the “Check Privileges” link for the new wordpress database (Figure 35). Remember to save the username and password—you will need it later.

check privileges for wordpress database

Figure 35: Check Privileges for the WordPress Database

create user and password for wordpress

Figure 36: Create User and Password for WordPress

MODIFYING THE WORDPRESS CONFIGURATION FILE

The WordPress configuration file, wp-config.php, needs to be configured to tell WordPress how to access the database. With your text editor, open the file c:\wamp\www\wordpress\wp-config-sample.php. Fill in the database name, user name, and password used to create the database (Figure 37). While the file is open, replace the “Authentication Unique Keys and Salts” lines with the lines generated from the link in the file (Figure 38); the link is also listed in the “Resources” section. Save the file as c:\wamp\www\wordpress\wp-config.php.

configuring wordpress config.php file

Figure 37: Configuring the WordPress config.php File

adding the authentication unique keys and salts

Figure 38: Adding the Authentication Unique Keys and Salts

Now, we are ready to install WordPress.

INSTALLING WORDPRESS

Browse to localhost/wordpress. This opens the WordPress installation “Welcome” page (figure 39). Enter the requested information. Note that if you leave the password blank, the installer will automatically generate and assign a strong password and you will see the password in the log-in screen (Figure 40).  Remember to save the username and password: you will need the username and password each time you log into the WordPress “Dashboard.” I chose to enter my own strong password for this tutorial. Note that there is no need to “Allow search engines to index this site.” After clicking the “Install WordPress” button, the installer will complete the installation, including the creation of the database tables. You can now log into WordPress (Figure 40) for detailed information about what to do next or you can browse to “localhost/wordpress” to bring up the WordPress default web page. Once on the web page, you can log into WordPress from a sidebar link.

wordpress installation welcome screen

Figure 39: WordPress Installation “Welcome” Screen

end of installation

Figure 40: WordPress is Installed.

LINKING WORDPRESS TO TNG

WordPress will link to the TNG genealogy by means of a link in the navigation bar. The first step in creating the new link is to log into the WordPress “Dashboard.” From the “Dashboard,” select “Menus” from the “Appearance” sidebar menu (Figure 41).

appearance >> menus

Figure 41: Selecting “Menus” from “Appearance

Create a new WordPress menu by entering a menu name (Figure 42). I called the new WordPress menu “navbar.” Click the “Create Menu” button to create the menu.

create the "navbar" menu

Figure 42: Create the “navbar” Menu

In “Theme Locations,” There is a drop-down box containing all current menus. Click the down arrow and select “navbar” as the “Primary Menu” (Figure 43) and then click the “Save” button.

select "navbar" as the "Primary Menu"

Figure 43: Select “navbar” as the “Primary Menu”

Now we are going to define what the “navbar” menu items are going to be. From “Pages,” click the “Home” check-box and then click the “Add to Menu” button (Figure 44).

add the "Home" menu item

Figure 44: Add the “Home” Menu Item

Next, create the custom link to the genealogy and add this to the menu (Figure 45).

create a custom "Genealogy" link

Figure 45: Create a Custom “Genealogy” link

The new “navbar” tab shows that both the “Home” and “Genealogy” menu items have been added to the menu. Click the “Save Menu” to save the menu.

save the menu

Figure 46: Save the Menu

At the top of the “Dashboard” there is a link to the WordPress home page (Figure 47). Click this to go to the home page (Figure 48). I usually right-click the link and open the home page in a new tab.

link to home page

Figure 47: Link to Home Page

home page showing "navbar" menu

Figure 48: Home Page Showing “navbar” Menu

The “Genealogy” link will bring up the TNG home page. You can return to WordPress using the “Blog” link that was created earlier in the tutorial.

RESOURSES