When building a #WordPress theme in 2019, there are certain things to consider. Learn what's required, what's new, and some ways to clean up WordPress for the frontend and for users.
WebDevStudios (WDS) is working to improve our theme framework wd_s based on Automattic’s _s; although at this point, it’s resemblance is only vaguely similar. WDS is dedicated to keeping up to date with the web development industry and making educated decisions about which new things to pursue and which to ignore (for now). In my private time, I’ve been building a starter theme from scratch to better educate myself about what is required by WordPress to build a theme-repo-approved theme but also to make my own informed decisions based on what others are doing, how people typically use the internet, and what of WordPress core feels antiquated.
I started writing this blog post to try and build a custom theme from scratch, but that proved too problematic for a few reasons. The time commitment wasn’t small. Any theme I built would require more than just one blog post and there’s a world of information out there to help you on your way already. Also, before any opinionated decisions had been made, the outcome was essentially any other theme out there already. The biggest reasons I thought I’d circle back and rethink this post was because a lot of those
A quick tip aimed for beginners getting to know WP. There are template functions in WordPress that seemingly do the same thing, so what is the difference? When do you use either one?
If you’re learning how WordPress templates work, there are two kinds of functions you’ll see a lot. What I like to call, the “get” and “the” template functions. If you haven’t noticed by now, there are functions in WordPress that seemingly do the same thing, so what is the difference? When do you use either one? Here are some examples: “Get” function
I learned PHP through WordPress first, before I went on to solidify my PHP knowledge outside of it. If you’re in the same boat that I was, even if you’re not a beginner in other languages like HTML and Css, here is how I learned these functions.
The “get” functions will fetch the data I want, but the data will not display on the front-end by default. If I drop one of these functions, say “get_the_title” inside of a WordPress loop, I will not see the title on the front-end. For those who don’t know what I mean by front-end, I mean you won’t see it on your website. Which is confusing, right? At first, I was like, “Hey, I’m in the loop, and it’s supposed to get the title,
Because the Classic Editor is going to be around for a little while, does it make sense to use it on a new build?
As software evolves, we can find ourselves having to adapt to new ways of doing things. There’s a learning curve involved that, while frustrating at first, becomes second nature once we have put in the requisite practice. WordPress, however, has provided us with a choice. We can adapt to the new Gutenberg block editor, or we can stick with the tried-and-true Classic editor.
Generally speaking, “legacy” solutions such as the Classic editor are often phased out rather quickly. Software developers tend to leave the old feature around just long enough for serious users to adapt and clean up any loose ends on existing projects. After that, it’s gone for good.
In the case of web design and development, that trend often means that we can squeeze some extra life out of a feature for our existing sites, while using the latest solution for new projects. But the Classic editor may be a different ball of wax.
As you might have noticed, the road to get Gutenberg released with WordPress 5.0 was a bumpy one. There were a lot of ups and downs. Worst of all, an air of uncertainty left web professionals without a clear sense of how to approach both new and existing
WDS Senior Frontend Engineer, Jo Murgel, presents a better process for styling websites. Keep things clean, organized, reusable, and readable.
One thing I’ve noticed a lot lately with websites is that no matter how it looks, the style sheet is full of redundant, duplicate, or unnecessary styles. A lot of that, I imagine, comes from updates after a website goes live, where engineers that weren’t initially involved in its development are coming in blind. Another part of that might revolve around planning or distribution of tasks for a website’s construction. Truth be told, there are probably dozens of reasons that the styles may not be as organized or clean as they could be. We can’t see the future and we can’t always be in constant communication with one another, but I’ve learned a thing or two over the last decade that I think might help keep things clean, organized, reusable, and readable.
Before We Start
A few setup notes here: I write my styles with SCSS. This is my preference. There are many other options out there—Less or Sass to name a couple—which will work in more or less the same way. I also typically use webpack or Gulp on older projects to compile and minify, auto-prefix, and concatenate my style sheets.
Organization and Breakdown
The organization is really up to the
Face 2019 with some new knowledge of your website. Read over these design and development myths and learn what you can do right in the new year.
I’ve written about New Year website prep before and how this is a popular time to give your website a good once-over for the new year. You can read Get Your WordPress Site Ready for the New Year: What to do Now! for some helpful ideas on getting things running smoothly. Every client that I work with has ideas about what their new or existing website needs without really thinking about what it means for their website in the long term. New or potential clients have their own misconceptions around their potential websites as well, so I thought it might be helpful to talk about some design and development myths or misconceptions and address them so you can face 2019 with some new knowledge. Myth: Sliders and Hidden Content Are a Must
Let’s make a resolution right now: no more carousels, sliders, modals or accordions.
Some tips and special considerations when dealing with content-heavy WP sites.
Eventually, every website will require a redesign. And each one presents its own set of unique challenges. Among the most challenging are large, content-heavy WordPress websites. Why? For starters, they often come with several different types of content to account for. Plus, their existing setup may not be as ideal today as it was when the site was originally built. And, if content is regularly added or changed, this throws yet another monkey wrench into the works.
All told, there is a lot to consider. That’s why it’s so important to plan ahead. While there will always be pain points, being prepared will make the process that much smoother.
So, before you tackle that next redesign project, let’s review some ways to get into the best position for success.
Review the Content Structure
First up, you’ll want to take a close look at how content is structured. Even if you were the one who originally built the website, it’s still a good idea to refresh your memory.
Things to look for include:
Parent and child pages
Taxonomies such as categories and tags
Custom post types
Once you have a better picture of how the existing content is set up, you
A Step By Step Guide To Converting A WordPress Shortcode To A Gutenberg Block - WordPress Form Builder
Since the new editor, AKA Gutenberg, is now in core, how are you handling shortcodes? Want to update your plugin or theme to use the new WordPress editor? - Easy step by step instructions on how to convert your shortcode into a block.
A Step By Step Guide To Converting A WordPress Shortcode To A Gutenberg Block - WordPress Form Builder
WordPress 5.0 was released at last year’s WordCamp US and introduces the new block-based “Gutenberg” editor. We’ve been super-excited about Gutenberg since then. Yes, @CalderaForms is the first plugin to be #Gutenberg-ready. We’re excited for the future of @WordPress, are you? https://t.co/X0HJqkzbGI
— Caldera WP (@CalderaWP) December 10, 2017
Now that WordPress 5.0 is out, everyone is excited about blocks, but one question I keep hearing is “what about my shortcodes?” That’s a good question. We wrote an article last year about how shortcodes work with Gutenberg.
We’ve been excited about Gutenberg for a long time. We were the first major plugin to add a block. One cool thing about our shortcode was it loaded a preview of our form in the post editor. I wanted to make sure our block did the same. Because we were so early, I had to write my own solution. For Caldera Forms 1.8, we’re using WordPress’ built-in solution for previewing blocks that are server-side rendered — blocks like our Caldera Forms block.
When I went to do this conversion for Caldera Forms, I could not find a great example outside of the official
Learn about the benefits of Headless WordPress with React and NextJS from a Senior Frontend Developer at WordPress development agency WebDevStudios.
This helpful walk-through goes over debugging WordPress core by tracking hooks, actions, and filters and knowing when to use and implement them.
Most WordPress developers are familiar with the concept of actions and filters. At the very heart of WordPress, these hooks allow developers to extend the functionality of WordPress in numerous ways. Whether you want to run a process when a post is saved, add a new section to the Edit User page, or modify the SQL used when querying the database, WordPress has hooks for (almost) everything. One thing I’ve noticed a lot, as a frequent user of the WordPress StackExchange, is that many developers don’t know where to start when trying to figure out which actions or hooks might be available to them. In this blog post, I want to help walk through the process of tracking down various hooks with examples of when you might want to use them and how to implement them.
Actions and Filters: What’s the Difference?
This is a very basic mistake I see often when helping people figure out their WordPress issues. They want to modify the Query with the pre_get_posts filter, but they can’t figure out why their code isn’t modifying anything. Well, let’s take a look at a basic example that sets the post_type parameter to “page”:
add_action( 'pre_get_posts', function(
Discover what's the fastest Translation API between Google, Microsoft, Yandex & DeepL with our performance benchmark. We send tens of thousands of API requests to the top 4 Machine Translation API providers. Discover which one is the fastest.
At Weglot, one of our main features is to supply our customers with a first automatic translation layer when they have new content to translate. It’s a great way for them to not start their translation work from scratch and to save a lot of time. To provide those translations, we rely on several Translation providers and we send tens of thousands of API requests to those Translation providers on a daily basis. So the APIs performance is an everyday priority for us. As the quality of our service relies on those third parties applications for machine translation, it’s quite important for us to know the strengths and weaknesses of each of them.
Today, you can already find various articles and benchmarks online about the translation quality of those providers but not so much about performance, so let’s crunch numbers!
In order to ensure accurate results and fairness between the different third parties, we wrote a script that measures average response time under the same environment for each translation provider services, meaning that we would use the same language pair (obviously) and the same dictionary. The average response time is computed out of 100 requests.
There are plenty of ways you can rely on reusable code snippets to save time and provide you with the best possible work and turnaround.
When was the last time you started a project from scratch? I mean literally from scratch—not using a framework, a parent/child theme, or any plugins. Maybe never? One could argue that as long as you’re using WordPress that you’re not necessarily creating anything from scratch since the CMS offers so much functionality out of the box already. What you do, though, is iterate on that functionality and build upon the tools provided to you or the tools you have built for yourself in the past. After all, if you’re doing work around the house and need to hammer some nails into the wall, you’re not going to head into your garage to carve the wood and forge the steel to make a new hammer every single time (unless you’re our very own builder and wood magician Will Schmierer). You’ll use the same hammer to do the same job until the hammer is no longer useful or you find a new tool with which to replace it.
Why then would you not develop a site in the same way? Granted, most projects are going to require distinct sets of functionality unique to the projects themselves but there are plenty of ways you can reuse code to save time so you can truly focus on
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
According to the webpack website:
Now you might be asking yourself, what is a dependency graph? In webpack, there are files specified as entry points. These entry points are at the top of the dependency graph. Any files required or imported from the entry files will be processed and bundled by webpack.
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
Starting a new series of "quick tips" on RachieVee. My first quick tip is about how WP body classes can help orient ourselves within the WordPress template hierarchy.
Let’s talk about WordPress body classes! But first, an explanation of what this is. This is the first short post, from what I hope will end up being several short posts, called “Quick Tips”. It can take me weeks to write a “normal” sized post on RachieVee, and so, in an effort to keep myself active in 2019, and still pass on tidbits of knowledge, I’ve started this new category. I have also categorized these “Quick Tip” posts based on developer experience. This first post is geared towards “Beginners”. This level is meant for developers just getting to know how WordPress themes work. What are WordPress body classes?
Back on topic! WordPress body classes are exactly what they sound like. They are HTML classes applied to the body tag of a WordPress site. WordPress themes use the body_class() function to apply these classes auto-magically.
If you’ve ever had an error show up on the front-end of your site, or if you’re looking to change something in a WordPress theme – taking a glance at these classes are a quick way to orient yourself. While these classes won’t tell you exactly what template to look for
Mario Peshev of DevriX explains in detail why "affordable WordPress development" ends up costing a lot later on down the road.
When I switched to WordPress over a decade ago, I was aiming at maximizing RAD (Rapid Application Development). But not for the reason everyone assumes first.
Coding Can Last Forever
My background in engineering is enterprise-grade development. I spent a few years with Java (JavaServer Faces, Google Web Toolkit) and some dabbling into .NET.
Gathering a team of 20+ working on a project for 5 years is significantly different than bootstrapping a powerful application in two or three months.
Throughout my transition period, I switched between web and mobile Java development, Python (Django) for a UNICEF project, programming for set-top boxes before smart TVs were a thing, and PHP development with CodeIgniter, CakePHP, and custom frameworks.
I even tried to sell my own custom Java CMS, but this was pointless. I couldn't match the "time to market" with PHP's abilities, nor the server costs back in the day.
WordPress Can Be A RAD Framework
This is one of the reasons why WordPress currently powers nearly 33% of the Web.
A PHP-driven CMS promising backward compatibility, offering unlimited design opportunities, a streamlined editorial experience, and a powerful modular infrastructure
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
Recently I wrote about preparing your own plugins for Gutenberg, but what about themes? With WordPress 5.0 now released it’s high time you took a look at how you can integrate your own themes with the new block editor:
Before WordPress 5.0 arrived I came across a few premium WordPress themes already advertising that they were ‘Gutenberg-ready’ or ‘Gutenberg-compatible’. Huh. But how could a theme not be compatible with the new block editor (formerly known as Gutenberg)? Surely themes just render whatever is in the post content with the theme’s own styling? Turns out there’s a bit more to it than that. In this post I’ll walk through what is necessary to make existing themes or create new themes that fully support the block editor.
Gutenberg is the new snake oil. There should be no reason why any existing WordPress theme won't work with Gutenberg.
Gutenberg compatibility should not be a selling point for a premium theme
— Iain Poulson (@polevaultweb) December 2, 2018
After venting on Twitter about theme shops using Gutenberg compatibility as a marketing tactic (pro tip: don’t tweet hangry), I was kindly educated by Rich Tabor about the extra layers of support themes can add to make the experience of the block editor even better.
Admittedly I’ve been in the plugin development world for so long (I even wrote about making plugins ready for Gutenberg),
Interesting Load testing service by Kernl. It comes with their existing package.
. After a lot of changes based on the feedback we received we’re finally bringing WordPress Load Testing out of beta and into general availability. Why Load Test?
There are a lot of different reasons to load test.
Infrastructure and Hosting – Kernl WordPress load testing gives you confidence that you are making the right decisions with your infrastructure and hosting. Looking to change hosts but aren’t sure how big or expensive of a plan you need? Run a load test.
Performance Testing – Load testing gives you confidence that the SQL query you just wrote isn’t going to collapse your website under load.
Confidence with your clients – Load testing lets you tell your clients with confidence that their new website can handle 100,000 visitors a day without any degradation in response time.
How Does It Work?
Kernl’s WordPress Load Testing solution makes load testing your WordPress site a breeze. You only need verify your ownership of the site with an easy to use WordPress plugin and then start testing. No coding or infrastructure management needed.
How Much Does it Cost?
Kernl’s WordPress Load Testing is included with your Kernl subscription.
Vue.js WordPress Starter A WordPress Vue.js starter plugin with required toolbelts
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
Looking at the theme/plugin stacks that have evolved in WordPress over the last few years. What considerations should you have when choosing a WordPress theme when it comes to SEO? What are people that care about SEO using? Which themes should you avoid if you care about SEO?
We look at considerations you should have when selecting a WordPress theme for SEO. What factors matter when evaluating a theme? Does the built-in skim a mark up that some seems output make a huge difference? All these answers and more in this episode. https://www.lockedownseo.com/
#LockedownSEO #seo #wordpressSEO
▶Follow me on my other social media platforms:
I've sold my laptop and replaced it with an iPad Pro. I go over the things it does really well, as well as some of the stuff I wish it did better (like development).
Since going out on my own full time, my tech stack has been a bit of a revolving door. In the quest to find the perfect set up I went from a MacBook Pro to a PC / smaller MacBook for travel. Less than a year later and I’m not too happy with that setup. Nothing against the PC, but living in two-thirds Apple land makes having parity between machines very hard (plus, Camtasia, my main video editor, is a hot mess). So when Apple announced the new iPad Pros, I made a decision to go with that and only that as my travel machine. So first, as much as I like the idea of an iPad-only lifestyle, I simple can’t (not yet anyway). The video and audio editing tools are not nearly as good on iOS as they are on macOS, and doing local development is much much easier.
Primary Machine: The iMac Pro
So what does 2019 have in store for my tech setup? Well, last year I cheaped out because I though a PC would be just as good as an iMac Pro. So I’m selling both my MacBook (sold) and my PC (still working on that one, if interested), and I’m buying an iMac Pro as my primary machine. This will bring me wholly back into Apple’s ecosystem and allow me to use all the tools I currently
Hooks - the most powerful feature of WordPress. Also known as actions and filters, we will look at what they are, how to use them and why they can really change the way you develop with WordPress.
Introduction I have been using WordPress for many years – all the way back to version 2.0 in 2005. A key breakthrough for me, in terms of being a WordPress developer, was when I finally fully understood how to edit the behaviour of WordPress and plugins and themes using hooks.
I hope by reading this post that you will come away with a better understanding of what actions are, how they are used and how you can use them to extend WordPress and of course your own plugins and themes.
Video: Using a filter in WordPress
Before I get into the details of this post, I thought it would be a good idea to show you a hook in use. This video is a demonstration of using a hook in WordPress to modify the output of the tag cloud widget.
Hooks are a way for one piece of code to interact/modify another piece of code.
What are WordPress hooks and how do they work?
Hooks are what WordPress uses to allow one piece of code to interact with and/or modify another piece of code. For example, a plugin could modify another piece of code which WordPress runs. WordPress also makes extensive use of hooks to modify its own code.
Hooks are named events (such as save_post) to which developers can attach functions.