How to fix “Uncaught TypeError: Cannot read property ‘indexOf’ of undefined” in WordPress

We had this error “Uncaught TypeError: Cannot read property ‘indexOf’ of undefined” in WordPress a few times. First time when we encountered this, it was a little scary. If something does not work after a WordPress or plugin update or maybe because the plugins were not updated for a long time then you can check the Inspector > Console.

Read more

How to add a new column to WooCommerce orders table

WooCommerce provides a table with all the orders in WP dashboard area under WooCommerce > Orders. By default that table has 7 columns: Order, Date, Status, Billing, Ship to, Total and Actions. If you want to add a new column to this table in WordPress admin area this is possibly by adding custom PHP code to your functions.php file which it is in your theme folder.

Read more

Understanding the Bootstrap 4 framework CSS grid system

Bootstrap is the world’s most popular framework for building responsive, mobile-first sites and with the new version of it it has become even more interesting to all of us. Bootstrap 4 has a better grid system than version 3 in my opinion. Actually, some time ago I wrote an article about Bootstrap 3 grid system in which I have explained it in more detail. It’s the time to have a look at Bootstrap 4 grid system which brings pretty cool new things. Yalla. Let’s go! 🙂

Read more

,

Redirect user to different thank you pages based on the chosen payment method in WooCommerce checkout

WooCommerce is a great e-commerce platform for WordPress. I’ve been working with this for such a long time and it is a reliable plugin-in for sure.

One of my customers needed to redirect the buyer to specific different thank you pages on his WordPress website which uses WooCommerce. The redirect should have happened after the checkout process. During the checkout the buyer had multiple payment options. The buyer should have been redirected to a specific thank you page depending on the chosen payment gateway.

Read more

How to set up SMTP on a WordPress Media Temple Grid website

Send emails from your WordPress website hosted on MT without any problem and anytime!

I will show you how to set up SMTP on a WordPress website hosted on Media Temple Grid. I’m doing this because I have realized that the information provided by MT is not very clear and I had to set up this step by step and test it multiple times until I managed to make WordPress to send emails using SMTP. At some point, since the SMTP data provided by MT was not working, I had to use Gmail SMTP.

Read more

How to use different headers on different WordPress pages

wordpress different headers

Loading WordPress different headers on separate pages was something which I needed during my work on many websites. I’m not talking here about showing a different graphic image on separate pages. We will learn in this tutorial how to achieve this without creating separate .php files. This article is useful when you actually need totally different look and functionality on various WordPress pages.

Read more

How to remove Google Remarketing or Conversion iFrame white space

I have encountered a weird problem some time ago and I had to do some research to solve it. I was working on a website and added a Google Conversion iFrame code. Google recommends to add the conversion tracking tag between the body tags (). After that, I realized that the top of the website had a weird white space. That was looking ugly and I needed to remove that. I did some research on Google and found a CSS solution which was perfect.

Read more

Open WordPress menu item link in a new browser tab or window

wordpress menu item configuration options

Opening a WordPress menu link in a new window or tab it is actually easy. But sometimes, it can be tricky.

So you have built a WordPress menu and you want one of the menu items to open in a new tab.  Or a new window on your Firefox, Chrome or whatever browser you use. That is probably you have a menu item that links to another website, or to a .pdf or maybe a page with testimonials or whatever.

Read more

A simple solution for a CSS responsive background image

One of the problems I’ve encountered when I started to develop responsive websites was the ability to create a CSS responsive background image. Then I’ve found a solution which, for now, it is a good one and I would like to share it with you.

The solution it is simple and it implies to use background-size: 100%; for the container which has the background image and also, to make it fully responsive, a new conainer with top padding it is needed. Let’s see exactly how will this work on Bootstrap 3.0 CSS framework.

Read more

Bootstrap 3 grid system explained

Bootstrap grid system overview

UPDATE: There is a new article for Bootstrap 4 grid system which will help those who use a newer version of Bootstrap.

Bootstrap grid system was confusing for me the first time I used it. Recently I did some research to change the old CSS framework that I usually use for my web projects. After long searches and tests I decided that Bootstrap 3.0 it will be the best for me. I’m still not fully happy about Bootstrap, mainly because the fact that the menu does not accept multiple menu levels, but I have did some changes to make it work as I want.

As I said, the problem which I encountered with Bootstrap was the grid system. Although it is something logical, it was confusing for me in the beginning and it took me some time to understand it so I can benefit the maximum of all features.

Read more