Category: Web development

Fix  character in Google search results and Facebook share description

If you’re seeing a strange  character or characters in your Google search results description or when sharing your articles and blog posts on Facebook but not in your article body itself then trust me, I understand your frustration because I thought I had tried every solution out there and none of the common fixes seemed to work for me. Read more to find out how I fixed the problem for my website and hopefully it will help you as well.

When it’s not in the body

If and only if you’re not seeing those characters anywhere else except for when you share your post on Facebook or do a simple Google search for your article then the solution will most likely be tied to how you’re telling Facebook and Google what your website is about.

Yep, I’m talking about the Facebook’s Open Graph properties and Structured Data that Google looks at. Have you been trying to implement these features into your website recently by any chance?

Double check your code

After spending hours of trying to figure out what the problem was and after creating this video to demonstrate the issue I finally realized the problem wasn’t related to WordPress at all. The problem was me and more importantly my lack of understanding the difference between two of the most widely used PHP functions: htmlentities(); and htmlspecialchars();

For a long time I was using the following code to give Facebook my article’s description:

<meta property="og:description" content="<?php { setup_postdata($post); echo esc_attr(htmlentities(get_the_excerpt())); } ?>"/>

And there’s nothing wrong with that… other than the fact that if you happen to have a special character somewhere in your content, it’s going to be translated literally.

Check out the htmlentities(); description

all characters which have HTML character entity equivalents are translated into these entities

If I had read the description beforehand none of this would have happened!

The trick was to replace the function with htmlspecialchars(); which doesn’t translate any special characters and the output remains clean.

<meta property="og:description" content="<?php { setup_postdata($post); echo esc_attr(htmlspecialchars(get_the_excerpt())); } ?>"/>

Once you’ve made the change make sure to re-scrape your content using Facebook’s debugger.

If the character is in the body

If you’re seeing the character all over your article’s body and you have no idea what I just talked about above then your solution could be as simple as putting the following code somewhere in your head tags:

<meta charset="UTF-8">

Was this helpful? Let me know in the comments below!


How To Increase Your Website Speed

In 2016, most web users expect websites to load in less than 3 seconds and if they don’t, they will click the “back” button in a heartbeat. Also, slow websites are typically penalized by Google, which will cause any natural rankings you have to drop over time. This is definitely not good for business and in this article, we will look at a few tips to increase your website speed.

Minimize HTTP requests

The first tip is that you should minimize HTTP requests. When someone enters your website’s URL or clicks on a link to your site, 80% of those few seconds are spent loading the different aspects of your page. These aspects include your style sheets, flash animations, images, scripts etc. In order for these elements to load, HTTP requests need to be made for each element which takes time. So, the easiest way to speed up your website is to reduce the number of HTTP requests that need to be made by simplifying your website, combing various style sheets into just one, using CSS instead of images, reducing scripts etc.

Enable compression

Next, another tip is to enable compression of your web pages. If you’re creating high quality content pages as you should, then you probably have pages that are 100kb or more. This is quite large and will cause your site to slow down. You can fix this by compressing your pages with tools like Gzip. By using a compression tool, you can reduce download time by as much as 70% since compression will reduce the overall bandwidth of the page.

Enable browser caching

Lastly, be sure to enable browser caching for your website. This is basically when a person visits your site for the first time, all of your website’s elements are downloaded and stored in their temporary cache. This information is kept in the cache so that any subsequent visits will cause the site to load faster and increase your website speed for that user.

In closing, we have just looked at a few ways to increase your website speed. Once you implement the above tips, be sure to continue testing and experimenting with other methods to see what works best.

Filed under: SEO, Web development

What is meant by hosting a website (web hosting for beginners)

When you ask people how to make your own website available on the internet, oftentimes you may hear people talk about something called hosting a website. But what does it actually mean?

Put simply, web hosting is a service provided by web hosting companies which allows anyone to publish their content on the World Wide Web and while it’s possible to turn your own computer into a web host, it’s usually not recommended due to the increased security risks that come from making the contents of your computer available to the general public.

These security issues along with the limitations of your internet connection speed, not to mention the possibility of a hard drive failure, are the main reason why most people prefer to upload their data (website and its contents) on a professionally managed, safe and secure remote server (a web hosting service).

Web servers stacked on top of one another in a clean and neat room

How to choose web hosting?

With hundreds of different web hosting companies to choose from, it’s understandable if it can get a little overwhelming, but don’t worry- the guys over at have put together a well researched web hosting providers comparison list and bring out the pros and cons of some of the most popular web hosting companies available.

I can tell you from my own experience that it’s not always a good idea to just go with the cheapest possible service because while the price may look sweet, the service itself will most likely be lacking something important with bandwidth and disk space limitations being the most common problem.

If you have a choice, it’s recommended to go with shared hosting at least in the beginning because it’s fairly cheap with most packages costing less than $5 per month and to be honest, shared hosting will be more than enough for your average website.

In case you didn’t know, shared hosting simply means that your website shares the disk space with other websites on the same physical server.

Shared hosting or Dedicated hosting?

Bigger web hosting companies have the capability of providing dedicated hosting packages for their clients. Dedicated hosting means that you lease out an entire physical web server all for yourself and no other website will have access to it.

For most people, this is unnecessary because dedicated hosting packages usually go for a lot more than a simple shared hosting with the prices reaching well into the hundreds of dollars per month area.

While shared hosting will be your best option if you’re simply looking to host a WordPress blog along with various plugins like WooCommerce, for example, a dedicated server will come in handy in case you want to publish adult material on your website or do something else that requires more processing power than normal (ie. hosting your own online game server).

Another example where you may need to switch to using a dedicated hosting package is when your business reaches a point where you have so many users online at any given time that it is starting to hurt other websites hosted on the same shared server by using up all the available memory and bandwidth.

Most hosting companies will usually send you a notification about it as soon as they detect such anomalies, but unless you’re as big as Amazon, Facebook or Twitter, you shouldn’t really worry about it.


Requirements to create a theme for wordpress

WordPress is the number one Content Management System (CMS) for both small time blogs, huge corporate websites and even online shops thanks to an endless sea of plugins such as WooCommerce, for example. With thousands upon thousands of free wp themes available on the internet, it’s almost guaranteed that you will find the one template that suits You perfectly. However if you are after a more professional and a truly one of a kind appearance, developing your own WordPress theme is probably a better idea.

Requirements for building a WordPress template

Creating your own WP theme requires at least a basic understanding of the following web programming languages: PHP, CSS, HTML and JavaScript. Here’s a quick overview on each language and how well you should “speak” it:

  • Cascading Style Sheets or CSS for short is the first one on my list because it’s the most important part of any theme/template. This is what gives your website (the skeleton) an actual “skin”. Without it there would be no “web design”.
  • Hypertext Markup Language or HTML for short is next in line because it’s “the skeleton” of your project. Without it there would be nowhere for your “skin” to go.
  • Hypertext Preprocessor (PHP) is yet another very important part of a WordPress theme because PHP is a server side scripting language which makes your entire website “tick”. You can think of PHP as a set of cogs, strings and wires that when put together just right, will make the clock run.

WordPress How To Create A ThemeThe three programming languages above are all required if you want to develop your own wp theme, but CSS and HTML are the two most important ones.

PHP is important too, but since WordPress is a very advanced platform, you will find that there is little to no need to actually add/edit any PHP code when creating a new theme. It’s possible to get away with just knowing how to use PHP’s include function in order to include certain page elements together (for example header, content and footer).

However if you want to build custom plugins or other functions that no other website uses, you have to dig a little deeper into PHP.

You may have noticed that I left JavaScript out of the list and I did it on purpose because honestly JavaScript and libraries such as jQuery are mostly used for cool special effects and aren’t really a requirement for building a new and functional WordPress template.

Additionally it may slow down your website’s loading speed and nowadays we can achieve pretty much any special effect using CSS/CSS3 so for the average user JavaScript is just going to do more harm than good. On top of that there are still plenty of oldschool internet users who have disabled JavaScript on their browsers.

Recommended framework to work with

I seriously advise against building a WordPress theme from scratch unless you’re doing it because you want to learn everything there is to know about the wonderful CMS. Why? Because WordPress is quite complex and it would take you a very long time, especially if you have never done this before, to go through all of the code and create a template on top of it.

It’s simply a lot easier and faster to use a “naked” framework which includes all the basic back-end stuff so you can get developing the front-end immediately. One of my favorite “skeleton” frameworks is Underscores and I have designed many WordPress themes on it. It’s basically a fully functioning wp theme with absolutely no design so it looks like you’re back in the 90’s.

Additional tools

You will need Notepad or better yet, Notepad++ to write code which I assume most of you already have and a testing platform with PHP 5 support, an SQL database and optionally FTP access if you’re not doing it locally.

Google Chrome is great for developers as it comes with the Inspect element feature which means you can inspect any element on your web page and the browser will show you exactly where it’s located within your code. It’s especially useful for figuring out where the element is rendering, what id and class it has and a lot more.

WordPress Codex is a useful repository of code (mostly back-end) with great examples and a very active support group ready to answer your questions. Only StackOverflow can outshine it’s activeness!

Finally the Theme Unit Test data will populate your WP blog with dummy content with the sole purpose of breaking your theme, which is good of course, because otherwise we would miss the small stuff and our project wouldn’t be whole.

Filed under: Web developmentTagged with: ,

WP Plugin: Virool offerwall (videos wall) for earning credits

A little over a year ago I wrote a PHP script that could be used as a very basic and simple Get Paid To website. The script was called the Vidcoin GPT Script which allowed your users to earn credits by watching short videos from the Virool network.

However Virool decided that offering cash rewards in any way or form was bad for business so they stopped accepting new publishers who were rewarding their users with money. The Vidcoin Script was left and forgotten, gathering dust on a virtual shelf…

Incentive WordPress plugin

Until one morning I asked myself: hey, if money’s no good, could I reward my users with something else? And so came the idea for a WordPress plugin that lets your already existing registered users earn coins by watching videos from the Virool network.

It’s totally up to you what you offer them in exchange for their coins as these coins are essentially your very own virtual currency and from Virool’s perspective, everything should be alright unless you let your users exchange their coins into fiat currency.

  • For example, you could let a user publish a guest post on your blog once they have accumulated enough credits.
  • Or if you are using the WooCommerce plugin and have listed something for sale, they could use coins to partially pay for these things.
  • How about using coins to pay for banner impressions?

WP Plugin: Ynef’s Offerwall

Once again I have concentrated on the basics and so there aren’t a lot of built in features in the beta version, but it’s stable and functional and can be used right now. Here’s how it works:

First you need to create two files and put them into your child theme’s root directory (the folder where you have functions.php, single.php, style.css and so on). I promise this is the only technical part you have to do!

NB! It’s worth noting that my theme is based on the underscores starter theme so depending on your theme, the div containers could be different.


/* Template Name: offerwall */
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main">
<?php ynef_offerwall_content(); ?>
</main><!-- #main -->
 </div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>


/* Template Name: withdraw */
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main">
<?php ynef_offerwall_withdraw(); ?>
</main><!-- #main -->
 </div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

The next part involves creating custom pages in your blog using the WordPress built in Pages section. I’m sure you’ve already done something like this before:

  • Create a new page called Offerwall
  • From the page attributes -> Template drop down menu choose offerwall
  • Save the page
  • Create a new page called Withdraw
  • From the page attributes -> Template drop down menu choose withdraw
  • Save the page

Installing the Plugin

To install Ynef’s Offerwall plugin, simply put the ynef-offerwall folder into your wp-content/plugins directory and activate the plugin from your WordPress admin panel -> Plugins section.

Plugin and Virool settings

Currently there is only one setting in the plugin’s settings page and that’s for your Virool API key. You can get one if you join the Virool network and set up your website. Here are the settings you need to use in your Virool site:

  • ActivSocial as Site Type
  • Currency: 1 coin = 0.01 USD
  • Callback URL:[USER_ID]&coins=[REWARD]
  • Leave everything else as default and hit save

Ynef's Offerwall Settings Admin Panel Page ScreenshotOnce your users start to withdraw their coins you’ll notice them appear on the plugin’s settings page under the save settings button.

It’s advised that you remove them only when you have come to an agreement with the user as to what they will be receiving from you because once removed, these withdrawal requests cannot be recovered and the user is left with no balance.

Note: The remove function doesn’t yet exist even though the link is there. Stay tuned!

What this plugin does exactly?

When you first activate the plugin, it creates a new database table called wp_offerwalldata where it will store the username, ip address, coins balance and the amount of pending withdrawals for your user(s).

The coins balance is updated each time your user successfully watches a video until the end and they can withdraw it immediately without any minimum requirements.

If they continue doing this, the script will simply add up the numbers and the requests from one user will still show as just one single request instead of spamming your settings page with hundreds of requests.

It’s up to you how you advertise your virtual currency (coins) and explain what your users can get in exchange. One good example as I mentioned above is to either give special privileges to your users or allow them to publish a guest post on your blog. The choice is really up to you!


How to get country & geo location from IP address using PHP

This is a quick and easy tutorial on how to get the country name as well as latitude and longitude from an IP address using just a few lines of code. You will be surprised at how simple it is to locate ip address using PHP and to make it even more awesome, we’ll construct a link to Google Maps with our geo coordinates so you can see the location of your IP on a map.

Geolocation from IP address

We could search for a free geo location database and use it on our server locally and maybe, just maybe get the data a few milliseconds faster, but in reality a third party API will do just fine and our server has to spend slightly less processing power on the task.

There are quite a few geo location API’s out there and some work better than others. For example I tried, but the result landed me more than 100 miles in the wrong direction so after testing with various services, I ended up with which is pretty accurate.

You can check out the documentation yourself, but for our tutorial this is all we need:

$details = json_decode(file_get_contents("$ip"));

Now we have your visitor’s IP address in a variable and we can use it to get a JSON object back from IP-API’s server that will be stored as $details.

This is how the response will look like:

 "status": "success",
 "country": "COUNTRY",
 "countryCode": "COUNTRY CODE",
 "region": "REGION CODE",
 "regionName": "REGION NAME",
 "city": "CITY",
 "zip": "ZIP CODE",
 "lat": LATITUDE,
 "lon": LONGITUDE,
 "timezone": "TIME ZONE",
 "isp": "ISP NAME",
 "as": "AS NUMBER / NAME",

As you can see it’s very manageable and you can echo various bits of information out like this:

echo $details->country;

Latitude and Longitude from IP address

When you look above at the IP-API’s response, it becomes clear that in order to put both Latitude and Longitude in variables that we can use later throughout our script, all we need to do is this:

$lat = $details->lat;
$lon = $details->lon;

If you like, you can use other bits of data from the same response. For example I will use the country and countryCode in my script:

$country = $details->country;
$countryCode = $details->countryCode;

Latitude and Longitude in Google Maps URL

The structure of a basic Google Maps query URL is very simple and straightforward consisting only of the URL to Maps and a q variable with your comma separated latitude and longitude. This is how it looks when using our previously set $lat and $lon variables:$lat,$lon

Putting it all together

This is the whole script you need to use in order to output something similar to the screenshot at the bottom. I have added some basic layout for the output by separating the country and countryCode with a comma as well as putting Lat and Lon on a new line followed by a URL to Google Maps:

// Credits:
$details = json_decode(file_get_contents("$ip"));
$lat = $details->lat;
$lon = $details->lon;
$country = $details->country;
$countryCode = $details->countryCode;
echo "Country: $country, $countryCode<br>
Lat: $lat Lon: $lon<br>
<a href='$lat,$lon' target='_blank'>Locate on Google Maps</a>";

Get geolocation from IP address with PHP latitude and longitude Google Maps URLThe above script will output something similar to what you see on the left and with a little CSS magic you can make it look and feel a lot nicer, but I’ll leave that for next time.

Thank you for reading and I hope you found this tutorial useful!


4chan Image Downloader and Threads Archive Script (PHP)

4chan and especially /b are both great places on the web to just sit back and relax after a hard day’s work by browsing through a sea of endless brain degrading material. It’s the perfect way of spending your free time (the time where mom doesn’t make you do the dishes), am I right? Trouble is, 4chan wipes all of its threads very quickly so if you miss your favorite thread- it’s gone for good (unless you create it again).

4chan downloader for threads & images

By combining my superior technical skills with the php simple html dom parser, I was able to come up with a pretty neat php script which will go to 4chan, search for your specified threads and download the threads as a whole along with all of its posts and images right to your php 5+ server.

All you need to do is specify which keywords to look for in the settings.php file and create a cron job to launch pull.php to visit 4chan every x minutes. So, for example, if you wanted the 4chan image downloader to visit You Laugh You Lose threads, you’d simply type “ylyl” as the $wordToFind variable- it couldn’t be more simple!

I have made the script open source and available for everyone on Github so if you understand code, feel free to make something cool based on my 4chan threads crawler script. There are a couple of things on my to-do list and I have written more about it on the Github page.

You Laugh You Lose 4Chan Archive

The You-Laugh-You-Lose threads of 4chan were what inspired me to create the 4chan you laugh you lose archive and the crawler has worked out quite nicely by pulling all the ylyl threads it can find directly to my server.

you laugh you lose ylyl screenshot

It’s a bit of a gamble to actually find a thread because my host is an ass and only allows a cron job to run every hour (minimum). Of course I could visit pull.php manually when I see a YLYL thread, but that kind of loses the purpose of my script as the point was to help me get a dose of ylyl when I have been away.


We all know how 4chan can be from time to time and since I haven’t figured out a way to filter out “certain” images that people enjoy to post and get banned for, my script could (in theory) get you in trouble for saving certain pictures to your server.

That being said, I hear that Google has an algorithm for that in Gmail so it’s certainly possible to come up with a filter of some sort. I guess it needs more research as I’m not all that familiar with image recognition software just yet.