I have to say that if this is the easy way to make a Gutenberg block, I'm not sure I want to see the hard way, but it's a detailed tutorial and an addition to the all-Gutenberg-all-the-time news cycle.
Prerequisites: Gutenberg Blocks may seem overwhelming, but I’m hoping to clear away just enough details so that we can see what’s going on at the heart of this new editor. I’m assuming that:
You’re familiar with some build processes with babel
You’ve done enough React to be familiar with JSX
Here are the steps we’ll take to get a block loaded in the Gutenberg editor. We plan on making a single block with pre-rendered text. (No interactivity, CSS, fancy stuff yet)
Set up WordPress and a folder structure
Create a build process with webpack
To see the finished product, you can see the repo here
WordPress Gutenberg and folder structure:
Make sure that you have installed and activated the Gutenberg plugin.
I use local by flywheel to quickly spin up instances of WordPress. Whichever way you choose to set up your WordPress, you’ll need a folder inside of your plugins folder with your plugin title.
Inside this firstgutyblocks folder we will have a php file that I’ve named “firstgutyblocks.php”.
A look at the pros and cons of various types of staging environments, along with some resources to build them.
It’s no secret that WordPress websites are becoming more complex by the day. With each plugin we install, another layer of intricacy is added. This, of course, boosts our chances of running into problems when performing routine software updates. This is part of the open source bargain we accept with WordPress. You get a magnificent collection of plugins that do all sorts of things. But they all come from different developers. With that, the chance that two disparate parts won’t play nicely together is always in the back of your mind.
That’s what makes a staging site such a great resource. It’s an exact copy of your WordPress website that runs independently from your “live” version. This allows you to test updates and other changes to your site without disrupting availability.
Different Ways to Build a Staging Site
Staging sites can be built and utilized using a number of methods. But not everyone has access to the same tools. So which flavor you choose may be more a matter of what resources are readily available, rather than simply going with the easiest solution.
There is no shortage of ways to get the job done, but here is a sampling of some of
Sort of an odd collection of chosen words that they are defining, but useful to beginners in any case.
downloadable PDF as a resource for you. .htaccess
.htaccess is a configuration file for use on web servers running the Apache Web Server software. When a .htaccess file is placed in a directory that is in turn ‘loaded via the Apache Web Server’, then the .htaccess file is detected and executed by the Apache Web Server software.
Accessibility (https://a11yproject.com/). A11y is an acronym for accessibility. The 11 represents the 11 letters that were removed between the a and y to make accessibility shorter to write particularly on social media.
Apache is the most widely used web server software. Developed and maintained by Apache Software Foundation. Apache is an Open Source software available for free.
An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.
Free and Open Source text editor designed for code development- https://atom.io/.
An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name.
The simplest method to grey out unavailable variations, using a standard WooCommerce filter
This is a quick solution to how to disable out of stock variations in variation select fields. By default, WooCommerce doesn’t grey out any variations that are out of stock – it allows the user to select the variation first, then lets them know it’s out of stock. However, you may prefer to see something like the image below, with out of stock options disabled and displaying ‘sold out’ text.
That’s all you need to do. The function uses a standard WooCommerce filter – woocommerce_variation_is_active, checks whether the variation is in stock, and returns false if it’s not. WooCommerce does the rest.
Oh, and don’t forget to ensure that you are managing your variations’ stock.
Rating systems are an easy way to get feedback from your visitors. Today we'll create a simple plugin to add a star rating system on WordPress comments.
Star ratings are a quick and simple way to get feedback from your users, that’s why it has become so popular all around the web. Today we’ll extend WordPress comments by adding our own star rating system. The main plugin file
Let’s create the main file that will contain most of our plugin’s code. Using an FTP client navigate to /wp-content/plugins/ in your WordPress installation and create a folder called ci-comment-rating (or anything else you prefer). Next enter the folder and create a file called ci-comment-rating.php (again, naming is up to you).
Edit the file and paste in a header similar to the one below:
Plugin Name: CI Comment Rating
Description: Adds a star rating system to WordPress comments
Author: The CSSIgniter Team
Author URI: https://cssigniter.com/
Creating the rating interface.
First we will need to create the interface which the visitor uses to rate our post. To do that paste the code below in the plugin’s file.
//Create the rating interface.
add_action( 'comment_form_logged_in_after', 'ci_comment_rating_rating_field' );
add_action( 'comment_form_after_fields', 'ci_comment_rating_rating_field' );
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
How to install WordPress locally in Mac and Windows using MAMP
A local server, in its simplest definition, is a web server that exists on a local system, such as your desktop computer, and is not accessible by the world wide web. It’s a common practice in web development as a whole, but it plays an especially vital role in WordPress development due to its ability to allow you to test a variety of different components on a WordPress site without having to pay for a live server or affect the live version of a site. WordPress contains a variety of different components that allow it to behave and perform the way it does. A typical WordPress setup includes an operating system for the server application to run on (Windows, OS X or Linux), a web server application (Apache), a database management system (MySQL or MariaDB) and a programming language (PHP). This is why you’ll see many applications se these components as acronyms for their names:
My Apache MySQL PHP
Linux Apache MySQL PHP (or Python or Perl)
X (Cross Platform) Apache MariaDB PHP Perl
We’re going to learn how to create a local test server for WordPress using MAMP in this post, but first, let’s start with why developers use test servers and why you specifically
A short tutorial about profiling WordPress themes and plugins for better performance.
Click here to find out why your WordPress site deserves better hosting. Performance is key for high-traffic WordPress sites, and there are two main ingredients for great WordPress performance – caching and profiling. In this short tutorial we’ll focus on profiling, how it complements caching, and why all of it really matters.
Just Cache It
When your WordPress site starts to feel slow, and you google the topic, the most popular advice you’ll see is to get some form of page caching. Indeed, page caching tremendously helps serve pages faster, and in many cases it’s as simple as activating a plugin or adding a few of lines to your web server config. That’s great advice, you should definitely do that.
But caching is only one piece of the puzzle. It doesn’t answer the question of why your site is slow, and arguably, neither does it make your site faster — it simply hides the fact that some portion of your application code is slow, and makes it seem faster by not executing that portion. Which is okay.
However, in some scenarios you can’t rely on caching, for example:
Logged in requests, including all of wp-admin
Pages with dynamic content: WooCommerce
An introduction on how to use WordPress conditional tags to target specific pages, etc.
Building a website with WordPress provides great flexibility with what you can do in terms of both design and functionality. And, as you get deeper into theme development, you’ll find that there are times when you need to target a specific page, category or post type for something special. That’s where conditional logic can make your job much easier. Conditional logic is a powerful feature of programming languages (PHP, in our case). In essence, it means that we can use code to check if a certain condition exists and then do something specific if that condition is met. A simple example of this would be checking to see if a user is currently on our site’s home page. Using conditional logic, we might choose to load a slider or other special content in that situation.
With regards to WordPress, there are a number of useful Conditional Tags built into the software that let us test for all sorts of scenarios. They’re well-documented and allow you to bring a higher level of functionality to your site.
Today, we’ll take a look at a few of the more commonly used Conditional Tags and how you might implement them into your own site.
A Note on Using Condtional Tags
This is tutorial that shows how grown our WordPress eco-system is. Now you could create a eBay like marketplace, all in WordPress, and you dont need any custom development, this post lists all the tools needed.
If you are reading this you probably have thought at some point of making your own customized marketplace like eBay. On eBay, everyone can be a seller and a buyer simultaneously. Also consider the fact that auctions are way more attractive than ordinary sales. For buyers and bidders, auctions create a sense of curiosity which makes people more vigilant towards the product they like and keep close tabs on it. All to the advantage of the seller, the buyer often ends up purchasing at a higher price than they thought of initially. Since bidders compete simultaneously for the product, it’s always a winning situation for the seller. The feel of scarcity as well as urgency that auctions create in the minds of onlookers is often more powerful than regular marketing techniques created to make an ordinary sale attractive.
Now imagine building your own online marketplace of auction-able products with today’s best eCommerce solution, that works with an unlimited number of vendors, and sells multiple types of products. Let me tell you, it is not hard as you may think.
The Cherry On Top:
Imagine also if you could mobilize your local neighborhood to join your online marketplace through
Not usually a fan of SEO related guides but this one is quite well written.
Google search algorithm can be changed quicker (around 500 times per year) than you write blog posts, voice search trend is growing faster than you realize it actually exists, paid ads may decrease trustful relationships with your prospects. These are the realities of SEO and if you take a good care of your WordPress website from this perspective, check out this post to find out more about core SEO trends in 2017. Let’s at first define the main conceptual pathways around the trends:
Paid ads are not your best friends. As well as aggressive or black-hat SEO techniques may lead to breaking up your relations with search engines, markers like “Ads” or “Sponsored” next to the link to your website are lowering down clicking rates. People don’t trust popularity gained through a payment and continue searching for organic results.
Search engine optimization is not a plugin, but a process. So, if you want to get all the work done with any popular WordPress SEO plugin only, it’s not going to work. Of course, Yoast SEO or All-In-One SEO Pack are huge reliable helpers, but you should spend more time and use more tools to properly analyze and improve the
We've just released 12 free hero header templates in Elementor page builder. In this post and video tutorial, we go into details about the techniques we used to created each stunning header.
Syndicating content to third-party sites may not be safe. If don’t support the use of the rel=”canonical” tag. Chance are they outrank you on SEO and makes Google thinks they are the original authors. Worse still, Google penalise you on duplicate content. Good news is Medium do support canonical tags. Thus, you can trust Medium to repost your articles without hurting Google rankings.
Syndicating content to third-party sites may not be safe. If don’t support the use of the rel="canonical" tag. Chance are they outrank you on SEO and makes Google thinks they are the original authors. Worse still, Google penalise you on duplicate content. Good news is Medium do support canonical tags. Thus, you can trust Medium to repost your articles without hurting Google rankings. First thing first, why re-posting WordPress content to Medium at all? The answer is simple: Get more readers that actually read! Medium has an algorithm to predict what type of articles one might want to read. Publishing on Medium almost guarantees your content will get seen by the targeted audience and its network effect is powerful.
No! Copy and paste is not a solution. Medium has already make a plugin for you. Install the official Medium plugin from wordpress.org
Upon activating, you can find Medium settings on WordPress’ user profile.
The integration token can be found on Medium settings page. From now on, your WordPress articles will also be posted to Medium automatically.
Does Medium hurting my SEO?
Short answer: No.
Long answer: The Medium plugin adds a rel="canonical"
In this episode, we unpack local SEO and demonstrate the Business Profile plugin.
If you’re looking to improve your search visibility, specifically in local search results, the Business Profile plugin might be just the ticket. Nate Wright, owner of Theme of the Crop, joins today’s podcast episode to chat about the genesis of his plugin, the benefits of local SEO, and how it all comes together using his products. In this 40 minute demonstration, we’ll show you how to configure the options of the Business Profile plugin, and display our business locations on top Nate’s theme.
Business Profile Plugin and it’s local SEO advantage
Listen to the audio
Building a WordPress website for restaurant owners is a tricky business.
On the Matt Report, a place where I talk about serving businesses with WordPress, we often talk about the $500 website client. Someone who has very little money, but wants all the bells and whistles. Often, busy chefs and restaurant owners fall under that category — and it makes sense. It’s a very competitive business, it’s very seasonal, and there’s a lot of turnover.
But, here’s the thing, WordPress themes, plugins, and tools are getting much better and their affordable. You could take that
In keeping with the all-Gutenberg all the time theme of WP news these days, here's a tour of the interface with some terminology.
Have you ever wondered what something is called within Gutenberg? This guide is meant to help by giving the names and the expected behaviour of some of the basic design elements. If you want to build blocks and extend Gutenberg, knowing what to use or not is important. This is meant as a starting point, not a full description of all design elements. Toolbars:
There are two toolbars:
The Editor toolbar: This controls document tools like undo and information. Also within this toolbar are preview, publishing and saved state.
The Block toolbar: This controls block specific behaviour, for example in a paragraph block bold/italic and adding a link. As a guide, place common settings that a user would want for every version of that block in the block toolbar.
These are also referred to as 'advanced settings' when linked from the block toolbar.
There are two settings:
Document: This gives you global settings for the entire document like visibility and reviewing. Think of this like your settings panel for your content.
Format: This is per block and changes depending on the block and if it even has settings. These differ from the toolbar as are secondary block settings, for example adding
Automatically pull the latest version of WordPress as a DesktopServer blueprint. This is just genius. My new normal for sure.
Did you know that you can create a blueprint that will pull the latest version of WordPress as well as any of the themes or plugins that are in the repository. You can even install premium plugins and themes as long as you have them in a location set to where you can access them (i.e. DropBox). Why would you want to do that? Well it saves time when you create the local development installation and then have to run the updates on core, themes and plugins. Simple, really. How do you do it you ask? Here are the steps: Create a new folder on your desktop. Call it “LatestGreatest-BluePrint” (or something that works for you!)
Using a text editor (Sublime text is my favorite) You’ll need to create two files:
blueprint.php & wp-config-sample-php.
In the blueprint.php is where you will add the code that pulls in the latest WordPress version plus plugin-ins. I’ve included a screenshot so you can see the syntax that you’ll need.
Also here is some starter code that you can use via copy/paste – remember to replace the directory structure and file names to suit your needs:
* Automate the setup of the freshest version of WordPress, Adam’s
Last year I had a Black Friday sale on a few of my products. I've since gathered the data and it appeared to work pretty well. Black Friday (or any campaign) is a long term process, I've written a guide on when you should start things, as well as a download to my cheat sheet!
Yeah, I know. It’s March. We’re about 4 months out from Black Friday 2016, so why am I writing a Black Friday article now? Well, over the festive break I looked at the stats from the Black Friday sale I had both here as well as on WP Email Capture, and I think my strategy for 2016’s Black Friday, worked. It took 2 years to refine it, so without further ado, here’s what I made sure I did for my Black Friday sale, and rough timescales for each.
Right Now – Get Your Tracking Set Up
If you’re selling WordPress products, and you haven’t got any form of tracking set up, what are you waiting for? You are missing out on valuable insights if you don’t.
At the very least, you should set up the following:-
Google Analytics (Monster Insights, preferably the Pro Version).
Email Capturing (such as WP Email Capture)
This can give you a great idea where people are coming from, and – most importantly – which convert. If you are armed with this data you can make informed decisions.
Also, from my 5 years of plugin development and marketing, having an email list is probably the best converting method of marketing I have, so make sure you’re
A simple step... but one that works on sites that might have auto embed turned off.
This might seem like a very small thing, but it actually comes up quite often with people depending on how your WordPress site is setup and what theme you are using. And that is the question of how to center YouTube embed on your post. I am personally a big fan of centered images and so to have a YouTube video embedded and left aligned just looks off. Follow the quick steps below on how to center your YouTube videos. How to Center YouTube Embed
By default in WordPress when you paste the URL of a YouTube video it should be centered as it uses the default WordPress embeds feature. But this is not always the case. And some WordPress owners have the auto embed featured disabled. Sometimes using the embed code from YouTube can give you more control.
If you click on a YouTube video you can grab the “Embed” code as seen below.
In your WordPress editor you will want to click into the “Text” tab so that you can insert code.
Paste the embed code into the WordPress editor. Example:
<iframe src="https://www.youtube.com/embed/9hgiAfrb2NA" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
How WordPress uses its native image resizing functionality to implement srcset and sizes automatically and how you can use an external image service like Cloudinary to extend the native implementation that WordPress provides.
If you're reading this, you're probably already familiar with responsive images. Even so, it may be helpful to have a little background. (Then we'll get to the WordPress part, and how to make them even better with Cloudinary.) For most of the Web's existence, any time you wanted to include an image on a web page, you would create markup that looked like this: <img src="/path/to/my/image.jpg" alt="a very nice image">
In this example, the <img> element references a single image file named `image.jpg` located on a server at `/path/to/my`. This markup is straightforward in that it tells the browser to download and render a specific image file, referenced by the src element, onto the web page.
This arrangement was fine until 2010, when Ethan Marcotte published his seminal article, Responsive Web Design, which popularized the technique of using Cascading Style Sheet media queries to modify the layout of web pages to fit whatever size device a person is using. Responsive web design also increased interest in optimizing the performance of websites based on screen size. This focus made clear just how big a pain point images are for performance, accounting for
I usually do not share posts with SEO in title, but if you are going to do any SEO at you might as well do it properly. The accent should be on copywriting, not SEO.
SEO copywriting is the answer to one of the biggest challenges faced by many website owners these days. Users now have to create content that appeals to people and search engines alike. After all, we not only want to rank well and generate traffic but also turn that traffic into buyers, customers, and subscribers, right?
These two goals used to be the responsibility of SEO specialists and copywriters and it used to be enough to be either or. However, the way search engines work today, that is no longer the case.
To be successful in today’s online market, website owners and online marketers need to master both sides of the equation and embrace what is known as SEO copywriting.
If you are unsure what hides behind that term, this article will not only explain what it is but also show you SEO copywriting best practices to start using right away.
Sounds good? Then what are we waiting for?
What Is SEO Copywriting And Why Does It Matter?
To get a clearer idea of what we are talking about when we say SEO copywriting, let’s have a quick look at the term itself. For that, let’s look at the two parts that make up the word: “SEO” and “copywriting”.
We wrote about the email marketing automation technique we’ve come up with, using tools that are available for everyone (and for free). This write-up includes the thought process of why we did it, how to set it up from A to Z, as well as try to answer the question - how has it been working so far?
We’ve recently decided to take advantage of MailChimp’s (free) email marketing automation feature in order to fill a gap we’ve been unable to manually bridge for our new blog subscribers. In this post I share the email marketing automation technique we’ve come up with, using tools that are available for everyone. I’ll provide an inside look into our thought process of why we did it, how to set it up, as well as try to answer the question – how has it been working for us so far? What Is Email Marketing Automation And Why WordPress Plugin Businesses and Theme Shops Need It
According to MailChimp, integrating email marketing automation into your operation essentially means you’ll be adding another brain to do marketing-related work for you, so you can go do other useful things for your business, instead.
More specifically, in the case of email marketing, these automations can run in the background, handling the repetitive, event-bound tasks for you, in the same way, you might have handled them yourself, simply because it is you setting them up and configuring them. Ultimately, the automated marketing processes help you make more sales with much
From the Digging Into WordPress website: Jeff Starr with a complete guide to disabling Gutenberg, in case you need to.
Gutenberg soon will be added to the WordPress core. This is great news for some, not so great for others. With 99.9999% (estimate) of all WordPress sites currently setup to work without Gutenberg, the massive changes barreling down the pike are going to affect literally millions of websites. And as swell as the whole "Gutenberg" experience may seem, the simple truth is that a vast majority of site owners will not be prepared when it finally hits. Nor will many small business have time or budget to test and update client sites to accommodate ol’ Gut’. Note! To help save time, I may refer to Gutenberg as G7G or g7g throughout this article (e.g., in code snippets). Just faster than typing it all out :)
*You* have the power..
If that sounds like your situation, you basically have two options:
Buck up and fork out your time and money to test and update all existing client sites for Gutenberg.
OR, simply disable Gutenberg until you are ready for it.
From the WP peeps I've heard from, only a handful are full on-board ready to sacrifice whatever amount of time and money it takes to implement and support Gutenberg. Most folks I've heard from, however, are confused and/or
The complete guide showing how to leverage browser caching in WordPress.
One of the things you learn as your website grows is that performance is critical. These days, most people expect your site to load quickly, and they don’t have much patience unless it does. ‘Caching’ – essentially a way of keeping your loading times lean that we’ll talk more about shortly – is a key way to keep your website’s visitors happy. Browser caching enables your website to load faster by cutting down on how much information users need to re-load after their first visit. It’s a simple way to reduce loading times, and anyone can implement it on their website.
In this article, we’re going to talk about what browser caching is and what it means to leverage it in WordPress. Then we’ll talk about when you should disable caching and how to set it up in the first place. Finally, we’ll help you check if caching is working as intended on your website. Let’s get to work!
An Introduction to Browser Caching
If set up correctly, websites will often save some of their files to your computer. That way, you won’t need to load the entire thing over the internet each time you revisit it. This process is known as browser
Both Bedrock and Trellis exist to make it easier to develop, maintain, and deploy WordPress sites. Check out how to use these solutions at Kinsta.