Learn how to create and add a custom control in WordPress customizer. In this tutorial, we build a Category Dropdown control.
Are you building a WordPress theme? Perhaps you are extending a theme by working on a child theme? Or maybe, you are building a WordPress plugin that has something to do with the site’s presentation. Chances are, you need to add options into the WordPress Customizer. Options in the customizer are added as controls. A “control” in the case of the WordPress customizer, can be loosely defined as “a reusable UI component” that can either be simple (e.g. a title and an input box) or more complex (e.g. a title, a group of checkboxes and a dropdown). Fortunately, WordPress itself provides some customizer controls that can be used without much effort. Unfortunately, the selection of controls it provides is quite limited, leaving a lot to be desired.
One big omission (in my opinion) is the lack of a categories dropdown selection control. You know, the one where all categories are listed hierarchically (perhaps even with post counts) and you can select just one. Most probably you’ve seen this in Settings → Writing, where you can select the default category your posts will be assigned to.
Now, WordPress already provides a ‘select‘ control which
The wp_options table in your WordPress database often gets overlooked when it comes to the overall database performance.
Today we’re going to take a look at the wp_options table in your WordPress database. This is one area which often gets overlooked when it comes to overall WordPress and database performance. Especially on older and large sites, this can be the culprit for slow query times on your site due to autoloaded data that is left behind from third-party plugins and themes. Check out these tips below on how to check, troubleshoot, and clean up your wp_options table. What is the wp_options table?
The wp_options table contains all sorts of data for your WordPress site such as:
Site URL, home URL, admin email, default category, posts per page, time format, etc
Settings for plugins, themes, widgets
Temporarily cached data
The table contains the following fields, one of which we care about more when it comes to performance:
One of the important things to understand about the wp_options table is the autoload field. This contains a yes or a no value (flag). This essentially controls whether or not it is loaded by the wp_load_alloptions() function. Autoloaded data is data that is loaded on every page of your WordPress site. Just like we showed you how
Fixing overall slowness with New Relic is easy if you know what to check. This is an advanced tutorial to help you make your WordPress site a lot faster!
Here at Kinsta, our Support Engineers make use of New Relic APM every single day. It’s a powerful tool that drills down into the inner workings of a WordPress website to pinpoint plugins, theme template files, database queries, external calls, or coding errors causing performance issues on our clients’ websites. We pride ourselves on being developer-friendly managed WordPress hosting. So we don’t hog this powerful tool all to ourselves. On our platform, our users can add their own New Relic license so they can enjoy the same powerful visibility. If your hosting provider doesn’t offer New Relic integration, you can set it up yourself if your site is hosted in a private environment.
However, getting New Relic running is just the beginning. If you’ve never used New Relic APM (and maybe even if you have), you may struggle to get the most out of this powerful tool. In this tutorial our goal is simple: show you how you can use New Relic APM to fix what ails your WordPress website. Ready to get nerdy? Let’s get to it!
A Quick Overview of New Relic APM
So what is New Relic APM? For our purposes, the following definition fits:
New Relic APM is a web application
A tutorial on how to add a dismissible notice bar (e.g. a cookie notice) to your site without using a plugin.
Global, site-wide website notices are a pattern as old as websites themselves, and although they are being abused all the time they do have valid use-cases and are extremely useful in situations where we absolutely need to notify our visitors of something important, e.g. a great deal (as we do here at CSSIgniter), any kind of maintenance message or even the EU cookie law notice! When the need rises for such functionality the first thing on anyone’s mind would probably be to have a look at the WordPress plugin repo for any suitable plugins, and, well, although it’s justified (there are a ton of plugins for this kind of thing) there’s no reason not to implement it ourselves since it’s so easy and fun.
Without any further ado, then, let’s see how we’d go about building a simple, global, dismissible site-wide notice bar.
Our basic architecture
The customizer setting
All we need for our notice currently is a single text field. Ever
Here's an easy-to-follow tutorial on how to add a custom page template to your WordPress site using a child theme.
In this reading, I share some of my thoughts on Jetpack monetization and provide the code to disable upsell ads.
We live in a world of monetized Jetpack. Gone are the days where commercialized plugins were looked at under a watchful microscope, and leadership at Automattic felt that charging for plugins was, well, plain wrong. Today we’re seeing Jetpack as the revenue bridge between .org and .com offerings — and a very big bridge at that.
A reading episode of this article:
As the Jetpack team continues to sharpen its marketing fangs around the plugin’s messaging, we’ve seen more meat on the bones of upsell nags.
See, I’ve received an uptick of customers and friends I’ve helped onboard to WordPress, question its security. Why? Because Jetpack is prompting to upgrade users to their paid backup and security services.
Obviously, I have mixed feelings about this, of which, I’ll save for the end of this post. For now, here’s how you can turn off those nagging Jetpack upsell ads.
CODE to disable Jetpack upsell ads
TL;DR (Sorry, you’ll need to get out your text editor for this one.) Look inside jetpack/class.jetpack-jitm.php, for the filter ‘jetpack_just_in_time_msgs’ See this GitHub link.
It won’t come easy for the non-technical
IFTTT is a web service that allows users to create connections between two or more 3rd party services. This post explores the opportunities disclosed by IFTTT to WordPress users.
IFTTT (if this than that) is a web service that allows users to create connections between two or more third-party services. IFTTT supports more than 500 web services, and provides a library with hundreds of ready-to-use applets you can use to automate a considerable number of tasks in your daily work. The paradigm “if this than that” means that if an event is detected somewhere, then an action is performed elsewhere. For WordPress users, IFTTT means fewer plugins installed, more connections to a huge number of web services, higher automation and productivity in online activities. In this post, we will explore the opportunities disclosed by IFTTT to WordPress users. First I will introduce you to the web service, then I will highlight some popular WordPress IFTTT recipes, finally I will show you how to build a basic applet to connect Flickr and WordPress.
But before diving into the web service, I should provide some definitions of commonly used IFTTT terms.
Applets (also called recipes) are the applications that automate the interactions between services following the if this than that paradigm.
A trigger is a source of events that IFTTT can respond to by
Google AMP is great for big publishers but it doesn't mean works for all of us. We tested it and after a few months, we decided to disable it completely.
If you run a WordPress site you have probably contemplated already at some point whether or not you should implement the hot new Google AMP for mobile. We had the same dilemma here at Kinsta and ended up testing it for a while. In the end, we didn’t see good results and it ended up hurting our conversion rate on mobile devices. So today we are going to dive into how to disable Google AMP on your blog, and how to safely do it without 404 errors or harming your SEO. Simply deactivating the AMP plugin alone could end up really harming your site, so be careful. The good news is that both methods mentioned below don’t require a WordPress developer and can be done in a few minutes! Google AMP
Google AMP (Accelerated Mobile Pages Project) was originally launched back in October 2015. The project relies on AMP HTML, a new open framework built entirely out of existing web technologies, which allows websites to build light-weight web pages. To put it simply, it offers a way to serve up a stripped down version of your current web page. You can read more about it in our in-depth post on Google AMP, as well compare all the pros and cons.
Why Google AMP Didn’t Work For Us
A non-technical tutorial on how to build a WordPress Multilingual Site quick and easy with TranslatePress WordPress Plugin.
Reaching an international audience or a diverse community that speaks multiple languages is now available to almost any type of business and can have a positive impact on your website traffic and revenue. The first step required is to add multilingual functionality. “I Increased My Search Traffic by 47% from Translating My Blog into 82 Languages” – Neil Patel
It’s also worth mentioning that there’s been an increase in websites translated in more languages, in the last period of time. Build With comes with an interesting graphic explaining the Multilingual trends.
Businesses that should have a multilingual site
Firstly, let’s make a short roundup of some international businesses that would need a multilingual site:
Tourism agencies & Hotels
Companies that are doing or extending their business on international markets
Companies active in a country with more than one language, such as Canada (English, French)
Types of translation available
As my colleague explained some time ago, “WordPress in more languages can be anything between a slight annoyance to a real problem that can stop your project halfway”. The WordPress platform still doesn’t
Liz shares a bunch of troubleshooting solutions for print style sheets.
If any of you have played around with a print style style sheet on a complex theme or site you might already be familiar with the fact that print CSS does not always operate the way you would expect or desire. If you have not yet experienced the familiar urge to ram your head through your computer screen, I hope to save you from that experience with a few tips and tricks I picked up while learning to troubleshoot print style sheets. Before we jump in, I want to ensure you’ve got some useful tools right off the bat to help set you up for success.
What you need
First, make sure you’re working on a browser that allows you to turn on a print emulator. This will make troubleshooting go a lot faster. However, be forewarned, while the print emulator shows the elements you will be printing and their style sheet rules, it does not necessarily visually represent perfectly what the printed page will actually look like. Frequently check your changes by either printing or viewing/downloading them as a PDF to confirm you’re getting the desired results. You will be sorely disappointed to get things pixel perfect in an emulator only to discover the printed result is vastly different.
I wrote an article on how to start contributing code to WP Core
Today WordPress powers almost 28.6% of websites on the internet And the number is still growing. By far it is the most popular CMS around. What makes it even more special is that it is a free and open source software. And it is built & supported by a very good community. WordPress community has always welcomed anyone who wants to get involved with WordPress. WordPress 4.9 is just two weeks away from its beta launch. And it is a perfect time to participate in WordPress Core Contribution
I recently started contributing to WordPress core. And it feels great to take part in the process which is going to shape the software In this article, I am going to show how you can also get started with WordPress Core Contribution
First of all, let me introduce you to WordPress Trac. It is the place where the development of WordPress takes place. This site consists of a lot of tickets. A ticket is similar to an issue which you create on GitHub repository. A ticket can be one of the following three types.
For WordPress core contribution, you need to look through the tickets present in Trac. For the beginners, now and then, WordPress Core Committers mark tickets
Creating an online course can be tough - especially if you're used to teaching in a classroom. Here are a few things I've learned after a year of creating exclusively online courses.
Think about the last conversation you had via text or phone. Now think about the last conversation you had in person or via video. Consider the differences. How well were you able to pick up tone or meaning? Were there subtle communications you missed over the phone that you likely would have picked up in person? How much is lost when you’re not looking at the person you’re talking to. Teaching In-Person vs. an Online Course is Different
In the classroom, I knew who I was talking to. I could see them and had some information on their backgrounds. When I said something they didn’t understand, I could tell by the look on their faces. And when I needed feedback, they were more or less a captive audience that I could ask and talk to. When I transitioned from in-person courses to online courses, this was the hardest change to make.
Nearly all of that is lost online. That means you’ll have to do some more research on the front end, before you create the course. Over the last year or so of teaching exclusively online, I have finally picked up on some of these things. As I create new courses, I’m putting what I’ve learned into action.
If you’re thinking
Beaver Themer is an addon for Beaver Builder plugin that brings the power of Page Builder to theme development. You can create content layouts, theme parts and do a lot more with Beaver Themer + Beaver Builder.
Beaver Builder is the perfect tool when it comes to drag and drop page builders. It offers significant optimization and freedom to design whatever you want. You can put your design and imagination whatever you can think of on your pages now. Recently an add-on to this was launched called the Beaver Themer.
This addon is launched to extend the functionalities and powers of Beaver Builder. By Functionalities, I mean the ability to alter the Header/Footer and assisting in making default page templates.
Since we are working with the Beaver family, this goes without saying that you do not need to have any coding knowledge to use Beaver Themer.
But first, let’s understand what is Beaver Themer and what are its capabilities?
What is Beaver Themer?
Beaver Themer is basically an addon for the for the Beaver Builder, which is a highly user-friendly drag and drop page builder.
Beaver Themer lets you create layouts for archive pages, template an entire post type, 404 and search pages, and create parts like headers and footers.
With the original Beaver Builder plugin, you can add elements, modules and save them for further use as well but this functionality was limited to the Content area
All the best features of Google Analytics explained with pictures.
Posted in WordPress by Jamie 0 Comments Using Google Analytics can be an extremely effective way to track your WordPress website’s performance. This solution can help you understand who your visitors are, what they are doing on your site, and what you need to improve to make your website more successful. However, if you have taken a glance at Google Analytics and not found it particularly self-explanatory or instantly useful, then you aren’t alone!
In this guide, we look at the key aspects of Google Analytics to help you get the most out of this free tool. We cover how to integrate Google Analytics with your WordPress website and get it up and running. We discuss the most important reports to monitor and what you can learn from them. And we look at how to set up conversion goals for your website track the results.
What is Google Analytics and What Does It Do?
Google Analytics is a platform that can track the user data from your WordPress website and compile it into useful reports. The reports Google Analytics creates can help you evaluate how your visitors interact with your website and monitor your site’s performance.
Much of the data recorded by Google Analytics
This week Ashley is starting a new series on how to scale WordPress to handle more traffic. Building upon what you learned in his previous series on Hosting WordPress Yourself and introduce more advanced concepts such as load balancing, MySQL replication and distributed filesystems. Part 1 begins by extracting the database to a dedicated server.
In this series we’re going to look at how we can scale our WordPress app to handle more traffic. Throughout the course of this series, we’ll build upon what we learned in Hosting WordPress Yourself and introduce more advanced concepts such as load balancing, MySQL replication and distributed filesystems. So if you haven’t yet gone through the original series, you should start there or subscribe here to get the series via email. Unlike the original Hosting WordPress Yourself, this series will form more of a high-level overview and the step-by-step guidance will be more terse in comparison, therefore before attempting these optimizations you should have a firm grasp of the CLI and server configuration in general. Our sole aim is to increase the number of requests we can handle per second. We’re not concerned with high availability or auto scaling, although we will introduce some form of redundancy by splitting our application over multiple servers.
When it comes to scaling there are generally two types, vertical and horizontal. We’ll discuss each in turn, but before doing so it’s worth considering if scaling is indeed the correct
Thank you for choosing Widget Options! As a token of appreciation, I am providing you with a simple plugin that will easily migrate you from Display Widgets to Widget Options.
Because Display Widgets plugin has been permanently removed from the repository, you must have searched for the best replacement and found Widget Options! Thank you for choosing our plugin! I promise, you’ve made the perfect decision! As a token of appreciation, I am providing you with a simple plugin that will easily migrate you from Display Widgets to Widget Options. Just follow the instructions below. How to Migrate Display Widgets’ saved options to Widget Options
Simply follow the steps below and/or watch the video I’ve created for better transition to Widget Options for WordPress. I do highly recommend that you backup your website or test it on the staging environment first to be completely sure that there’s no issues/conflicts with your theme or plugins.
Download the migrator plugin tool on github : https://github.com/phpbits/widget-options-migrator
Upload and activate the plugin.
Go to Tools > Widget Options Migrator and read the text descriptions carefully.
Click Process Migration
Download and Install Widget Options in case you have not done it yet.
Go to Appearance > Widgets and double check if the options were migrated perfectly.
Container orchestration platforms are a big deal right now. In this article, we're going to start simple and take a look at the Kubernetes platform and how you can set up a WordPress site on a single node cluster on your local machine.
As a developer I try to keep my eye on the progression of technologies that I might not use every day, but are important to understand as they might indirectly affect my work. For example the recent rise of containerization, popularized by Docker, used for hosting web apps at scale. I’m not technically a devops person but as I build web apps on a daily basis it’s good for me to keep my eye on how these technologies are progressing. A good example of this progression is the rapid development of container orchestration platforms that allow you to easily deploy, scale and manage containerized applications. The main players at the moment seem to be Kubernetes (by Google), Docker Swarm and Apache Mesos. If you want a good intro to each of these technologies and their differences I recommend giving this article a read.
In this article, we’re going to start simple and take a look at the Kubernetes platform and how you can set up a WordPress site on a single node cluster on your local machine.
The Kubernetes docs have a great interactive tutorial that covers a lot of this stuff but for the purpose of this article I’m just going to cover installation
Learn how to install and run WordPress on a Kubernetes cluster.
Learning about Kubernetes, in the beginning, would feel like drinking from a fire-hose. They have a number of various abstractions to solve various problems, all related to one essential goal – Running containerized applications across multiple hosts. If you are unfamiliar with what containers are, take a few minutes to read our post on Docker and containers in general. Containers are tied down to usually one physical machine or a VM (which again runs on a single physical machine). You can have multiple containers on one machine, but not the other way round. This is where Kubernetes comes into the picture. What Kubernetes tries to do, is allow us to aggregate multiple numbers of these VMs and physical machines and enable us to deploy applications (inside containers) that would seamlessly run over these multiple interconnected computers as if it were one system.
The best approach to learning anything new, like Kubernetes is to get a hands on experience by doing something productive with it. As such, we are going to go through the process of setting up a Kubernetes cluster from scratch and install a WordPress website on it.
At least two VPS or VMs, most cloud platforms
Building landing pages is easy with Beaver Builder, WordPress, Hestia and PowerPack Beaver Addons.
If you want to build a landing page with WordPress then you have a handful of possibilities. We even listed some of them a while ago (here). But since then, we’ve seen a lot of development in the realm of builder plugins and code-free site constructing in general. So let’s explore some of that today. What you’re about to read is a hands-on tutorial on how to build a great-looking landing page with Beaver Builder + our own Hestia theme + something called Beaver Builder PowerPack Add-on, all of which are free products (we’re using the “Lite” versions).
The best part, as many would say, is that you don’t need to have any knowledge of coding to carry through with this one.
Here’s Puneet Sahalot explaining the whole process:
This is a contribution by Puneet Sahalot.
How to build a landing page with WordPress and Beaver Builder for free
Building a landing page or even a whole website is not that difficult nowadays. Beaver Builder, for instance, is a very powerful tool when it comes to this. This drag-and-drop tool is easy to use, and even a beginner can grab it to create a full-fledged landing page in minutes.
However, while Beaver Builder surely
A very easy-to-follow tutorial on how to make a mobile drawer menu using the jQuery.mmenu plugin
It’s been a few years now where nobody even thinks about making a website that’s not responsive and mobile friendly. Mobile phones and tablets have become the primary means of accessing the web for the majority of people, and providing a great experience for mobile users has become a real responsibility for every website owner. After the website’s content itself, probably the most crucial component of any website is its main navigation as it is in many cases the only way users can navigate around a website and discover its offerings.
While a navigation menu for desktop views is arguably a solved problem and the best patterns have been concretely established for far more than a decade, we’re still not 100% percent clear on the truly best patterns for our mobile menus types, styles and UX. The most popular patterns emerged a few years back, with the hamburger triggered menu being the most prevalent. On touch it usually reveals either a drawer (which is also the most popular approach and can be placed top, left, bottom or right), a dropdown, or an expanded list.
In this small tutorial we’ll see how easy it is to create a navigation menu which turns into a
Aaron Reimann shares tips and tools for determining where a website is hosted.
These days, most companies of a decent size have their own websites. And while employees might be able to steer you to the address, often they don’t even know who hosts this website you’re tasked with keeping healthy. When I ask these folks who hosts their email — or the website itself — often the response is a blank stare. Or my personal favorite: “Who is hosting my website? Well … Bob’s nephew set it up years ago, but he’s away at college and we can’t get in touch with him.” In a way, it makes sense. People just need web and email hosting. They just want things to work. Who hosts a certain website just isn’t their concern.
But as web professionals, it’s our job to figure out these things, even if our client has no clue.
There are some tools already installed on Mac, PC and Linux systems that can help you find out who hosts a website, so you can get to work.
Find out who hosts this website in three steps
Use ping to find the IP address.
Use WHOIS to find the host information.
Use a dedicated service to look up details.
For this article, we’ll be using screenshots from a Mac, but equivalent tools exist for
For content creators, it can be very frustrating to see your hard work simply copied. Check out these recommendations on how to prevent it, find your copied images, and what to do after the fact.
Unfortunately, as the internet grows, image theft becomes more and more common. As a content creator ourselves, we have to deal a lot with this reoccurring issue here at Kinsta. There is nothing worse than seeing all of your hard work simply copied to another site, intentional or not. It isn’t by any means fair to the creator, but there are also instances where we’ve seen it cause issues in Google image search (which is even a bigger deal). This can be especially bad for certain industries such as photographers, as sometimes images are their primary source of income. Today we’re going to dive into a few ways you can protect your images, how to find stolen images, and what to do if they are used without your permission. Why is Image Theft Bad?
First off, let’s cover why image theft is bad. Besides the fact that you’re robbing the creator, in a lot of cases, it is also illegal. Let’s take Kinsta for example. We actually pay for icons that we use in a lot of our features images on our blog. We are big fans of Iconfinder and it has helped speed up the creation of our graphics. If someone copies and uses our featured image, they are actually breaking the
Footer widgets are great spots for lead generation. Learn how to easily style WordPress footer widgets on Genesis Websites using Extended Widget Options.
Months ago, I published How to Create Genesis Widgetized Homepage using Extended Widget Options. Now, I’ll be setting you up on How to Style WordPress Footer Widgets on Genesis Websites using Extended Widget Options Plugin. Why footer? It’s because I always come across blog posts on how to style WordPress headers, and we somehow lose focus of footers which are great spots for encouraging users to engage on our website after reading the contents. They’re also great spots for lead generation since they’re the next sections of the website that users will see after happily reading your amazing blog post.
How to Style WordPress Footer Widgets on Genesis Powered Websites
This tutorial requires the plugin’s premium version. If you haven’t downloaded the plugin yet, go ahead and purchase the Extended Widget Options here.
I’ve created a step by step video guide on how to create your eye-candy footer widgets, but first you’ll be needing to add the code below to your functions.php to enable the widget area.
//* Add support for one fullwidth footer widgets
add_theme_support( 'genesis-footer-widgets', 1 );
Then, add the code below to
Typically a 502 bad gateway error is not a client-side problem, but rather one with your host. However, WordPress third-party plugins and themes with bad code or unoptimized queries can also cause these errors. Here are some tips on how to handle them.
When it comes to WordPress, there are a lot of different errors that can be downright frustrating and confusing. A few that come to mind are the white screen of death or the frightening error establishing a database connection. But an even more popular one is the 502 bad gateway error. Why? Because this regularly happens around the entire web, not only to WordPress sites, but even popular services such as Gmail, Twitter, and Cloudflare. But of course, we really only care about how it impacts your WordPress site. Read more below about what causes this error and some solutions on how to quickly resolve it. What is a 502 Bad Gateway Error?
Every time you visit a website your browser sends a request to a web server. The web server receives and processes the request, and then sends back the requested resources along with an HTTP header and HTTP status code. Typically an HTTP status code isn’t seen unless something goes wrong. It’s basically the servers way of notifying you that something has gone wrong, along with the code on how to diagnose it.
There are many different types of 500 status error codes (500, 502, 503 504, etc) which all have slightly different meanings. These