My experience on submitting First theme- Kafal to WordPress.org

Light in the dark

In February I wrote a blog on Open Source and WordPress theme and decided that I will submit a theme to WordPress.org. And now I am back with another blog on my WordPress theme Kafal. It’s a pleasure to inform you all the readers that my theme passed the review process and accepted in the WordPress.org repository. Theme ‘Kafal‘ is now live and have been downloaded 1500+ times and currently active on 200+ blogs/websites. I am that much happy about it that every day at least 5 times I check the theme details in WP.org.

It was all started in February when I don’t have much work besides my academics. At that time I was craving for the work. Then after a lot of research, I published the blog on Open Source and making a theme. At that time I was already a member of WordPress slack. I think slack is the best place to start your journey. In this blog, I’m going to share my experience, what I’ve learned during this period.


Coding Improvements

I started my HTML career with <!Doctype html>, which means started with HTML5 but never understand what the difference between the HTML 4 and HTML5. In this theme, I’ve used new semantic elements from HTML5 like headerheaderfooterarticlemainaside etc.

WordPress provides many APIs and I’ve used many of them. This time what was new for me is the Theme Customization API.  Added live preview option for custom options like ‘Header Color’ and ‘Blog Title & Tagline’ etc. That’s a cool API for designing good UX for theme users.

Previously while developing a theme I’ve never bothered on using escaping and sanitizing functions. If you check my first theme ‘Makes me Wonder’ that I’ve created in my second year, I’ve never used any escaping function. Or if I’ve used it then it must be a code that I’ve copied from SO or codex. But now whenever a code that involves DB or User inputs, the first thing that comes to my mind is escaping and sanitization of the data. Writing a poor code with less security can lead to an XSS attack to the site.

I have learnt much more things about the coding style, that I can’t recall at this time but I will surely share them in future.

 

Theme Customization API and Bootswatch themes

Created theme repository named ‘Solitude‘ and started working on it. I wanted it to be like the best of its type. And started designing the theme. I am a great fan of Bootswatch, as they provide cool themes for the Bootstrap. I wanted to create a theme that you can change the theme variant with these Bootswatch themes. So I downloaded different Bootswatch themes and integrated them into the theme with the Theme Customization API. You can change your bootstrap theme with the different variant of Bootstrap. But due to lack of design skills and other works, I stopped working on the theme ‘Solitude’. This theme has more options but it lags in design and has a poor coding style. I will work in this theme maybe in future.

 

Using _s (underscores)

After ‘Solitude’ it was a leap of 2 months when I started again working on the theme. This time with more enthusiasm, more energy. But when it comes to writing the same code again just for scaffolding it’s kind of a heavy task for me. So now this time what I did was, I forked ‘_s(underscores)‘ the starter theme created by Automattic for hacking. Created my own branch and started hacking the theme.

By the way, I’ll not prefer using _s if you are just starting out in WordPress and don’t know the basics.

 

Using basic testing methods & build tools

I wrote a blog on Integrating Travis CI with WordPress Theme. Using build tools and CI(continuous Integration) is must for the projects because a single human error can be a huge problem. So we teach machines to check our code and warn us about our mistakes. I’ve used Travis CI to test my theme, if it is passing the WordPress coding standards or not. There are also some plugins that can test your themes with the WordPress coding standards like ‘Theme Check‘.  These tools will help is making a good theme with Coding Standards.

 

Various Open Source Licenses

When I first submitted my theme on 19th June(Trac ticket), the ticket closed 2 days after that on 21st June. That was a quick review by one of the theme reviewer team lead @poena. The theme got rejected because of having more than 5 different errors. The first and most important error was declaring the license of the theme.

I was aware that for uploading to WordPress.org the theme should have an open source license GPLv3 or compatible. But I haven’t declared it. By saying theme I also mean the assets used in the theme like images, libraries etc. You can check the conversation over the ticket and check all the links she provided about theme development.

For learning about the licenses choosealicense.com is a good source.
 





 

Setting Realistic Deadlines

Without a deadline, a side project may become garbage because it will never be completed. What I learned is that setting a realistic deadline increases the productivity. Be it our assignments, project reports etc. Even we start studying just before the exams. Moving out from the comfort zone, doing the projects that you love & stop procrastination. I have also set a deadline for the theme and yes because of that I have a commit in git with ‘Hackathon’ (check the dates) ūüėõ

Hackathon for Kafal
Hackathon for Kafal

 

Everybody wants to help you just ask

I am not an active member in WordPress Slack but I often open it and read the conversation happened. I always learn something new every time I open it. The volunteers always try to give you the right piece of information even if you ask silly questions.

WordPress is a community that has lots of nice peoples always willing to share their knowledge. If you have any question just ask it and you will definitely get an answer. Want a demo, check the trac tickets 44111 and 44006. ūüėČ

 

Patience

Yes, you read it right Patience. Patience after submitting my theme for the second time, a new ticket was assigned to me. Silence for 2 months. Nothing happened until my theme got on the top of the review. It needs a lot of patience to see your theme on the review queue.

On 8 August finally, @kafleg as a reviewer is assigned to my theme. This time it(theme) was having 3-4 small issues. So I finished working on them and updated new changes. After that, I was waiting for the reviewer’s another reply on the theme.  This time I the reply was this:

Theme set to live
Theme set to live

 

That was an ‘Aha’ moment, I was like telling everybody that my theme got selected and check out the link and email. I am very happy to see my theme on WP.org.

Rivers know this: there is no hurry. We shall get there some day.‚ÄĚ

A.A. MilneWinnie-the-Pooh

It sounds awesome when you think that lots of users are using your theme. The piece of code we have written is worth something. Giving back to the community, is it what is Open Source is all about?


Now the happiness is, seeing the badge of Theme Developer in My Profile.

 

Profile Shubham Pandey WordPress
Profile Shubham Pandey WordPress

 

Have any views about this, please let me know in the comment section.

Thanks!

Current Trends for CMS’s – Google Trends

Google Trend for Different CMS's
Google Trend for Different CMS’s

This blog is an attempt to show the trend graph to compare the popularity of different CMS platforms via Google Trends. For the comparison I’ve picked 5 Top CMS’s.

Top 5 CMS’s:

  1. WordPress
  2. Joomla
  3. Drupal
  4. Blogger
  5. Magento

Interest Over Time

We can see the growth of WordPress over the time. It is the most famous CMS and blogging platform.

We can see the Rise and Fall of different Platforms. Specially Joomla, it has an instant rise in popularity after release in september 2005, where around february 2006 it was on the Top. But we can clearly see the Fall of Joomla from 2009.

More on The Fall of Joomla

Blogger was released prior to every CMS but lost its popularity over time as the WordPress started gain in popularity. Still Blogger is the second most used platform for Blogging.

Where Drupal and Magento are not being that much popular as other platforms. The popularity of these two platforms also falling over time.

Interest By Region

Top countries that uses WordPress :

  1. Bangladesh (100)
  2. Nepal (95)
  3. Pakistan 64)
  4. Netherlands (61)
  5. Singapore (61)

Top countries that uses Magento :

  1. India (100)
  2. Nepal (76)
  3. Netherlands (75)
  4. Estonia (60)
  5. Bangladesh (59)

Top countries that uses Joomla :

  1. Netherlands (100)
  2. Greece (94)
  3. Kenya (90)
  4. Switzerland (86)
  5. Ukraine (78)

Top countries that uses Blogger :

  1. Malaysia (100)
  2. Indonesia (76)
  3. Cambodia (51)

Top countries that uses Drupal :

  1. Cuba (100)
  2. Belgium (14)
  3. India (10)

Facts from the Data:

  1. WordPress tops among all these Platforms.
  2. Each year on November to December every platform has a fall on use.
  3. Very less people uses Drupal.
  4. Nepal and Bangladesh are on top 5 for two different platforms WordPress and Magento.

Explore more at Google Trends.

Performance Comparison : Apache and Nginx

Apache and Nginx

Apache and Nginx are the two most popular Web Servers powering the Internet. The most popular in between them is Apache. While 49% of the total web still uses Apache for powering their websites, and Nginx shares 33.7% traffic.

But on researching more about them I found that Nginx surpasses Apache in many factors. Internet is using Nginx more on the top sites. Stats says that Nginx shares 51.6% traffic on top 100,000 sites while Apache shares 30.7%.

And the Top 1,000 sites of the world or you can say Busiest sites uses the nginx server (53.8%) where Apache lacks behind to only 19.2% of its share on traffic.

All the Stats are from w3techs.com.

Because of too many reasons I’ve moved my server from Apache to Nginx. One of the reason was the traffic hike during the Scintilla Selfie Contest. When because of some unexpected traffic my server crashed. And was down for around 1 hour.

Internet is full of all the info about the differences and features of these two web servers but I haven’t find a website that ensures about the performance ¬†of the Nginx server. So I decided to do some load test on both of the Servers.

Setup :

System Specification –

  1. Operating System –¬†Amazon Linux AMI
  2. RAM – 1GB
  3. PHP 5.6
  4. MySQL 5.5
  5. WordPress 4.7.4 with Comet Cache plugin
  6. GZip enabled in both servers

Apache Stack Specification –

  1. Httpd 2.4
  2. mod24_ssl
  3. supports http1.1

Nginx Stack Specification –

  1. Nginx 1.10
  2. supports http2.0

Tests Configuration :

For load tests I’ve used Loader.io. They provide 3 types of load tests for websites. For single domain the services are free, but if you want to test too many websites then they have some premium charges.

Tests Types:

  1. Maintain client load
  2. Clients per second
  3. Clients per test

Testing :

Test 1 –¬†Maintain client load

Configuration :-

Clients Duration Error Threshold Timeout
0-250 1 min 100% 10 sec
Apache : Maintain client load
Apache : Maintain client load
Nginx : Maintain client load
Nginx : Maintain client load

In this test loader performs a increasing clients test from 0-250 clients over a span of 1 min. you can clearly see that in Apache Configuration the error rate is 23.8% where in the Nginx setup it is about 2.3 %. also the apache fails in between of the tests with timeouts. where the Nginx is started failing at 50th sec to 60th sec.

Point Table –¬†Nginx : 1 :: Apache : 0

Test 2 – Clients per test

Configuration :-

Clients Duration Error Threshold Timeout
0-250 1 min 100% 10 sec
Apache : Clients per test
Apache : Clients per test

 

Nginx : Clients per test
Nginx : Clients per test

This test is for determining that how many clients the server can handle at a time. Apache fails after 10 sec for even for serving 3 clients per sec. where on an average we can say Nginx is handling 4 clients per sec. with a peek of 7 clients per second.

Point Table –¬†Nginx : 2 :: Apache : 0

Test 3 – Clients per second

Configuration :-

Clients Duration Error Threshold Timeout
250/sec 1 min 100% 10 sec
Apache : Clients per second
Apache : Clients per second
Nginx : Clients per second
Nginx : Clients per second

 

This test is for determining that how many request per second a server can handle. You can see that on requesting 250 request in a second the server doesn’t respond for 10 sec. and then fails with 100% error threshold. Where Nginx work as a shock absorber in this test, and respond to some of the requests that it can handle. It is like making a queue for the requests and sending them to the current free worker process. And hold them till the working process free some memory.

The reason why Apache failed when getting too many requests is because Apache uses a prefork method for serving. Means it creates processes for each request. Because of getting too many requests at a single time and with a lack of memory(only 1GB RAM) it asked for too much memory and crashed. This is what happened on that day, because of occupying too much memory by Apache and MySQL I was not able to access my server via SSH at that time.

Whereas the Nginx server work as a Shock Absorber and create a queue for all the requests and serve them with their token number. Some of the requests from them got higher then 10sec of Timeout threshold so they are represented in the graph with orange color.

Apache error threshold 100% where Nginx 47.1%.

Point Table –¬†Nginx : 3 :: Apache : 0

Results :

You can clearly see that Nginx gave better performance then the Apache Web Server. But still it can be optimized for more performance. By adding Cache tools because Nginx serves Static files much better than any other server.

We can also optimize the Nginx server performance :

  1. Pagespeed module for Nginx by Google
  2. Minifying CSS/JS
  3. Using a better Cache Plugin for generating static files because Nginx surpasses almost every server in serving static files.
Next Challenge :

For the next challenge I am thinking for using Nginx as a proxy server for Apache. Because I have read somewhere that The most powerful combination is that using Nginx in front of the Apache with cache enabled.

Also there is another combination of Varnish and Apache. Where Varnish is not a Web Server but it can be used as reverse proxy and caching static pages. It is used by lot of websites like GitHub.com etc.

Also because I’ve analysed that PHP-FPM is using too much memory. Where Apache is good option for using with PHP and Nginx is better at serving Static Files it will be a better option to use them together.

Links to all the test with full report :

Apache:

  1. Maintain client load
  2. Clients per test
  3. Clients per second

Nginx :

  1. Maintain Client Load
  2. Clients per test
  3. Clients per second

Other :

When I added SSL into my website last time, It was not as much secure as it should be. It was some of the Obsolete Ciphers that can make some vulnerabilities. And so I got a “B”¬† Certificate.

SSl Rating B for shubhampandey.in
SSl Rating B for shubhampandey.in

Now with a proper configuration and Enabling HTTP2”¬†in my site I have got new Rating for website and that’s an¬†“A+”.

SSl Rating A+ for shubhampandey.in with HSTS enabled
SSl Rating A+ for shubhampandey.in with HSTS enabled

You can also generate a good configuration from the Mozilla’s SSL Configuration generator website where they provide many options for creating a configuration that can get you an A+ rating ūüôā .

Scintilla Selfie Contest Finalists

Scintilla 2k17

Scintilla Selfie Contest Finalists:

Top 10 Girls
Rank Name Branch/Year
1 Sparsh bhatla CSE 2nd yr
2 Raveena Chauhan ECE 3rd yr
3 Shailja Goswami EE 1st yr
4 Akshita Basera CSE 2nd yr
5 Purna Sharma ME 3rd yr
6 Akansha bhatt CE 4th yr
7 Juhi Bisht CHE 4th yr
8 Rekha Chandola EE 2nd yr
9 Shreya Darmora CSE 3rd yr
10 Jyoti joshi ME 3rd yr
Top 10 Boys

 

Rank Name Branch/Year
1 Karan Saxena ECE 1st yr
2 Jayant Joshi ECE 4th yr
3 ArjunSingh Chauhan CE 3rd yr
4 Vishal Nautiyal M.Tech 2nd yr
5 Abhishek mishra CHE 4th yr
6 Yogesh kapri ECE 3rd yr
7 Rahul mungali CHE 3rd yr
8 Shekhar Bisht EE 4th yr
9 Grijeshwar tiwari CE 3rd yr
10 Bhriguraj CE 2nd yr
Note All the Decisions are made by respective Committee Members.
If you have any query Contact on Scintilla Facebook Page.

Migrating website from http to https

Installing SSL Certificate Successfully

I have recently migrated my website from http to https( secure http). All the non-secure HTTP requests are now redirected to HTTPS. On migrating the Site I faced many problems and learnt a lot. So here’s the list of steps to perform in making the web more secure :

Selecting SSL Provider :

The first step is deciding your SSL provider. Many SSL Providers are present in the market like Comodo, Symentac, Verizon, Namecheap etc. They all charge a lot of money but also provide Extended Validation, means not only secure but also proves your legal identity as “operational and physical presence of website owner“.

For normal use you just need a Domain level Certificate. From Namecheap you can buy an SSL certificate in 600‚āĻ for 1 year(Single Domain). For EV Certificate(Extended Validation) it’s good to buy a Certificate, but for Domain level I suggest you to use Let’s Encrypt. Let’s Encrypt is Free! and it is free because of it’s Sponsers like Google, Facebook, Mozilla, Automattic etc. So I am going with Let’s Encrypt.

Installing SSL Certificate :

Installing SSL Certificate is an easy task if your Hosting Provider support Let’s Encrypt. You can check the name of your hosting provider on the list. For non-supporting hosting providers we have certbot. You have to select your software and system. While Installing do redirect all of your traffic to https permanently. It’s an essential step because now you have two versions of your site.

Installing SSL Certificate Successfully v2
Installing SSL Certificate Successfully v2

After installing just make sure if SSL is working properly from SSL Labs.

Testing new URLs :

Mixed Content :

If your website is using some hard-coded HTTP links then the browser may show a warning for mixed content. Sometime Browser’s hides the padlock if they find any mixed content. You can check your URL for non-secure content at JitBit.
Make hard-coded links more robust by changing links:

http://google.com to //google.com . In WordPress you can install SSL Insecure Content Fixer Plugin.

Mixed Content Warning
Mixed Content Warning
Getting your Facebook likes back :

Facebook and google treat http and https links differently. Likes and Shares for a URL are for that Unique URL any change, and you will lose all your likes and shares count. Because of migrating you are now using different link so all your Facebook counts will change to “zero”.

Likes and Shares are set to zero!
Likes and Shares are set to zero!

How to get back all of your likes, you can use plugins like Warefare Plugin(expansive) of do it manually :

  • Changing .htaccess : In Facebook’s documentation they give a solution, to redirect Facebook’s crawler to the old URL. I’ve found a solution in Stack Overflow. You have to add FaceBot to the exception list of redirection. You can find your .htaccess file in your document root. CertBot uses the virtual host method instead. Both do the same thing but .htaccess method is less preferred.
  • Point og:url meta tag to old url : If you are using any kind of SEO tool or creating meta tags your self you have to change all the og:url tag to the http version again.
    So if you are using Jetpack SEO tool then Jeremy Herve created a gist for you. I am using Yoast SEO. I’ve created a small plugin for changing links in Yoast SEO.
  • Scraping : By doing both steps above you don’t get back your likes instantly but after 30 days. Facebook crawls each url after every 30 days of sharing the link. So my first step was going to open graph debug tools and fetch new info for every¬†URL. But the problem was, many sites are too large that fetching each link is not possible.
    For overcoming this problem, I researched on “How to scrap links by script”. I’ve found a solution in Stack Overflow and tweaked it a bit with file operations. You have to make a list of your URLs in a file and pass through the script. Use your Website Sitemaps for getting all the links of your Web Site.
External Links :

Any external links to your previous http links will take your SEO juice away, So it’s good to change them all.

If you are using Google Webmaster tools, add new urls with https. Don’t delete previous urls. Submit sitemaps, and request indexing.

Facebook page and Google Analytics is the another place you want to change the link to your site.

Update! HTTPS is faster protocol then HTTP if you upgrade your apache to HTTP/2. For comparing these two go to httpvshttps .

 

Manually configuring SSL Certificates

 

Getting the Certificates :

  1. Go to SSLforFree.
  2. Enter your website link to create SSL certificate.
  3. Verify your ownership of website.
  4. Download Certificates.zip.
  5. Upload ZIP to your hosting instance.

Configuring SSL :

  1. Extract ZIP.
  2. Move certificate.crt file to /etc/pki/tls/certs/
  3. Move private.key to /etc/pki/tls/private/
  4. Now change configuration in ssl.conf $ sudo /etc/httpd/conf.d/ssl.conf
  5. Find These lines and change accordingly :
    1. SSLCertificateFile /etc/pki/tls/certs/certificate.crt
    2. SSLCertificateKeyFile /etc/pki/tls/private/private.key
    3. SSLCertificateChainFile /etc/pki/tls/ca-crt.pem

Now Restart apache server and try opening your website with https enabled.

This method has some issues for mobile Certification and show insecure origin for mobile users. So I prefer to not go this way for adding SSL to your website. This was just my trial and error approach for installing the certificate.

Next Post Migrating from http to https

Why SSL Certificate is Important for your Website

In today’s world everyone uses Internet. Everyone wants to be Secure. But only a few understand the importance of having a Secure version of your website. Adding SSL encryption is one of the ways to protect your website from serious Threats. ¬†So the question is “What is SSL? Why do you need SSL? What are the benefits of having an SSL certificate?” I am going to explain why you need an SSL certificate and its advantages. So first of all:

What is SSL?

Secure Socket Layer is a security technology used for making the Internet a safer place by providing an end to end encryption to your website. So that the data passed through the network will remain Private.

SSL secures our websites but it’s not SSL actually :p ¬†SSL is an obsolete technology and has some vulnerability that can be exploited by several tools. When SSLv2 was released it had some potential threats that made it useless and hack-able. For more on this you can see this answer on Stack Overflow and Drown Attack.

After having known such vulnerabilities the web moved with new technology TLS (Transport Layer Security) but we still refer TLS as SSL or SSL/TLS. So we will also refer TLS as SSL and TLS certificates as SSL certificates in this article.

Importance of a SSL Certificate

1. Security :

The main purpose of SSL is to encrypt information so that only browser and the hosting server would know what information is being transferred. Basically any information submitted over internet are transferred through several computers before reaching the destination. A simple Man-In-the-Middle attack can fetch all the information transferred, be it Basic Bio info or Credit Card Info. Default http transfers the data in a plain text format so that anyone in the coffee shop using the same ISP can have all your info.

SSL encrypts all the data in the Transport layer before sending to the Network. So if someone is sniffing your information in between he will rather get a useless encrypted data. ūüėõ

Example: A simple string encrypted in SHA-512¬†–

Original : Shubham Pandey WordPress Developer
SHA512: f6c0302f9a3f440abae2a96909e56c9cd565d24d915b6d78b1fc21ffbca9e365fbed707a953c81614394055c261da552be869bd22f12f7864081eb063f121f8e

2. Trust :

Most of the People who use internet each day¬†and visit E-Commerce websites, know that a green padlock in the Address bar is Good. They don’t know what is the reason for¬†having a padlock and https in the address bar, but they know that It’s safe to surf your website.

A website with a green-ish lock icon in the address bar is the sign of trust so that the user is more likely to buy something or register with your website. Trust is directly linked with the revenues a website makes, so that it can bring more users to your website. More users: more revenue.

3. SEO Rankings :

Yes you read it right SEO rankings. I do not know if you know this or not But google says this in its¬†official Blog,¬†HTTPS as a ranking signal. They say “Security is a top priority for Google”. So for sure it boosts up your SEO ranking. But do redirect your non-secure Website to secure one otherwise your ranking will fall (because of the same content on 2 different protocols).

Disadvantages of having an SSL Certificate

With all these advantages does it have any disadvantages? Yes for sure it has some disadvantages, not any critical one and can be compromised with some software or hardware.

1. Performance :

If you are going to encrypt everything before served to the user, that will take more resources and memory on the server. It will only affect you when you are going to scale up everything and have a large number of visiting users. Then you can add extra servers or some load balancing software/hardware to reduce the load.

2. Cost :

If you are a normal blogger (like me) means just serving content but want to secure your users from security threats this won’t bother you. Because you can get a FREE! certificate from Let’s Encrypt¬†and install it for free(I will write another blog on “How to install and configure SSL Certificate in Apache Server”).

But if you have a Business Website the E-Commerce stuff and want to be more authentic to your Users, you have to get a Certificate from a CA (Certificate Authority). And then you have to pay some money to the Certifying Authority. But if you are in Business you can afford!!!

Secure HTTPS Signed by CA
Secure HTTPS Signed by CA

 

Secure over https
Secure over https
TL;DR

SSL is awesome. Change your Website from http to https. Cheers!

Trust begins with understanding. Understanding requires transparency.

Edit : 25 / March / 2017 

I’ve posted another blog on Migration to HTTPS from HTTP.