WordPress as a Content Management System : Analysis of Structure and Implementation of WordPress

10-June-2010

Table of Contents

 

Abstract 1

1. Introduction. 2

2. Analysis of WordPress. 3

2.1 Environment Background. 3

2.2 Functionality. 4

2.3 File Structure. 4

3. Implementation of WordPress. 5

3.1 Planning. 6

3.2 Installation. 7

3.3 Application of Theme. 9

3.4 Application of Plug-ins. 13

3.4.1 All in ONE SEO pack. 13

3.4.2 Google Analytics for WordPress. 15

3.4.3 Socialize WP. 17

3.4.4 Other Plug-ins. 19

4. Conclusion. 20

References. 22

 

Abstract

WordPress is the most popular content management system (CMS) and it is dominant web development solution especially for blog, magazine or small to medium size companies. To understand why this system is so popular in web development, it is valuable to analyse its structure and practically implement WordPress to build a web site.

This paper consists of two parts. One is the analysis of the system, which includes functionality and file structure in WordPress. The other is the implementation of WordPress to build a web site. In this section, the live blog in the web hosting service is migrated from old CMS, PHPnuke, to new CMS, WordPress. The implementation is comprised of installation process, applying and modification of theme, and applying of three plug-ins, such as All in one SEO pack, Google Analytics for WordPress and Socialize WP.

As a deliverable of the project, the website, MoneyStock.net, was renewed and page viewed 1,372 times during the project. Throughout the implementation and experiment, the strength of WordPress as a CMS was found in various aspects. In particular, it was easy to install, convenient to migrate content data. Moreover,  tools for the theme were flexible enough not to change Html or CSS code manually and plug-ins were easy to setup to be ranked high in search engines, supplied log analysis and abundant socialise widgets were particularly useful for webmasters and web marketers.

Even though some argues that WordPress is only suitable for personal blog, it is reasonable to recommend using for small and medium size business level based on functional flexibility and abundant plug-ins, which supply lots of marketing tools as well as the fact that many big companies are already using WordPress for their online business.

1. Introduction

 

According to W3Techs, web technology survey firm, 13.7% of all websites in the world use WordPress as their websites platform and WordPress has 54.5% of CMS market share, followed by 10.7% of Joomla and 6.0% of Drupal as of 1th April 2011. WordPress is mostly used by low traffic sites than high traffic sites.

Official homepage of WordPress defines it as “WordPress is web software you can use to create a beautiful website or blog”. Alternatively, it can be described as “WordPress is an open source blog publishing and content management system, based on PHP and MySQL” (W3Techs 2011). WordPress is often used by web development company as a web development platform that is suitable for small and medium size websites. However, big companies such as Samsung, Ford, Yahoo, CNN and EBay use WordPress for their online businesses (wpbeginner n.d.).

WordPress is divided into 2 categories, one is WordPress as an open source Content Management System(CMS), the other is WordPress as a self-hosted web service. The former is the topic of this report.

This paper investigates the architecture of WordPress as an open source CMS, in terms of flexibility and scalability. These features can be found in the structure of WordPress which separate its structure as presentation layer (CSS), content layer (Html), control layer (JavaScript) and business layer (PHP).

This paper is followed by the explanation about actual implementation of WordPress in three sections, which are installation, modifying theme and applying plug-ins. Each of which explains the process to implement it, including obstacles during the implementation and solutions to address those, and the founding through experiments searching for the basis of strength of WordPress. WordPress it is compared with older CMS, PHPnuke, which was being used for my personal blog system until this project of WordPress started and replaced it and it is compared with other competitor CMS such as Joomla and Drupal, which are most demanding CMS tools in web development industry.

2. Analysis of WordPress

2.1 Environment Background

Most recent release of WordPress is version 3.1 and all of this paper will be based on WordPress 3.1. Other environment for this project is as follows:

–        OS: WordPress is installed in both Mac OS X 10.6.7 and Linux CentOS release 5.5 (Final). The first OS is testing environment for testing purpose only, the second system is live hosting server in Korea for my blog.

–        Database: Well-known open source database, MySQL 5.1.44, is used in testing environment and MySQL 4.1.3 was used in live hosting system. WordPress require MySQL 4.1.2 or higher.

–       Program Language: PHP5.3.1 is the main programming language in server side and Html and JavaScript was used for client side. PHP usage in WordPress is following object-oriented programming concept, even though PHP is not developed as an object-oriented programming language. WordPress require at least PHP4.3 or above. However, some recent plug-ins uses the PHP function, which works only PHP5 or above, therefore it is better to use PHP5.

–       HTML: Document type of WordPress is plain html. It is unique considering that other competitors such as Joomla and Drupal use XHTML (Extensible Hypertext Mark-up Language) 1.0 Transitional and XHTML + RDFa (Extensible Hypertext Mark-up Language + Resource Description Framework in attributes) 1.0 respectively. This means that Drupal and Joomla is stricter about HTML syntax use than WordPress, because XHTML is stricter than plain HTML. In other point of view, it is reasonable to say that WordPress is more easy to handle than other two competitors as many CMS programmers argued in various forums.

–       Cascading Style Sheet (CSS): There are two CSS file in WordPress, which are Style.css and Admin-var.css. Style.css is the main CSS file for WordPress and it’s very important to keep website design coherent. Admin-bar.css is css for admin section on the page.

2.2 Functionality

Three main components of WordPress in terms of contents are Post, Pages, and Sidebar. Posts are the main contents of WordPress and it is suitable for blogging because these articles are presented chronologically most recent article first and old one last. This chronological feature implies that old articles are less important than newer one. Therefore, it is suitable for the contents such as blog and magazine.  Posts can be retrieved by category, tag, and other factors (Neprud 2009).

Pages are a ‘static’ content that is presented in a dedicated space all the time. This is suitable for contact information or company information. Sidebar section is for every other functional feature such as link to old articles, RSS feed, newsletter and social media buttons.

2.3 File Structure

The file structure of WordPress is mainly composed of 4 areas. These are root, wp-admin, wp-content and wp-includes. The root folder includes main functional pages such as config, login, and comment. The wp-admin folder is for admin functions. The wp-content folder includes plug-ins, themes and uploads. The wp-includes folder is for common factors such as CSS, images, JavaScript (WordPress Team n.d.). Figure 1 directory structure shows directory structure of WordPress.

This separation of directory is very useful when updating WordPress, because wp-admin and wp-includes directory is all about system so that it can be replaced by new version without comparison. The directory wp-content is the most valuable section and should be dealt with care because it contains all the file date that might has been uploaded and modified by user.

Another advantage of file architecture of WordPress is that it is well separated . Therefore, once learnt about each directory’s meaning, it is easy to maintain following the system structure.

Figure 1 directory structure

3. Implementation of WordPress

3.1 Planning

For this project of WordPress implementation, two WordPress will be installed. One is for Korean and the other is for English. Therefore, this is the application of hosting two website in the same DB and hosting server using WordPress. These two WordPress is entirely independent website. However, it will be look like one website containing two different languages.

Total process of implementation of WordPress is as follow:

1. Install the new WordPress package in testing system, Mac OSX.
2. Do the running test and DB migration test
3. Install the first WordPress (for Korean) in live hosting system, Linux OS.
4. Migrate all previous blog data in MySQL database from PHPnuke to WordPress
5. Install the second WordPress (for English) in live hosting system.
6. Migrate all previous data from WordPress.com web service to the hosting system.
7. Configure and set-up for each WordPress
8. Synchronies the menu and design for each website
9. Apply and modify the theme for two system
10. Apply and configure the plug-ins for two system
11. Set up for Google Analytics to start counting website visitors and analysing log.
12. Let the web site to be live.

Based on this process, the project to implement and experiment WordPress is accomplished. What is learnt and what is found through this work will be followed.

3.2 Installation

Installation of WordPress is easy compared to older CMS, such as PHPnuke, which I used for several years as blogging system and it used to be one of the most popular CMS in mid 2000s, however, which has some issues such as security hole and being not friendly to search engine. The biggest difference of installation between WordPress and PHPnuke is that users do not need to configure it manually. For example, when installing WordPress, all users have to do is to input several text boxes in installation pages provided by WordPress. However, when installing PHPnuke, users have to find the physical config.php file and open it using editor tools, and then change the source code manually. This process is prone to making human error during the installation process.

For this learning project, WordPress is installed in Mac OS X first for testing and practicing purpose and is installed in live Linux hosting system later for real service.

Another big improvement from old CMS like PHPnuke is the functionality of auto update. This feature is similar to Microsoft windows update, which checks regularly whether there is update to do or not. Once there is update to do, the alert button appears. If the update button is clicked, the update is processed automatically as Figure 2 Auto Update shows.  This process is done through FTP connection so that the web hosting server should supply FTP service and the user should have permission to use it.

Figure 2 Auto Update

This auto update function is also possible for the plug-ins, meaning the WordPress is fully auto-updatable web application, which is impressive in terms of maintenance.  For example, WordPress that was installed for this project faces three to four times of update alarms during two month of project period because it is highly frequent that the change happens in web technology. Thanks to the auto-update, it was no burden to keep WordPress as most recent version.

However, auto-update failed in some cases due to the various reasons such as FTP connection problem and collision with running plug-ins. In this case, it is possible to do it manually. Nevertheless, manual update is prone to making mistakes and takes more time than auto-update. In particular, users have to be very careful not to remove or overwrite content files that they made by themselves because contents are the users’ own creation, which is valuable.

Even though basic level of installation is relatively easy and it is still useful enough for general purpose like personal blogging, when WordPress is used to replace currently running blog or website, data migration is another issue. For this, WordPress supply functionality such as import and export. Import function supports for several popular blog systems such as Blogger, TypePad and different WordPress. It also supports standard document format such as RSS (Really Simple Syndicate).

For data from old CMS like PHPnuke, WordPress did not supply any solution. To migrate from old CMS system, PHP script file, which was supplied by independent developer through WordPress forum, was used. This script could transfer the page and comment data from PHPnuke to WordPress.

However, there was one issue. The character set of old database tables is EUC-KR, which stands for Extended Unix Code for Korean and is 2byte character set mostly used in Korea, but WordPress uses UTF-8, which stands for Universal Character Set Transformation Format 8bit and is 2byte character set used worldwide and can express more flexibly than EUC-KR. This difference is critical when the data includes 2-byte language, such as Korean and many Asian countries. To solve this issue, data was backed up in Latin1 mode from old MySQL and imported to new MySQL as EUC-KR format, then exported and import within new MySQL again, in this time, using MySQLadmin default mode and UTF-8 format respectively. While migrating data for MySQL database, MySQLadmin was quite useful to check the data condition and to import and export data directly from the database.

3.3 Application of Theme

The main element that decides appearance of WordPress is called theme, which is composed of template files made of PHP program language and CSS files. The template file contains the information about what is displayed and where the content is displayed. The CSS file contains detailed style directions to all contents from text to table such as font, colour and spacing.

To understand template structure, it might be helpful to reference the template hierarchy, which is attached to this paper as an appendix ‘1. WordPress Template Hierarchy’. The WordPress Template Hierarchy shows the links and sequences between requested web page and template files to be used to compose the destination web page.

Following is the example of theme applied to tested blog. Comparing two sample themes, which are Figure 3 theme sample 1 and Figure 4 theme sample 2, these have exactly same contents, but very different design. As such, by changing theme, the website can have different look and feel. There are many free or paid themes on the web so that anyone can easily choose theme and download it from theme developer’s web site and install it to their own website free of charge or as paid. The number of themes that are listed in WordPress.org as of 29^th May 2011 is 1,380.

Figure 3 theme sample 1

 

Figure 4 theme sample 2

These themes are customizable within WordPress tool or manually. WordPress web page is highly hierarchical as it show in Figure 5 html structure, which shows the html structure of Figure 4 theme sample 2. For example, the position of a post is as follows:  html > body > wrapper > main > container > content > post-140. Due to this structure, templates compose a web page efficiently. Well-organised structure also helps developer when modifying theme.

Figure 5 html structure

The sequence to change the appearance of WordPress is as follows: The first is choosing theme, the second is selecting widget and configuring it, the third is applying the menu option, finally selecting and modifying background and header options. These are all can be done within WordPress tools. These given options are so powerful that it is barely need to modify anything manually for normal bloggers.

However, if more changes were needed after finishing all this out-of-the-box options, it can be manipulated by changing CSS files and template files directly.  These actions lead to the change of theme itself. The final choice of theme for this paper was Twenty Ten made by WordPress team. However, some of the configuration should be changed to fit to this project, which is personal blog. So, the font, font-size and table padding was changed modifying CSS files manually, which were separated into publicised pages and editing pages. The CSS file for publicized pages is style.css. This one file is used to control all public pages so that all pages can keep consistent design rule. This can lead to improvement of web identity and obviously the ease of maintenance.  Otherwise, web designer must change every file whenever the style rule changes on the website.

3.4 Application of Plug-ins

 

Plug-ins are the one of the strongest factors that make WordPress so useful because of their variety of function. According to WordPress.org, 14,581 plug-ins are listed to be downloaded as of 29th May 2011. Even though there were several plug-ins for old CMS, PHPnuke, such as Gallery and phpBB, the biggest hurdle to use those plug-ins in PHPnuke was difficulty of installation and upgrade.

Among many plug-ins, which was installed and experimented for this paper, three most popular and must-have items were chosen to be analysed and developed in detail based on plug-in popularity at WordPress.org.

3.4.1 All in ONE SEO pack

Search Engine Optimization (SEO) is one of the most demanding work for newly developed web sites, because it can effectively advertise the web site without much cost for marketing. All in ONE SEO pack is one of the most popular plug-ins for WordPress. WordPress is highly efficient for SEO out of the box. However, this plug-ins give more power to WordPress in terms of SEO.

Once indexed by search engine, it is important for web sites to care about its prominence in search list. To increase prominence of website in search list, title tag, meta description, and meta keyword is critical to be written properly. Manual way of doing this is modifying the html file of every page to change those meta information. But, it is impossible for dynamic pages because there is no static html to modify these meta information. The SEO pack does this for users automatically and supports optional setting for each page in terms of meta information.

First, this plug-in supplies standard way of meta information, which is highly precious in terms of SEO, and some automation function such as automatic inclusion of Tags into meta keywords. The standard meta information is set for each page, post or categories out of the box, but users can modify as they want. It might be a big burden to do it manually without this tool. Figure 6 All in One SEO Plug-in Options shows parts of its option setting for whole blog in case of this learning project.

Figure 6 All in One SEO Plug-in Options

This plug-in also supports individual page title, description and keywords modification tool. When this tool is used, related source code is automatically inserted in each post’s html file as Figure 7 Individual Page SEO option, which is captured by the implemented website. Technically, those meta information is stored in database linked with each post so that it can be viewed in the html of the post. These meta information is read by search engines and impact on the prominence of web site.

Figure 7 Individual Page SEO option

To verify the usefulness of this SEO plug-in, the website, ‘moneystock.net’, which is migrated using WordPress for this project, was tested through WooRank, online website analysis tool, which generates report based on 50 criteria such as search engine data, website structure, web site traffic and performance (WooRank n.d.). The WooRank score for moneystock.net was 46.7 out of 100, which is slightly better than the average score, 42.5, and median value, 41.3, of all tested website in WooRank.  It is reasonable to argue that the relatively better score is resulted from both the structure of WordPress itself and All in One SEO Pack, because many of scoring criteria in WooRank is based on SEO perspective   (WooRank 2011).

3.4.2 Google Analytics for WordPress

 

Google Analytics is the web-log analysis service supplied by Google. There are two main approaches for web log analysis. The first one is analysing web log made by web servers directly. These logs are access log and error log in case of most popularly used Apache web server. To analyse these, commercial web log analysis tool such as Webtrends can be used. The second approach is inserting tracking code within every html file of the website so that remote service provider, like Google, can trace the activity on the website and log it in their database. For webmaster, the second approach is much easier because only work for this is making sure the tracking code is in place of every website pages. This way also reduces the burden of maintaining huge access log files. For example, if the access log is kept on the web server, the huge size of it might be the first issue. The webmaster has to monitor its size with care on regular basis and have to transfer or remove it after analysing it.  If the access log is not managed properly, the free disk space of the web server will shrink and might end up with suspension of web service.

Google Analytics plug-in makes it easy to insert tracking code of Google Analytics service into WordPress users’ blog. Applying this is rather simple, but understanding and getting insight form analysed report is difficult. The example of Google Analytics for implemented website is as follows.

According to Figure 8 Google Analytics Report, which shows the log of the WordPress (Korean version) that was installed at 18th April, It is clearly shows that the access to this website started at 18th April and also shows general upward trend up to a certain level and then stabilised around 15 visits per day. Other important facts found using this tool are characteristics of the website traffic. For example, average page view is 2.24 pages, implying that the content of the website is not attractive enough to explore further, and average time spent on the site is 3 minutes 30 seconds and 75.33% of visits are new visits, meaning 24.77% of visits are from returning visitors. This report also includes the information such as geographic origin of visitors, traffic source and popular contents. In particular, it is clear that South Korea, Australia and USA are main source of visitors according to the map overlay section in the Google Analytics Report. The reason of this might be that the website is mostly written in Korean and some in English and the contents are about Korea and Australia.  All these information is highly useful for the webmaster or web-marketer when they try to improve the performance and to renew the site.

Figure 8 Google Analytics Report

3.4.3 Socialize WP

 

As social media in web is getting important, plug-ins which deals with social media such as Facebook, Twitter and LinkedIn became popular. This plug-in, socialize WP, helps to insert button to link with 11 prominent social media. The serviced social medias can be seen at Figure 9 Socialize Setting.

Figure 9 Socialize Setting

When this plug-in applied in a post, it looks like Figure 10 Socialize WP Applied. There are three links, each of which is for Facebook, Twitter, and LinkedIn respectively at the first line of the article. This icon and button give a function to share the article and shows how many others share this article.

Figure 10 Socialize WP Applied

These socialise buttons can spread articles through designated social media so that it can be seen by publisher’s network. This process can influences on prominence of the web site on search engine ranking by building link, which is important element for Google to decide the prominence of website.

3.4.4 Other Plug-ins

 

As plug-ins are so useful for the WordPress, several other plug-ins are additionally implemented and tested. Three more plug-ins are explained briefly because it is valuable to WordPress users. The list of these is as follows:

– Advertising Manager: It helps to install Google AdSense, Google advertising program that supply the tool for any webmaster to put an advertising banner from various advertisers so that the webmaster can earn profit from it, banner in the WordPress

– Social Media Widget: It can put social media button as widget in WordPress. These buttons link to the web site owner’s each social media profile page. This is one of the popular ways of social marketing.

– WPtouch: This plug-in add a function to normal WordPress to be seen as proper resolution and interface on mobile device such as iPhone.

As mentioned earlier in this section, there are many plug-ins waiting to be installed. However, some of them are not so useful and even harmful as they act for developer’s interest such as hidden advertising or they can cause system failure due to the compatibility issue among plug-ins. Therefore, it is important to find properly working and functionally useful plug-ins. To do this, some website present recommended plug-ins, but the best way to check their performance is implementing and testing them.

4. Conclusion

Throughout this paper, the structure of WordPress was analysed and the system was installed, theme was applied and modified, finally several plug-ins were experimented. The blog, MoneyStock.net, which was installed and experimented during this work, is live online (Park 2011). During this project, which is from 18^th April 2011 to 9^th June 2011, the implemented website was visited 616 times and page-viewed 1,372 times.

WordPress has shown lots of strength as a CMS. Installation process was straightforward. Data migration from database containing 2-byte language was challenging. However, WordPress supplied useful tools for data import and export, which was convenient when used for from-English-to- English data migration. Theme of WordPress was structured in a well-organized way and was convenient to apply and change. It was so flexible that there was less reason to change Html or CSS manually. Experimented plug-ins were highly useful in terms of maintenance and online marketing. Those tools helped the website to be ranked high in search engine, to analyse the web traffic and to advertise through social media without high cost.

It was hard to find any flaw in WordPress. In particular, when compared with older CMS, PHPnuke, it was impressive improvement as a content management tool. When compared with other competitor CMS tools, the reason of the high rate of usage among CMS was explained by its convenience of implementation and modification. Even though some argue that WordPress is less secure from hacking compared with Joomla or Drupal, frequent version-up and third party’s vibrant supply of security add-on as a form of plug-ins are enough supportive to believe its sustainability in terms of security. However, many installation of plug-ins can increase complexity of the system and might end up with collision among plug-ins.

In essence, throughout the experiment of WordPress and its themes and plug-ins, it is found that WordPress as a CMS tool is worth to be ranked as the most widely used CMS in the world. In particular, it is suitable for small and medium size business and the less trained webmasters. Therefore, WordPress will keep its market share on CMS market at least several more years.

 

References

Leary, S., 2010, Beginning WordPress 3: Make great websites the easy way, Apress, New York, USA

Neprud, S. 2009, WordPress Architecture – the Building Blocks of Web Publishing, Web Site in a Weekend, viewed 30 May 2011, <http://website-in-a-weekend.net/extending-wordpress/wordpress-architecture-building-blocks-web-publishing/>

Park, Y., 2011, Joe’s Life, viewed 9 June 2011, <http://www.moneystock.net/wp_e/>

W3Techs, 2011, Usage of content management systems for websites, W3Techs – Web Technology Surveys, viewed 30 May 2011, < http://w3techs.com/technologies/overview/content_management/all />

WooRank, n.d., How high is your WooRank?, WooRank, viewed 8 June 2011, <http://www.woorank.com/en/ranking/stats>

WooRank, 2011, Report for moneystcok.net, WooRank, viewed 9 June 2011, < http://www.woorank.com/en/www/moneystock.net>

WordPress Team, n.d., WordPress Codex, WordPress, viewed 30 May 2011, http://codex.wordpress.org/Main_Page

Wpbeginner, n.d., 21 Popular Brands That Are Using WordPress, wpbeginner, viewed 8 June 2011, <http://www.wpbeginner.com/showcase/21-popular-brands-that-are-using-wordpress/>