WordPress website design and development agency, WebDevStudios, is ready for Gutenberg and WordPress 5.0. Are you? Here are some tips for getting prepared.
Change is inevitable, especially when it comes to technology. What’s also inevitable are the complaints, groans, and fears that seem to always accompany any change. Since Gutenberg was first announced, WebDevStudios (WDS) has been preparing for this change, one that we see as an enhancement to the current WordPress editor. At WDS, we are ready for Gutenberg and WordPress 5.0, which means our clients will also be ready. Here are some ways that you, too, can also be prepared for this big change happening very soon. Communicate to Your Clients and/or Team
Our client base relies on us to keep them informed and updated. It would be irresponsible of us to not warn our clients of Gutenberg, only to allow them to log into their WordPress sites and suddenly see an unexpected change. So whether you’re a developer or designer with WordPress customers or you run a team of content creators, communicate to everyone involved. Gutenberg is coming! Stay informed.
Immerse Yourself in the Technology
We’re sure you’ve heard this before, but one of the best ways to learn a foreign language is to immerse yourself in it. That was our strategy with Gutenberg—hence, WDS Blocks.
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
See what this WordPress expert on website speed has to say about making your website load faster on mobile.
Less is more
There are many things you can do in order to speed up your mobile WordPress website. Other than making your images smaller and easier to load, we want to stick with the concept of loading less is more. That means you want to load the bare minimum of items in order to properly share your content on a mobile device. In WordPress, we have many tools that can help offset the number of resources loaded on a page: enqueue_script and enqueue_style are two functions inside of WordPress to help you load a file/asset conditionally. Plugins
It’s a buzzword creating a lot of conversation within the WordPress community and causing digital marketers across the globe to plan and strategize for the after-effects—Gutenberg. A major new feature that has been in development for over a year, Gutenberg is coming with the release of WordPress 5.0 and is the largest side-initiative ever merged into the core of the open-source project. Here’s some background on Gutenberg and how WebDevStudios (WDS) is planning for it.
It’s a buzzword creating a lot of conversation within the WordPress community and causing digital marketers across the globe to plan and strategize for the after-effects—Gutenberg. A major new feature that has been in development for over a year, Gutenberg is coming with the release of WordPress 5.0 and is the largest side-initiative ever merged into the core of the open-source project. Here’s some background on Gutenberg and how WebDevStudios (WDS) is planning for it. What Is Gutenberg?
Named after a revolutionary publishing invention that changed the printing industry, Gutenberg is a big upgrade that will be a part of the WordPress 5.0 release this spring. It is a significant enhancement to the editor; and in the context of WordPress, the software that currently powers 30% of all the websites you view on the internet today, Gutenberg is a brand new editor that allows you to create and publish blocks of content. Users will now have more control over the layout of their content, rather than just writing and a publishing a single article.
An update like this is huge. The WebDevStudios team has been in the preparation and planning stages for Gutenberg and the effects
Want a little demo of our plugin generator? Camden breaks it down!
We make a lot of plugins at WebDevStudios. Whether adding functionality to client projects, creating open source plugins to give back, or developing premium products, we are always spinning up new plugins. To speed up this process, we created generator-plugin-wp, a Yeoman generator which streamlines all parts of the plugin development process. I’ve talked about it previously in my posts Get a Plugin Kickstart with Yeoman & generator-plugin-wp and Recent Changes to generator-plugin-wp. In this post, I’m going to walk through the actual process of creating a plugin with this tool.
Before you get started, you will want to install Node, and then use NPM to install the generator and a few other CLI tools that are necessary for its full use.
npm install -g yo grunt-cli generator-plugin-wp
Now, from the plugin directory in your terminal, run:
From here you can enter the title of your new plugin. I’m going to make a plugin for tracking and publicly listing my many missions in Kerbal Space Program:
This provides the basic setup for my plugin, and now my plugin directory now looks like this:
This is where things start to get cool. Without any changes, we have a unit tested plugin,
>>Just below the Edit as HTML menu item is another important item: Convert to blocks. When clicked, this button will convert all of the content into individual blocks.
By now, you’ve likely heard about something different coming to your WordPress website called Gutenberg—a new way in which you will edit your website using a concept of data blocks. I think it’s safe to say that the Gutenberg WordPress editor is the single largest change to the open-source platform since… heck, I can’t think of anything as a close second. This. Is. Big. So, let’s take a look at it and how this change will affect your existing content. But First… an Overview
The Gutenberg editor will completely replace the current post editor you have been using with your standard WordPress installation. In other words, creating content in WordPress is going to be a whole new experience with Gutenberg. For example, if you’re creating a blog post, you may start with a block of text. Then you add a block that contains an image, and then you add another block of text. Each block can then be edited individually, including the order in which the blocks are displayed.
There are two things I want to make clear before we go any further:
Until recently, I would have said the Gutenberg WordPress editor is a way of editing the content
WebDevStudios just published a list of their development resources- bookmark to get them in one go.
Some people make health a focus of their New Years Resolutions–not that being healthy shouldn’t be on a persons mind, but I like to use the New Year as a way to clean out the cobwebs of development. To think over the past year and decide what processes worked and didn’t and then wipe away those that failed. I usually start by cleaning out my git repos and local development. I like to think about any frameworks/libraries that I didn’t fully use over the past year and evaluate their worth. Some may have been used others are kicked to the curb. Now that I have a cleaned up development environment I like to see what new open source frameworks/libraries I could benefit from. 2015 was defiantly the year companies open sourced their code.
Its beneficial to create reusable code in projects so future projects can be more efficient. Over time we have created some open source development resources that you can add to your development tool belt. The list below contains plugins, frameworks and libraries that you can get from the WDS Github or WordPress plugin repo.
WDS Image Class library can be used in your theme template files to get an image whether it be a featured image, the first image in
Matt shares how using ElasticSearch in WP can keep search heavy sites from being sluggish.
High traffic sites that heavily depend on search can run into server resource issues and cause a sluggish experience for users. A good solution for this is to allow a third-party service to handle search for your site. We recently had a client that needed just that and ElasticSearch was a good fit. 10up’s ElasticPress plugin was used for integration with WordPress. ElasticSearch provides a wide variety of filters and tokenizers that will fit nearly every project. The ones mentioned below highlight some that were helpful in resolving search issues during the project.
Searching with special characters
ElasticSearch uses tokenizers in custom analyzers for search. The problem is that the standard tokenizer doesn’t generate tokens for punctuation like ampersands. The whitespace tokenizer needs to be used to split tokens by whitespace and preserve punctuation. This can be done by updating ElasticSearch mapping by using ElasticPress filters and WP CLI command. The default mapping can be found includes/mappings.php and using the ElasticPress ep_config_mapping_file filter to return an updated mapping file location. This will fix some special characters, but others such as hyphens and periods
Ben guides you through the process of submitting a plugin to the WordPress repository.
The WordPress.org Plugin Repository is the canonical location to find plugins for WordPress. There are many good reasons to add your plugin to this repository–the primary being that the built-in “Add New Plugin” search capabilities are linked directly to the WordPress.org repository. If your plugin is not in the WordPress.org repository, it will not be easily found by the majority of users, and with WordPress powering over 23% of the internet, you will be missing out on a large audience of potential users. Below, I provide an overview of the WordPress.org Plugin Repository, how you can start leveraging it with your own plugins, and, as a result, dramatically increase the potential reach of your audience.
What to know before you submit
WordPress.org has some guidelines on what can and cannot be in a plugin to get it approved. As long as those guidelines are followed plugins are typically approved withing a few days.
All plugins must have a license compatible with the GNU General Public License v2 (GPLv2) or a later version. If a plugin does not include a specific license, it will automatically fall under the parent project GPL license. If third-party libraries are included in the plugin
Corey Collins from WebDevStudios talks about how to resolve that pesky responsive images problem.
The quest for a beautiful, responsive website is ever-present. As front-end developers, we know the tricks of the trade when it comes to making all of those fancy little features work from desktop to mobile. Whether it’s degrading hover-based actions gracefully or just making sure everything falls where it should, part of our job is to always make sure the mobile user experience accurately reflects the desktop user experience. It isn’t all just stylesheets and sunshine these days, though. We need to focus on way more than just making sure a site looks good on mobile. We also need to make sure a site works as efficiently as possible. There are several ways we can achieve a more efficient mobile experience from only loading the scripts we need at specific breakpoints; only loading the site elements we need at specific breakpoints; and finally, the focus of this post, using and displaying proper image sizes at the various breakpoints we set for our site.
What exactly does that mean? Well, let’s say you’ve got a hero image at the top of every single post page. You want the image to span the entire width of the browser so you add an image size of 1680px by 400px. This works great for a big
Front-end devs, this is for you! Eric talks about how he uses PHPStorm (and why), and what kind of benefits it has if you're a front-end developer.
As a developer, front-end or back-end, there is no lack of strong opinions on why or why not developers choose their text editor or IDE. It tends to be a very personal choice. A few popular editors in use these days are Sublime Text and Atom. On the IDE side of things, there is Coda and PHPStorm by JetBrains. It seems that most front-end developers steer clear from IDEs and lean more towards the more ‘lightweight’ code editors that have plugins for just about anything imaginable.
As for me, I seem to be a bit of an anomaly, because I am a front-ender who has only ever used PHPStorm! As a disclaimer: Late last year I tried to make the switch to Atom, but that experiment only lasted a few days.
I’ve never used Sublime Text. SHOCKING, I know!
Making a Case for PHPStorm
In this post, I want to share some of the key features I like about using PHPStorm from a front-end WordPress developer’s perspective. Perhaps you are one of those who is on the fence about giving it a try and just need a little convincing. Hopefully, I’ll be able to do just that!
Also, if you are a back-end developer, there’s a good chance you still might learn something new as well!
Ryan Fugate wants to talk about WP-API and endpoint namespaces.
WordPress is getting a JSON Rest API added to core. The first part of the API is actually already included. The endpoint infrastructure is in 4.4. As developers build extensions to the API, we need to take responsibility for our actions and how they can affect a site. WordPress is unique in that it is the ultimate generic API tool and anything can be created utilizing this new tool. “The infrastructure of the API itself, supports basically anything you can throw at it. If you take away the core endpoints, it is essentially a framework for building APIs, and you can build those however you like.” – Ryan McCue
To avoid collisions, namespaces are something to be thoughtful about. Namespaces are the slugs in the URL before the endpoint. Also, the schema and structure of your data should be a consideration. The core endpoint namespace is:
This means it is reserved for core endpoints. Similarly, you may come across plugins that have a namespace. You should probably not add endpoints to a previously used namespace unless the data is specific to that plugin. Think of namespaces like you would with class or function names; they need to be unique. If you are creating endpoints, then
Jay Wood of WebDevStudios wrote a tutorial on how to handle AJAX in WordPress with ease.
To begin, we need a plugin. Something simple would work; we should name it in respect to its purpose, so something like WDS_Shortcode_AJAX_Handler. We’re going to need two methods in the class–one to hook into WordPress and one to handle the AJAX.
Have you used Brackets? It's a lightweight open-source code editor, and Carrie shares how to use it in WordPress (in 2016!).
I have been an avid Brackets user since 2013. It’s a free, lightweight, open-source code editor that is perfect for beginners and experienced developers alike. One of my favorite features of Brackets is the number of extensions available to allow users to tailor their development experience. Today, I’ll share which extensions I use to make my job as a front-end WordPress developer easier. User Experience
As the name suggests, this handy extension provides you with a preview of the colors you’re using in your files in the gutter of the file. I’ve found it can sometimes be a bit buggy if you’re using a Sass variable in partial, but the initial variable declarations work perfectly.
Brackets Icons gives a quick visual cue of the file types in your project. Choose between Devicons or Ionicons.
Brackets Icons with Devicons on the left, and Ionicons on the right.
By default, Brackets doesn’t give you any indication of indents or whitespace. Some may see this as a shortfall, but I love it because it means I get to choose how my tabs and spaces look. Show Whitespace VS displays whitespace the same way Visual Studio does (which I’ve never used!), and
A few weeks ago, Eric talked about using PHPStorm for front-end development. Now he's here to share how to set up the debugger!
In a previous post, I wrote about how awesome PHPStorm is in the context of being a front-end developer. In this post, we are going to look at getting the PHPStorm debugger setup to work with Xdebug and then test it to make sure it’s working! In my opinion, one of the most overlooked and underused features of PHPStorm is its debugger. I’ve only just recently started to learn about it and use it. One of the biggest reasons it is underused, even by developers who are already using PHPStorm, is because setting it up can be a confusing process if you’ve never done it before. Despite how it may appear, it’s very simple to setup, and once you do it a time or two, it’s something you can do in just a few short minutes.
The PHPStorm debugger will make you never want to use a var_dump() ever again!
I currently use Vagrant for my development environment which comes prepackaged with Xdebug. If you’re using something else like MAMP or XAMP, you’ll need to make sure you have Xdebug installed and activated.
Configure PHPStorm and Xdebug
In order for the PHPStorm debugger to work, it needs to be configured to work with Xdebug. Don’t be alarmed by the
Happy for Dre and this is certainly a great boost for Brad and his team.
A little over one year ago, taco fanatic and stellar beard owner Dre Armeda joined the WebDevStudios team as our VP of Operations. In that time, Dre has done what he does best: kick ass, take names, and make things happen. As a result, we are excited to announce that he will be stepping into a bigger role in the years to come as an executive partner on the WebDevStudios team, as well as moving into a new role as Chief Marketing Officer. Why are we telling you?
This is huge news! Since the last year since Dre came on, we’ve moved from twenty something employees to thirty five. With the swift and steady growth we’ve had, it is more important than ever for us to use our operational resources intelligently; formalizing our marketing and sales resources with concentrated leadership is one way for us to do that. Plus, Dre has been killin’ it and it deserves a public shout out.
What does this mean for the future?
One of our core company values has always been to serve as an educational and community resource. This change can help us do that in that in bigger and better ways as we get bigger and better too. You’ll be seeing us at more events (and in bigger numbers! #WDSPARTY!), continued incredible
WebDevStudios now has a plugin store, first plugin is "Custom Post Type UI Extended".
Pluginize, Pluginize.com, WebDevStudios, WebDevStudios resources, WebDevStudios plugins, WebDevStudios products, WDS, Maintainn, AppPresser, WordPress developers, WordPress support, WordPress experts We said last year that our focus would be on driving new products, with a focus on , , and some more things that were in the pipeline. Not long after, we brought John Hawkins aboard. Now, we are excited to finally share with you the latest development: We are officially launching !
Pluginize was created to share, sell, and educate on the latest products we’re releasing. After realizing how many plugins and extensions we were building for our incredible clients, we realized that, well…we should probably start sharing!
All of the products will be built, maintained, and supported by us, and will be delivering the same high quality you’ve come to expect of us, both in the projects we create and our contributions to the WordPress community, over the years.
Along with this announcement, we’d like to take a moment to tell you a little bit more about our first release, CPTUI Extended. If you’ve been keeping track of our moves over the last year, you already know that Custom Post Type UI is our
It is not important what the system is as long as you have a system. Meet WebDevStudio's git workflow.
We’ve mentioned it before, but at WebDevStudios, we use git flow–a specific git workflow first proposed five years ago, though the original author, Vincent Driessen, says he had been using it for a year before posting about it. Git Flow works best when you are developing a product that has definitive releases, but this gets really gray when you have a handoff process where you build a complete site and then give it to a client. We’re working on developing a Git Flow process that adapts Git Flow for use in client work. First, let’s review how Git Flow works.
Main Git Flow Branches
It all starts with two main branches: master (which is the stable version of the software) and develop (which is where all the development happens). The main idea here is that develop is constantly changing as new things are added, and when features are completed, they are merged into master.
In this scenario, develop is always going to reflect what’s going into the next production release.
There are also three different sets of supporting branches.
feature branches are for new features being developed for future versions of the software. When creating feature branches, a hierarchy is added
Ryan walks you through turning your WordPress site into a desktop app--doesn't have to be hard, we swear!
Everyone is eager to turn their WordPress site into a mobile app, and we offer two services, Reactor and AppPresser, to help you to do that. However, as an alternative (or in tandem!), a desktop app may provide a good user experience, so I’m here to walk you through turning your WordPress site into a desktop app. We will be using Electron, an open source framework for turning web technologies into desktop apps for Mac, Windows and Linux. You may have heard of many desktop apps powered by Electron, including Atom Editor, Slack, Microsoft’s Visual Studio and the recently debuted WordPress.com app.
Electron is built and ran with node so you want to make sure you have node installed. Electron is installed as a node module. Once you have node installed, fire up the command line!
First, we need to install Electron and the packager modules globally.
$ npm install electron-prebuilt -g
$ npm install electron-packager -g
Create App Folder
Then we need to create a folder for the app…
$ mkdir app
$ cd app
Next, we will run npm init to create the package.json file. We put configuration data for Electron in this file.
$ npm init
There will be
Keep your code readable, documented, and easy-to-understand by keeping it clean! Chris covers the fundamentals of writing clean code and how it will help you be a better developer (and to keep your code WP community friendly for the next dev that comes along).
Writing “clean” code is something we talk about a lot in software development. Developing for the web is no different in the pursuit of code that is “clean” than any other type of programming. It’s also something that you could write a book about (and people have). Without getting into a ridiculous amount of detail, there are some pretty simple best practices to live by that will make your code cleaner right now. What is “clean” code?
Code that is “clean” is readable, documented, and easy-to-understand. If you are staring at a block of code and you have no freaking clue what it’s doing or how it works, it’s probably not you–it’s the code. “Messy” code can come in many forms, but the result is usually the same: code that is incomprehensible to other developers (possibly even the one who wrote it).
You may be familiar with the phrase “spaghetti code.” Spaghetti code is the kind of code that you come across where, as soon as you start picking at one piece of code, everything else starts falling apart. It’s like opening your kitchen cupboard and having all the contents fall on top of you.
Spaghetti code is frequently far too complex for its own good and may have been patched together with
Interesting, though it feels incomplete. Yes, it answers the why in the title, but it leaves out the how, where, etc.
What Is Elasticsearch? Elasticsearch is an incredibly fast, open-source, distributed, and highly-scalable solution for managing your searchable content. Elasticsearch can scale up with your site, because of its distributed architecture. This means that as your site grows, Elasticsearch grows with it; and it still provides performance benefits. One of the main advantages of Elasticsearch is to offload search to a separate service, which saves valuable server resources for your site.
Why Use Elasticsearch?
WordPress’ built-in search is not optimized on sites that operate with heavy search use or complex searches. That’s because WordPress’ search works by matching full sentences in post titles, any/all search terms in post titles, and full sentence matches in post content. It relies on MySQL and does not support complex relevancy calculations or advanced filtering. More complex queries also have the risk of utilizing significant server resources.
VVV2 Vagrant box with test site
Elasticsearch Vagrant box – base setup with only one cluster
WordPress version 4.7.3 with ~24471 posts
ElasticPress version 2.4.1 to integrate WP queries with ElasticSearch
Allison shares a few basic, but largely underutilized out-of-the-box WordPress features.
There’s a lot of customization available under the hood of WordPress. There are also great out-of-the-box features to that often get looked over in the glitz and glamour of creating new template tags. Whether you’re a WordPress beginner or not, you may find some of these tips and tricks to be helpful surprises! Let’s take a look… 1. Distraction-Free / Full Screen Writing Mode
WordPress has so many great tools to take advantage of. It can be nice to shed some of those extra layers when you need to get down to the nitty gritty of writing content. While you might not be able to turn off your neighbor’s blaring stereo, this great little toggle allows you to experience a bit more minimalism.
Do you find it easier to write with less on the screen? I’m not familiar with getting distrac—wait, what’s that? It’s sort of glittery and shiny. Off in the distance. Hm. What are you working on over there, anyhow?
2. Image Editing
The Media Gallery is where you can manage your meta data like title or alt text, but there are also added controls for doing basic media edits like scaling, cropping, and rotating images. This is perfect for those instances where you don’t need to do a full once over but just
Brad Parbs from WebDevStudios presents an introduction to command line apps and tools to improve workflow in web development.
As someone who loves the command line, I’m always striving to make my workflow easier, more efficient, and just overall better. Hopefully, by walking through my set up and my recommendations for the best command line tools, you’ll find some nifty tips and tricks you can adapt to make your workflow better too. The command line is a scary place if you’ve never been there before. It is. You can do some really powerful and dangerous things to your computer. Today, we’ll walk through some of the things I’ve done to make my command line interactions more pleasant and powerful.
This won’t be an in depth look at everything you can do, but rather a glimpse into what I do. Don’t worry, those of you who are still learning; we’ll start with the easy stuff and work our way up to the more advanced business!
Disclaimer: I work on a Mac, and most of this guide will be centered around that. However, most of these tools will work on Windows and most flavors of Linux.
Before we get too far into the nitty-gritty of the really technical things, we’ll try to solve one of the things that snags a lot of beginners: installation. Thankfully, there are some tools to make it so we don’t need
Ever wondered about wp_cron? Today, Chris talks about using wp_cron for your benefit (and points out some of the pitfalls).
One extremely confusing set of functions within WordPress is the concept of “wp_cron“. For those of you unfamiliar with it, is a scheduling tool on Unix systems and, in itself, is not without its own confusing elements. Let’s take a more user-friendly example for scheduling an event first. Let’s say I wanted to create a recurring event in a calendar app. Probably I’d start by picking a day on a calendar and then put all my information in there, including the recurrence of the event. On Windows, the task scheduler is a pretty similar workflow. You get a graphical interface, tell it what you want to run and how frequently and, barring some horrible problem, the machine will fire that action or run that program at the desired frequency. This is especially handy for scheduling things like backups.
On Linux-based systems (which is what most webservers run), you have the same level of control (more even), but lack the intuitive user interface. Instead you get this:
* * * * * command to be executed
- - - - -
| | | | |
| | | | +----- day of week (0 - 6) (Sunday=0)
| | | +------- month (1 - 12)
| | +--------- day of