We recently discovered a situation where we were able to find some fun and interesting ways to extend our standard ACF Flexible Content Blocks. Let's dig in and find out what we did!
Here at WebDevStudios, we do quite a bit with Flexible Content Blocks in Advanced Custom Fields (ACF). If you aren’t familiar with the plugin, ACF allows for the creation of a multitude of custom meta field types using a graphical user interface (GUI) in the WordPress Dashboard. You can do almost anything with these fields—from simple text and URL inputs to searching for posts and pages and building image galleries. ACF allows you to power your site with robust customization options, which you can use to create and manage dynamic pages. Instead of being locked into a set of page templates where the functionality and layout are tied directly to the theme’s files, building pages with ACF Flexible Content Blocks puts the power of customization into your hands as a site manager and editor. You can add, remove, and rearrange blocks as needed and have full control over the content within each of those blocks.
Sometimes, though, simply customizing the content within those blocks isn’t enough. Sure, it’s nice enough to be able to edit the title of a block or select a different set of Featured Posts to display. But, what if you don’t want to have to get that
Once a novelty or even a fad, GeoIP services are now a must-have for any decent web-service. Although still far from something you can rely on 100% they are a great way to personalize content for users
There used to be only a few IP Address Geolocation – GeoIP services available, but as with everything these days we have choices. A lot of them. That’s great but does leave you with the question “Which GeoIP service should I choose? Which one is best for me”. You’ll have to answer that for your self, but our handy comparison table should help ease the pain. Don’t be blinded with “free”. Think a few steps ahead when choosing. The service should support you for at least a few months. Implementing a new one is far more costly than paying $19 per month. Why (if at all) do I need a GeoIP service?
Since you’re reading this article, you obviously have some ideas on how to utilize the GeoIP data in your site or app. If you don’t and are just learning, we recommend looking into segmenting and personalization.
When someone visits your site, you don’t know anything about them. Besides the quite non-interesting technical data describing their browser and its details, you don’t know anything about the user’s preferences, gender, age or anything similar that would give you a chance to offer a more personalized experience.
This... this is absolutely the right solution. Hope it happens.
Over the past week, developments which I predicted back in December last year have come to fore, and I am deeply concerned about the effects they will have on WordPress (the application) and the community unless we take decisive action. Short version: For various reasons, many WordPress users will be faced with a complex dilemma when 5.0 and Gutenberg comes out:
a) Get the latest version of WordPress and risk compatibility issues / costly retraining, redesign, or entire rebuilds, and/or other problems, or b) choose not to upgrade and end up running an old and eventually insecure version of the content management system.
So far, the response from WordPress leadership has been to install the “Classic Editor” plugin which as the name suggests reintroduces the classic WYSIWYG editor once the Gutenberg Block Editor becomes the default. This is, in my opinion, a dangerous road to go down both for the end-user and WordPress itself.
Classic Editor as a permanent solution won’t work
Classic Editor is a bit like using a band-aid to plug a hole in a ballon as you are inflating it. It may work right now, but as the balloon continues to grow, the band-aid not only won’t do
Vue.js WordPress Starter A WordPress Vue.js starter plugin with required toolbelts
A look at the pros and cons of making the switch to Gutenberg. Existing sites may be better off staying put.
With the impending release of WordPress 5.0, the new Gutenberg editor will make its way onto millions of websites. It’s a big change in how content is created, stored and managed. Not to mention the potential compatibility issues that could crop up with some themes and plugins. As the new editor prepares for full release, we should note that the “Classic” Editor will remain available as a plugin. Activating it will enable site owners to use it in conjunction with Gutenberg or bypass it completely.
Because the Classic Editor affords us a second path, it’s worth considering whether or not to take it. Gutenberg represents a big shift in how WordPress operates. The question becomes, is it really worth utilizing the new editor on an existing site, or is it better to stick with the tried-and-true Classic version?
To answer that question, there are several factors to consider. So, before you take the plunge and switch to Gutenberg, here are a few items you’ll want to think about.
The Past and Future of Your Content
The content on your existing website, along with the way you manage it, has already been established. Odds are that your pages and blog posts follow
PHP 7.3 is knocking on our door and with it comes new useful features, functionalities, deprecations, and a good number of bug fixes. This release is definitely all about developers!
PHP 7.3 is knocking on our door and with it comes new useful features, functionalities, deprecations, and a good number of bug fixes. This release is all about web developers. The current Beta 2 version was released on August 16, coming perfectly on time with the PHP 7.3 timetable. You can download the current PHP 7.3 version for your development and testing, but keep in mind that, this shouldn’t currently be used in production environments.
In this post, we’ll provide an overview of the features and changes that we personally consider most relevant. But you can always check the full list of features, changes and bug fixes in PHP 7.3 upgrade notes and PHP 7.3 Requests For Comments.
What’s new in PHP with PHP 7.3?
In this post we’re covering the following PHP 7.3 changes:
Flexible Heredoc and Nowdoc Syntaxes
This is probably one of the most relevant improvements coming with PHP 7.3, and we think it deserves a little more attention. So, before diving into PHP 7.3 heredoc/nowdoc changes, we’ll provide a quick overview of this useful core feature. If you are already confident with nowdoc and heredoc, feel free to jump to the PHP 7.3 changes.
An overview of
This Senior Frontend Engineer is leaving Homestead and takes the reader on a journey to discovering the best all-around local development environment.
Back in 2016, I wrote a blog post about using Laravel Homestead as my local environment. At the time, my only real options were Vagrant or MAMP as an Apple user. Since then, the number of options has increased slightly to include Local by Flywheel, a more significant push to using your computer, and a set of packages like nginx and dsnmasq to run a local environment from a directory on the fly. At the time, Homestead was my local development environment of choice because it was easy to install, quickly configurable, and lightweight—something I appreciated using an older MacBook Air as my daily driver at the time. However, the more robust my sites became, and the more websites I collected on my local, the slower Homestead appeared to run almost certainly because it relies on VirtualBox or a virtual system to run your instance, which caused me to look elsewhere. I avoided MAMP or Vagrant and similar software because they were too resource heavy for my late 2011 setup for many of the same reasons.
Flywheel offers a solution (at the time called Pressmatic; Flywheel acquired the company in late 2016), which provides individually configurable docker instances in
In this article, we're going to build on what we have looked at previously in this WordPress Deployment series and consider some alternative hosted services that can help us with automated deployments for our WordPress site.
In my last article, we looked at different methods of deploying a WordPress site using Git. We also looked at using an external CI service (such as Travis) to automatically trigger a deployment on your remote git repo. In this article, we’re going to build on what we have looked at previously and consider some alternative hosted services that can help us with automated deployments for our WordPress site. There are many hosted services that we could use to deploy our WordPress site but we’re just going to look at a few of the bigger ones: Buddy and DeployBot. Unlike Travis, these services are dedicated to automated deployments and offer a lot more functionality and flexibility.
As I’ve mentioned several times now, for the purpose of this series I’m going to assume you have your site stored in Git and you are using Composer to manage your WordPress site, plugins and themes. If you’re looking for a quick code example to get you going you can use this skeleton repo I’ve set up (that I’ll also be using for demo purposes in this article).
As was the case in my previous articles, I’m also going to assume you have a destination server
This is why CSS Grid & Flexbox are powerful platforms and why they're very much recommended by experts
Flexbox and CSS Grid have both provided web property developers with more convenient ways to do website design from scratch. The amount of control that they give to developers, particularly when customizing and styling complex web pages, is unprecedented and instrumental. More importantly, both these platforms are vital for ensuring that your website would always be able to adhere to responsive design guidelines. Often, comparisons are made between CSS Grid and Flexbox. While there are noticeable differences, what’s sure is that both are reliable and actually work extremely well if used together.
Advantages of Flexbox & CSS Grid
Avoids dependence on third-party libraries
CSS Grid and Flexbox were invented and developed to overcome a major hurdle prevalent in standard CSS layout system: the overreliance on third-party libraries. These libraries were often used to make up for the features that web developers have found to be lacking in the system. These third-party libraries were usually utilized to perform steps that are practically no longer needed to be done thanks to CSS Grid and Flexbox.
CSS Grid, after all, has its own grid layout system, which basically makes it easier
WebDevStudios has used Beaver Builder for several projects. The development documentation for Beaver Builder is pretty good, however it falls short in one particular area: custom fields. Our Senior Backend Engineer walks you through creating Beaver Builder custom fields.
At WebDevStudios (WDS), we’ve used Beaver Builder for several projects because it provides a quick and intuitive way for our clients to customize their websites. The development documentation for Beaver Builder is pretty good, however it falls short in one particular area: custom fields. What fields am I talking about? They’re the ones that show up when you’re editing a particular Beaver Builder module’s settings: There are a couple of links in the documentation to the templating used with custom fields, but no start-to-finish example. Let’s do one here so you can start creating your own custom fields.
For this example, I created a plugin with a Beaver Builder module called “Post Category List” to show a list of posts that are in the selected categories. The plugin is very simple—only the minimum amount of components are needed to create a Beaver Builder module:
A module class that extends FLBuilderModule
A module registration call – FLBuilder::register_module()
A frontend.php template used for rendering
TL;DR: Tom McFarlin isn't planning to update any of his own plugins for Gutenberg compatibility until Gutenberg is in core and clients / end users are asking for it. But that's not because Gutenberg isn't necessary, only because clients can't ask for something they don't know exists.
I’ve been asked, on a few occasions, why I’ve not released anything that’s compatible with Gutenberg or why certain plugins aren’t compatible with the current version of the Gutenberg plugin. In the WordPress economy, I’ve seen few things as divisive as this shift in WordPress (though it seems to be finally have chilled a bit). And I’m not interested in entertaining a position on it on this blog.
But when others ask why I’ve not bothered to write anything about it or make certain plugins compatible with it, I find that it’s worth talking about it at least to a certain degree.
Demand for Gutenberg Is Not There
As far as building solutions for others are concerned, there’s yet to be demand for Gutenberg compatibility at all. This doesn’t mean that people don’t see it on the horizon nor that they don’t see the need to prepare for it.
But customers who pay WordPress developers, designers, and other experts in our field aren’t using it right now, so the demand for building something on Gutenberg is not there.
Another way of looking at is that there’s interest and potentially even a demand for it for those
If you're like Pete, during development, you probably refresh your browser and click on buttons a million times a day to make sure you didn't break anything. Fortunately this can be automated by an end-to-end testing tool like Cypress:
Don’t fall asleep juuuust yet. If you’re like me, during development, you probably refresh your browser and click on buttons a million times a day to make sure you didn’t break anything. This clicking-on-buttons-and-checking-it-still-works is essentially what fancy people call end-to-end testing. I’ve been doing this a lot recently while testing the Theme & Plugin Files Addon and working through a refactor of the WP Migrate DB Pro codebase.
Fortunately, like other types of testing, there is a way to automate end-to-end testing.
In this post we’re going to cover Cypress and how it simplifies end-to-end testing in the browser. You can use Cypress to test any ‘critical path’ on your site. This can be actions like making sure your sales funnel still works after a code push, or that a contact form submits correctly. Anything you would normally test by hand you can automate with Cypress!
Cypress is a new-ish test runner that aims to simplify end-to-end testing.
Before Cypress you’d have to figure out which testing library to use (Mocha, Karma, Jest), install Selenium, choose an assertion library, choose a mocking library, lose
An in-depth guide to WordPress hosting, from the DIY option of hosting WordPress yourself to the big name managed WordPress hosts.
If you want to create a WordPress site, you’re going to need some type of hosting. It’s like your car’s engine – without it, you’re not going anywhere! But when you’re staring at all those different WordPress hosting solutions, it’s tough to know exactly what you need to actually get your WordPress site up and running. In this post, I’m going to demystify the world of WordPress hosting by explaining:
The bare minimum that you need to host a WordPress site (spoiler – pretty much any host can host WordPress)
What types of WordPress hosting are available (including fun acronyms like VPS)
What managed WordPress hosting is (and whether or not you need it)
Then, I’ll recommend some quality options for hosting your WordPress site, depending on your needs, knowledge, and budget.
This post contains some affiliate links. We may receive a commission for purchases made through these links. See the disclosure for more details.
There’s a lot to cover, so let’s dig in!
The Minimum That You Need From A Good WordPress Host
The basic requirements to run a WordPress site are fairly simple. All you need is a host that offers:
In this episode, we’re going to dive into some helpful tools for managing your website once you upgrade to WordPress 5.0 – and the Gutenberg Editor. Let’s do it.
The changes coming to the editor in WordPress 5.0 will create a monumental shift in the way we create content. In this episode, we’re going to dive into some helpful tools for managing your website once you upgrade to WordPress 5.0 – and the Gutenberg Editor. Let’s do it. Show Notes
Hey everybody and welcome to Creator Toolkit, a podcast about building things on the web. I’m Joe Casabona and today we’re going to be talking about a topic that’s been on the mind of 30% of the web- WordPress 5.0 and Gutenberg.
Generally speaking, I try not to make this a WordPress-specific podcast. While I’ll mention WordPress often in the toolkits, I try to keep it general enough that there’s something for everyone. But I think this change is big enough to warrant a WordPress-dedicated episode.
What the big deal about WordPress 5.0?
For those who use WordPress, but aren’t as deeply embedded in the community, you may not have heard what’s going on with WordPress 5.0. In sort, the editor is changing. This big undertaking, called “Gutenberg,” started in 2016 and set out to modernize the now 15+ year old editor.
The idea is to convert
Check out these 3 toolkits to develop custom Gutenberg WordPress blocks. One of these is a well known ACF plugin and other 2 are newly released plugins. These toolkits help to create custom WordPress blocks visually.
Gutenberg is the new Block editor for WordPress. It is scheduled to be released bundled with the WordPress 5.0 in November. You can read more about this on our Blog Gutenberghub.com as we curate and share everything related to this new editor for WordPress. There has been a lot of excitement in the WordPress community about this new Block editing experience where everything will be a block. Gutenberg comes with a bunch of very standard and useful content blocks enough for most content writing needs. However, there will always be a chance you need something custom which is not possible by the bundled blocks with Gutenberg.
If you are not a developer or needs an easy way to develop custom WordPress blocks, read on…
Create Custom Gutenberg Blocks Visually
Are you not a hardcore WordPress developer and still wish to create some custom blocks? Read on, as this article introduces some good toolkits available now to create custom Gutenberg blocks visually
Going over the common reasons for plugin/theme conflicts I've ran into too many times.
Going over the most common reasons for theme/plugin conflicts in WordPress and how to avoid them in your theme or plugin. In this tutorial we’ll cover how to restrict viewing comments and submitting comments based on whether the visitor is a customer.
In this tutorial we’ll cover how to enable comments functionality for EDD downloads and how to add “purchased” and “author” badges to the comments.
In practice, what changes do plugins make? Well, more than you might think, and those changes don't go away by uninstalling the plugin.
Installing a plugin (or theme) means that you are entirely trusting your site into the hands of their developers. There are no restrictions on what the code you’re putting on the site can do. It can move all your buttons to the left by two pixels because of a CSS bug, but it can also purposely wipe out all your files and the entire database. Installing plugins from the official WP repository eliminates chances for the second scenario, but it still leaves you wondering – what changes did a plugin make to my site? In practice, what changes do plugins make?
Before the realistic scenario, let me repeat the theoretical one, one more time. You are installing and activating a 3rd party piece of PHP code on your site. There are absolutely no limits on what the code can do as long as it’s in the realm of PHP and it’s capabilities and privileges on the server. It can certainly delete files, modify them or send them to a remote server. Same goes for the data stored in the database. You can’t stop any of that once the plugin is activated. So, don’t use nulled plugins or themes and if you’re installing sketchy plugins on a live site make a backup first.
A good list of tools developers (and WordPress admins) can use to host a local copy of a WordPress website with links to tutorials on how to set these tools up. The list includes the typical WAMP, XAMP etc, Local, DesktopServer and also Docker!
Looking for a solution to install WordPress locally? While there are some pros and cons to working on a local WordPress install, I love this approach because:
It’s just plain faster because you don’t have to wait on your network connection.
You can work offline, which is great if you like to develop WordPress sites on-the-go (or live in a developing country with poor Internet, like I do).
It’s private by default. While it’s certainly possible to make a live development site private, it adds extra steps to the process.
If you’re looking for a way to install WordPress locally, you probably don’t need any more convincing on the benefits of this approach.
As someone whose job is to test hundreds of different WordPress themes and plugins, I’ve become well-acquainted with all the different methods available to install WordPress locally. And in this post, I’m going to share them with you, as well as link out to detailed instructions to help you get setup with whichever method(s) piques your interest.
5 Different Ways You Can Install WordPress Locally
Below, I’ll go through all the popular methods that you can use to install WordPress locally
In very simple terms, a Learning Management System (LMS) is a website that hosts eLearning programs and provides students and/or employees a way to participate in online training. In this guide to building an LMS with WordPress, learn about common features that you should consider when developing your LMS, as well as plugins to help.
In very simple terms, a Learning Management System (LMS) is a website that hosts eLearning programs and provides students and/or employees a way to participate in online training. Implementing an LMS with WordPress is something we have done for several clients here at WebDevStudios (WDS). For example, we implemented an LMS for Starbucks for their employee intranet. The corporation needed a platform they could use to train Baristas worldwide on the different drink recipes from their menu, as well as the equipment used to create those yummy treats! In this guide to building a Learning Management System with WordPress, I’ll take you though a plethora of common features that you should consider when developing your LMS, as well as plugins to help. Because WDS built a custom solution that uses WordPress, BuddyPress, BadgeOS and LearnDash, Starbucks’ employee intranet allows Baristas to log in, take quizzes based on training videos they’ve watched, and receive participation badges based on their training progress and quiz scores.
Common LMS Features
An LMS has several different features for online training. When the time comes for you to consider building a Learning Management
Intriguing discussion on what Gutenberg will mean for theme development, and have we been here before?
…or “A Realistic Look at Using 3rd Party Gutenberg Blocks in Your Theme”
“Keep Your Plugin Blocks Out of My Theme”
“Shortcodes All Over Again”
“The Never Ending Battle to Style a Button Consistently”
“We Still Have a Long Way to Go”
I would like to preface this article by saying that these thoughts and opinions are in no way meant to diminish the amazing work that the Gutenberg team has done (and continues to do). I love writing in Gutenberg. I follow the GitHub repository closely, often reading 100+ notifications each day. I have been testing since early versions. I have left feedback. Things have gotten much better. However this article is meant to take a realistic and somewhat critical look at how Gutenberg is being presented on a grander scale vs. some of the realities that come in to play when implementing these ideas.
What You See is (Maybe) What You Get
WYSIWYG is everyone’s white whale but Gutenberg takes a huge step in the right direction towards helping publishers have a better idea of what their content will look like as they are writing. The previous (technically
Personally, I'd be happy to see all pop-ups go away, but this is an interesting review of the evolution of pop-ups and some ways to make them work (or replace them) on mobile, while still following Google's guidelines.
Smashing Newsletter With useful tips for web devs. Sent 2× a month.
You can unsubscribe any time — obviously.
Are mobile pop-ups dying, or will they simply undergo another adaptation? If they continue to remain effective, how should designers make use of them, especially in mobile web design? Are there alternatives? Let’s see what the research says.
The pop-up has an interesting (and somewhat risqué) origin. Were you aware of this? The creator of the original pop-up ad, Ethan Zuckerman, explained how it came into being:
Specifically, we came up with it when a major car company freaked out that they’d bought a banner ad on a page that celebrated anal intercourse. I wrote the code to launch the window and run an ad in it. I’m sorry. Our intentions were good.
Basically, the client was dissatisfied with having their ad placed beside an article discussing this less-than-savory subject. Rather than lose the ad revenue or, worse, the client, Zuckerman and his team came up with a solution: The car company’s ad would still run on the website, but this time would pop out into a new window. Thus, the pop-up gave the advertiser an opportunity to share
Can not get a CSS file to reload? Are you continuously getting a cached version? Here’s a simple trick to get around even the most stubborn caches.
There’s nothing more frustrating than a machine that refuses to do what you tell it. “Reload the page” – a simple action, that causes so much frustration for developers because it sometimes just doesn’t work. CSS files often don’t get reloaded. Yes, we all know cache is to blame but how to get around it without drastic measures? Years of frustration have led me to this simple one-click solution that works on any page and with any cache type. What causes the problem?
Cache is a wonderful thing. It lowers resource usage on all levels and enables us to surf faster. Problems occur when we want to get around the cache and grab a fresh copy of the file. There are an unlimited number of reasons why cache won’t purge, but they all fall into two categories;
1. The browser doesn’t want to request the new file
Anything browser related is a local problem. The browser has a copy of the file in its cache and continuously serves it to you. It doesn’t want to request a new file from the server. Problematic files are usually CSS, JS, and images, but it’s not limited to any specific file-type as everything depends on the headers which control
According to the most recent Stack Overflow developers survey, more than 85% of developers are using Git. While Kernl was originally being developed this was something I kept at the top of my mind.
According to the most recent Stack Overflow developers survey, over 85% of developers are using Git. While Kernl was originally being developed this was something I kept at the top of my mind. I also didn’t want them to install an extra plugin to do so because I wanted the experience for my customers to be seamless as possible. This is how Kernl’s automatic WordPress Git deployment was born!
Why Should I Use Automatic WordPress Git Deployments?
There are a few great reasons to use automatic Git deployments with your premium WordPress plugins/themes.
Productivity – You no longer have to waste time creating a zip file from your plugin/theme, uploading the zip to Kernl, creating your change log, etc. Kernl can automatically do all of this for you.
Everyone can deploy – If the developer has access to Git, they can trigger a deploy by bumping the kernl.version file. The best part is they don’t need to know the gritty details of deployment because Kernl handles those for them.
Reliability – No need to worry if you zipped the plugin/theme correctly, removed files that you don’t want to be distributed, or named things correctly. Kernl will handle all
Without hiring a designer, you can make your web app look 10 times more interesting just by using GeoIP and WhichBrowser to add more human-friendly and useful data to them.
People are visual creatures. They like to see pretty things (that go beyond cat videos). I’m not saying this likely or because I enjoy it! It’s a hard, cold fact. Couple it with an ever decreasing attention span and rest assured your application is judged by appearance (in the first 3 seconds) rather than by features or quality. If you’re a developer that can’t afford to pay for a custom GUI design for an app, this is especially devastating. No matter how good, fast or innovative your app is if it looks like it was “designed by a developer” people won’t even give it a chance. Thankfully there are ways around this problem. Using a tried and tested open-source admin template is undoubtedly a good start. Another less-known trick is to turn dull data such as IP addresses and browser user-agent identifier into much more interesting data that can not only provide more information to the user but make it fun and good-looking as well. Best thing is – it’s a free and straightforward feature to add to any app.
The standard, boring & ugly way
Instead of wasting time on theory and made up situations we’ll dive into a scenario familiar