Pak Jiddat - Innovative Software Services

Read: In the name of thy Lord Who createth, Createth man from a clot. Read: And thy Lord is the Most Bounteous, Who teacheth by the pen, Teacheth man that which he knew not. Nay, but verily man is rebellious That he thinketh himself independent!. Lo! unto thy Lord is the return. (Sura Alalaq 96:8)

Creating your own WordPress themes and plugins

Created On: 11 Apr, 2017: 12:22:15 - Tags : content management systems

Introduction

WordPress is a great platform for building innovative applications. You can not only build standard websites with WordPress but you can also create complex applications full of features. WordPress has many plugins and themes that can help you meet the requirements of even the most ambitious of customers. Recently I had the opportunity of creating custom WordPress themes and plugins for a customer. I will describe my experience in this blog post.

Twitter Bootstrap for meeting initial requirements

Initially my customer had asked for a simple website that describes the products and services of the company. That was easy I thought. All I had to do was to download a simple html template and enter the content provided by the customer. I like the twitter Bootstrap framework. It is a responsive framework, which means it is designed to be accessible from devices with different sizes. I really like their Jumbotron example and decided to use it as the template for the website.

Using web based code editor

The customer wanted to enter the content by himself so I had to make it easy for him to edit the html. I installed a web based code editor called IceCoder. This is an excellent tool that allows you to easily edit code straight from the web browser without installing any software on your local computer. IceCoder is written in php. All you need to do is to download it on your server and extract the downloaded file into a folder.

Organizing the code

I created a header.php, footer.php. I removed the header and footer html code from the Boostrap example and moved it into these two files. Now if we wanted to create a web page it had to include the header and footer files. Once I had done that, the customer could easily create new web pages.

Setting up the development and production sites

We moved the website to a dev domain and put the main website in maintenance mode. I downloaded a sample maintenance mode web page. It had an option called notify us, which was not working. I tried to connect it to MailChimp

Placing the production site in maintenance mode

MailChimp is an excellent service for managing newsletters and email campaigns. I decided to connect their API to the maintenance mode web page. So while the customer's website was being developed under the dev domain the live domain showed a coming soon web page. Users who wanted to be notified by email when the website will be live could enter their email address. MailChimp would take care of notifying us and also the users.

Moving over to WordPress

Like most customers, this customer wanted more features. Like contact forms, ability to create articles etc. I knew from past experience that this was probably the tip of the iceberg. More requirements could easily come up. I needed a content management system (CMS), that had lots of plugins and was easy to use. Drupal was one option, but I did not find it easy to use. I decided to use WordPress. It turned out to be a wise decision.

Migrating site to WordPress

The customers website was ready but now it had to be moved to WordPress. The best way to do this was to create a new theme for WordPress and then create new WordPress pages. After that it would be easy to copy content from old website to the new website. WordPress.org has excellent guides on creating new WordPress themes and plugins. Like many web developers I tried to find an easier way and instead of reading about WordPress themes, I searched for a free WordPress theme based on Bootstrap. I came across a useful article called "How to build a responsive WordPress theme with Bootstrap". It shows how to create Bootstrap theme for WordPress. The tutorial was very useful. After following it, It was much easier to read the WordPress guides on themes and plugins. I got a good understanding of WordPress and felt much more confidant about meeting the customers requirements.

Meeting the customer's requirements

The customer wanted a website like Digital Ocean. My first reaction was that this is out of my scope. However the customer was patient and sent his requirements in small bits and pieces. Meeting those requirements with the help of WordPress plugins turned out to be quite easy. Some of the requirements could be met using plugins and configuring them to our needs. But some of the requirements required creating our own plugins. For example the requirement of custom login page could be met with the Custom Login plugin. But how could we have tutorials, questions and projects that looked like the Digital Ocean community section. We were able to meet this requirement by using WordPress custom post types. Custom post types are a great feature of WordPress that allow us to add new types of posts. These custom types are fully integrated into WordPress and are supported by hundred of plugins. Custom post types also support hierarchies so we can have child types of a custom post type. For example if you want to create a Hotel Management System using WordPress, then you can use Custom Post Types. A Hotel can be a custom post type. A room can be a sub type of the hotel and so on. We were able to easily create custom post types for tutorials, questions and projects with the help of the Custom Post Type UI plugin. We then needed to display them in tabs. Easy Responsive Tabs plugin was the solution. Now we needed a way to query the tutorials, questions and projects and display them inside the tabs. I installed the display posts shortcode for displaying custom posts. With this plugin all you need to do for displaying your custom posts is to add a short code to a page. WordPress then replaces the short code with the list of articles in your custom post type. However we needed the custom posts to look stylish like on Digital Ocean. We decided to clone the plugin and modify it according to our needs. After that we were able to easily display tutorials, questions and projects inside tabs.

Conclusion

Within a few weeks, I was able to create a WordPress site that looked like Digital Ocean. Best of all I learned a lot about WordPress development. I think the main reason for meeting the customer requirements was close collaboration with the customer.

Related Articles

  1. Creating custom themes for October CMS
  2. Developing WordPress plugins using Pak Php framework - Part 2
  3. Developing WordPress plugins using Pak Php framework - Part 1
  4. Validate your WordPress blog using WordPress XML-RPC API, Php Tidy and Nu HTML Checker
  5. WordPress Deployment with Jenkins and Redmine
  6. Tuning WordPress performance using Varnish
  7. Improving WordPress Performance
  8. WordPress for small and medium businesses
  9. Some excellant Wordpress Plugins