What is WordPress autosave?

Imagine someone sitting next to you in class during a test copying all your answers. Now, imagine a dog randomly runs into the classroom and chews up your answers!

In this scenario, you’d have to start the test all over from scratch hoping you remember your previous answers to complete it on time. However, out of guilt, the cheater sitting next to you hands you back a copy of your answers to turn in; thus, saving you precious time. This is WordPress autosave in a nutshell.

Since the release of WordPress 3.6 over eight years ago, a copy of what you are typing when editing a post or page is being saved in your browser’s session. This is your autosave.

There are two benefits to this technical design. One, your database doesn’t expand infinitely with every keystroke.

Two, in the event you were to lose internet connection for a time, a copy of your post or page is being saved locally to restore from once you are back online. When you refresh a page or post you are editing, you see a prompt saying that you have a later version saved and asking if you’d like to restore it. Basically, this WordPress prompt is asking you to restore what is in your autosave.

Resource: WordPress Codex – Autosaves

What are WordPress revisions?

So, um, you changed your mind?

Were you working on your next blockbuster, constantly updating your latest creation, only to realize you went down a rabbit hole and edited out the main plot, what do you do now? Fortunately, every time you save a draft or publish a post, a backup of your previous version of your post is saved for you.

WordPress revisions are simply a historical trail of all the changes you made to your content. Think of it as a track record of how it’s evolved over time.

This is useful, if you need to audit changes in your article, or if you have to restore to a previously authored version entirely.

To explore WordPress revisions, simply open up any post or page you are editing. In the right-hand sidebar, click Revisions (assuming you’re using the default Gutenberg editor view).

After clicking, you should be brought to a navigation screen. You can explore previous versions of your post and have the ability to restore to that version, if needed.

Resource: WordPress Codex – Revisions

Conclusion

WordPress autosave helps save your data in case of a technical error. WordPress revisions help you restore the content in case of a human error.

Serving different roles, both autosave and revisions work together to help you from losing your words. Now, if only there was a way to find them when getting started.

The post WordPress Autosave and Revisions appeared first on WebDevStudios.

It’s 2021, and WordPress is only growing in popularity, representing as much as 41.4% of all websites! If you are in the market to make a new website, perhaps you should consider Headless WordPress.

Because of the recent developments of Next.JS and WPEngine Atlas, this year is now the best time to get started. This article intends to help those who may not be full-time WordPress developers better understand what Headless WordPress means and if it’s a right fit for your organization.

If you’re wanting to get a little nerdy, I’ve already written a few other articles about Headless WordPress centered for developers: Headless WordPress: Making Your Own API Endpoints and Headless WordPress: Deeper Dive API Primer and How to Post to Other Platforms.

Let’s get started!

1. What is Headless WordPress?

Before you even consider committing to a Headless WordPress website, it would help to start with what makes a headless site any different from a normal WordPress site. Nearly all modern websites comprise two elements: what you see (the frontend) and what you don’t see (the backend).

The frontend consists of HTML, CSS, and JavaScript to present the site to you. The backend is where the data is stored and processed before being sent to the frontend. Today, most websites have the frontend and backend powered by the same technology framework, in our case, WordPress.

When we choose to go headless, we only use WordPress for the backend to easily store and edit our content while allowing a faster frontend framework, such as Next.js, to act as our frontend. The whole definition of a headless website is taking off the part that people see.

Note: If you would like to know more about Headless WordPress, check out my post on Headless WordPress: Taking Posts Anywhere.

2. Where is headless going?

Going headless is here to stay, but what are the current emerging changes to this space to be aware of? The two biggest areas where changes are happening are in the frontend space and the hosting space.

Frontend – NextJS

All the data in the world is useless unless users can see it. There are many great frontend frameworks to choose from, such as React, Angular, Vue.js, and more. If you pick any of these, you’ll have great support and documentation to get the job done. However, if you are not already sold on the framework, consider your next site build using Next.js. This framework is React but with so much more out of the box. Next.js provides tools such as internationalization to support multiple languages, hybrid rendering for faster load times, and so much more with little configuration required.

Backend – Atlas

A website is only as good as its hosting. Announced this Spring 2021, WPEngine has launched Atlas, “The complete Headless WordPress Platform for absurdly fast dynamic sites.”

Atlas, in a nutshell, is a new architecture used to develop your website. It’s designed to be fast, secure, and scalable. This means fast load times for your users, secure protection of your users’ data, and scalability, knowing that your site won’t go down as your business grows.

3. Headless WordPress Example

The Bill of Rights Institute provides thousands of resources about American history and government to classrooms around the nation. The site features a large user base and a vast library of content.

To achieve fast loading times, BillOfRightsInstitute.org is developed using a Headless WordPress installation and a Next.js frontend. These two framework choices allow for the website’s vast content to be easily managed in the WordPress dashboard while leveraging the speed benefits of a modern frontend framework.

4. Is it right for you?

WordPress is an infinitely flexible framework to build out your next big idea, from a simple blog to a multi-million dollar publisher and eCommerce platform. With its flexibility, you have thousands of pre-made site themes and plugins that allow you to make your dream with no coding required.

Unfortunately, at this time, there is no viable way to build a Headless WordPress without getting headless experts involved. That said, if you’re just getting started with your idea, or just need a simple website, Headless WordPress might not be for you. But, if your project vision is grand and requires the benefits of a decoupled frontend, Headless WordPress is a great way to go. When you need help, our WordPress agency can get you started!

The post Is Headless WordPress the Right Solution for You? appeared first on WebDevStudios.

According to Wikipedia…

“Cloudflare, Inc. is an American web infrastructure and website security company that provides content delivery network services, DDoS mitigation, Internet security, and distributed domain name server services.[2] Cloudflare’s services sit between a website’s visitor and the Cloudflare user’s hosting provider, acting as a reverse proxy for websites.[3][4] Cloudflare’s headquarters are in San Francisco.”

For those who aren’t giant nerds like we are, Cloudflare is an easy-to-set-up tool that turbocharges your website, protects it from the bad guys, and tells you where your audience is coming from. So, let’s talk about what all this really means.

Speed

Faster DNS

Everyone likes a fast website, right? But did you know that there is a lot more to loading times than just a fast web host?

One common issue that causes sites to load slowly is having poor DNS lookup times. Cloudflare helps trim this time down by stepping in as your DNS manager. If you are migrating from a poor DNS manager, you could see your site load speeds reduced by as much as 2,000 milliseconds! For more information see Cloudflare DNS.

Distributed CDN

Ever heard of cache? A cache isn’t money misspelled, but when it’s properly configured, it can make you some.

I’ve covered caching in greater detail in Diagnosing a Slow WordPress Site, but the short answer is it helps your website load faster for all your users. A major factor of website load speeds is distance. In other words, how far away is your server from your audience?

The farther the user is from your host server, the longer it takes for your site to load for your users. Unlike caching solutions that are hosted on just your host server, Cloudflare provides you multiple cache servers distributed across the globe free!* In practice, if you have a global audience, they are served a copy of your website from a server that is closer to them. That means faster load times.

Bonus fact: Since Cloudflare can save a cached copy of your website, in the event your web server goes down, Cloudflare is able to continue to serve your users from its saved copy until your web services are restored. For more information see Cloudflare CDN.

Analytics

Another major benefit that Cloudflare provides is in-depth analytics of all your site’s traffic out of the box. Knowing where your audience is coming from is helpful for your marketing strategy. Perhaps you didn’t know you were popular in Germany. These types of insights aid you in making more informed business decisions, such as opening up a version of your site in German or load balancing your website to be closer to your real customers.

If you are a fan of Google Analytics, you can still use it in conjunction with Cloudflare. For more information see Cloudflare Analytics.

Security

While speed and analytics certainly are important, as a backend engineer, the biggest reason I love Cloudflare is for the security resources it provides. Better than a mall cop, Cloudflare provides free denial-of-service (DDOS) protection to all of its users.

A DDOS attack is when a bad actor wishes to make a website (or any network resource) unavailable to other users. One way this can be accomplished is when a pool of thousands of infected computers are instructed to load a particular website in the hopes of overwhelming that server’s capacity, and thus bring down the website.

The reasons why someone nefarious would do this are plenty; sufficed to say, it’s not a good thing to happen when your its next target. Being a leading provider of DDOS protection Cloudflare has a database of most bad actors and can block their requests from ever reaching your website, thus keeping it online. For more information see Cloudflare DDOS.

Conclusion

If you like your website to go faster, become more secure, and ultimately know where your customers are coming from I hope you give Cloudflare a consideration.

To address the asterisk after free earlier, all the services I mentioned in this article are provided free for all the sites you own and should be all smallest to mid-sized websites should need. Who doesn’t like free stuff? If, however, you are a larger enterprise client, Cloudflare provides an extended range of paid services to help you even more.

So, whether you’re leveling up your current website or launching a new web project, consider my advice. If you’re seeking a team of pros to help you with that, contact us!

The post Why You Should Use Cloudflare for All Your Websites appeared first on WebDevStudios.

If your website looks like the one above you either have really, really, really particular brand following… or it might be time for a website redesign.

There is never a perfect checklist or milestone your website needs to meet in order to justify a redesign. It varies from person to person and even site to site. In this blog post, I’ll cover some of the most common reasons that I’ve experienced first-hand from over ten years in the web design space.

While your website may not check all the issues, I hope to make it broad enough to equip you with enough evidence to convince your stakeholders (even if it’s yourself) that you are due for a makeover.

For content breakdown, I’ve split reasons for change into the following buckets:

1. Obviously scary warning signs
2. Increase in traffic
3. Being compliant with laws

Preface: A redesign doesn’t have to be scary.

To start off it’s okay to feel overwhelmed or perhaps scared to redo your website. This can be due to limits on your time, fear from past site rebuilds that went south, or perhaps you simply fear losing your content. The following list of concerns isn’t exhaustive but it serves to say that we understand why you may be hesitant.

Throughout the rest of the article, I help to demystify some of your concerns and offer some, hopefully, compelling examples that may convince you that the time for change is now.

Limits of Your Time

This is the easy part. Simply by partnering up with a website company that already has established relationships in place, you can count on them to handle the strategy planning and take it from there. If you don’t already have a WordPress agency in mind, I highly recommend us at WebDevStudios. If your business is on the small to medium side, a website redesign from Maintainn, which is owned by WebDevStudios, will be a perfect fit.

Being burnt in the past

In my ten-plus years of web development experience, I’ve heard countless horror stories of projects going wrong. Though you can’t control everything, joining forces with the right design and development partner with a proven track record should help to put to ease your concerns. Don’t allow the past to deter you from creating a successful future.

Fear of losing your content

Unlike other platforms in the past, WordPress is what is known as a content management system, not just simply a website builder. The way your website looks and feels is handled through themes on your website. This is the part you are redesigning, not your content. Think about it like this: if your website content is an engine in your car, you can swap the body and still keep the same engine. All your pictures, posts, products, and more will migrate just fine. (Whew!)

Bucket One: Scarily Obvious Signs

It’s difficult to make content updates.

If you can’t update your website, what good is it for? As a content management system, WordPress should make editing your website be as easy as riding a bike. Something to consider is that if you have an older WordPress installation, major advancements have been made towards how you can design and manage your website, be it Gutenberg for custom websites or Beaver Builder for smaller businesses. A newly redesigned website will provide you with the latest tools to allow you to feel empowered to make content updates when YOU want.

It just doesn’t express who you and your company are anymore.

Let’s face it: many of the fashion trends from the early 1990s don’t look so great in the 2020s. Saying your website doesn’t express who you are today doesn’t admit that your old website was bad when it came out; it’s just time to update your digital wardrobe.

Other Scarily Obvious Reasons

• You have a new product line.
• You have a new company direction.
• It looks like an amateur made it.
• It takes a long time to load.
• It’s difficult to use.
• The words “flash is required” are anywhere on your website.
• It lacks a friendly mobile experience.
• It’s lacking key features, like the presence of social media integrations.

Bucket Two: Increase Traffic and Conversion

If your website was on Tinder, would visitors be swiping left?
– Laura Coronado, WebDevStudios Marketing Strategist

More traffic = More Customers = More Sales = More $$$

The golden rule of a website’s value, from a business perspective (even if you are a nonprofit), is more traffic means more users served. There are a countless number of ways to drive more traffic to your website, be it SEO, ad campaigns, guerrilla warfare, or a magic ritual. One thing for certain, an outdated and poorly designed website will impact how much money you make at the end of the day.

How Design Affects Traffic

Did you know that your site’s design can make an impact on your SEO and thus affect your traffic? Since 2015, mobile-friendliness has been among the many factors that Google uses when it ranks websites in search results. Another design element that affects your search ranking is your site’s load speed, while this can be influenced by your site’s hosting. Also, a poorly designed website that uses unnecessarily large graphics can cause people to abandon your website in as little as two seconds! To read more on this topic, check out “5 Ways SEO & Web Design Go Together” by Search Engine Journal.

How Design Affects Conversion

The internet has matured past the point of anything truly being first to market for any standard consumer goods or services. With that, your average customer is savvy and aware that if they don’t like what you are offering, they’ll just go somewhere else. To keep visitors browsing and ultimately converting them to paying customers, your design needs to create a pleasant user experience by making content easy to find and visually pleasing. It’s not just the product or service your site is offering. It equally matters as much how you are offering it.

Bucket Three: The Law Forces Me to

If you aren’t convinced by now that you may need a new website. perhaps civil law may convince you. For the better part of 35-plus years, laws dictating how websites are to be designed and behave were mostly absent at any large scale. This is no longer where we are today. You know you need a website redesign when compliance with the law dictates it.

Accessibility

I recently wrote a blog post titled, “5 Ways to Make Your WordPress Site More Accessible.” In it, I covered not only tips to better deliver your content but also legal and monetary considerations you should be aware of if you are ignoring accessibility in your website’s design.

Since 2017, accessibility lawsuits related to website accessibility, which is directly impacted by your website’s design, have doubled every year with as many as 3200-plus in 2019 alone. I highly recommend you give my article a read, but in summary, by not coming into compliance with good site design, you could leave yourself liable for punitive damages.

Cookie Compliance

Even if you have a nice-looking website that meets your needs and is accessible to others, that still may not be enough. Starting October 1, 2020, any website that has European Union (EU) consumers needs to conform to enhanced cookie compliance laws. It’s quite common for third-party themes to include third-party tracking cookies that are not compliant with EU regulations. Any redesign should take this into consideration what tools and resources are used in your website’s build.

The End

Whether the need for a website redesign is obvious, stems from a desire to boost traffic and sales, or compelled by legal reasons, I hope you found this post informative. Just remember that with the right partner, a redesign doesn’t have to be so scary! If you’re ready to get started, reach out to us at WebDevStudios, or for smaller businesses, contact Maintainn.

The post Scary Warning Signs Your Website Needs a Redesign appeared first on WebDevStudios.

You are working on a new plugin or theme to sell to customers. You think to yourself, let’s just go ahead and process this form or button request. What can go wrong? Nonce so fast.

It’s always fun to develop a new code that provides direct value to the end-user. However, as good software developers, it’s essential that our code is also safe and secure. This will be part one of a multipart series of safe coding practices to consider when writing code, especially as it pertains to user input such as forms and button clicks.

Preface

Before we dive into code, it will help to understand what nonces stand for and what role they fill in safe coding.

Definition

WordPress Codex describes nonces as the following.

A true nonce is a “number used once” to help protect URLs and forms from certain types of misuse, malicious or otherwise. WordPress nonce’s unfortunately aren’t single use, however they are called the same as they serve a much of the same purpose. – WP_Nonces

Role

One of the primary roles of nonces is to protect your websites from cross-site request forgery (CSRF) attacks. You could write a whole novel about CSRF attacks. However, in its simplest form, a CSRF attack can be employed to allow third parties to access sensitive information or resources on your website. For a deeper dive into CSRFs check out the Cross-Site Request Forgery video by Computerphile. (It’s taught by Tom Scott!!!)

Examples of Attacks

1. Hijacking a bank transfer form. Send money to a bad guy bank account instead of your friend.
2. Hijacking a purchase request. Additional items are added to your shopping carts, such as buying third-party market items like on eBay or Amazon.
3. Hijacking a post update request. Malware is embedded into your blog update form. Now your website is infected and your viewers can become infected reading your blog post.
4. Forces an account delete button. This could be done by a competitor or just people who want to destroy your site’s reputation.
5. If you can think of something nasty, yes CSRF attacks can probably do it.

The Code

Now that we have all the formalities out of the way let’s dig into some code! Fortunately implementing nonces in WordPress is extremely simple. Breaking it into its two parts you have:

1. Create a nonce
2. Validate the nonce

How you implement the two steps to nonces will vary on your project, in our example, we will show you how to incorporate it into a form.

Creating A Nonce

To create a nonce in WordPress, simply call  wp_nonce_field( $action = string, $name = string ); when constructing your form. The $action should be a unique key that you will use to validate the nonce once it has been submitted. $name is the variable name for the nonce when accessed in $_POST after the form has been submitted. To show how simple it is to add to a support formwp_nonce_field( 'support_form', 'support-nonce' ) in this example, the support_form is the action and the support-nonce is how what we will access to test the nonce value once the form is submitted.

View the code on Gist.

Now when the form is displayed, a hidden input field will be added to our form to be sent off when it’s submitted. Since it’s hidden including it in our form won’t change the way it looks or feels.

Validating The Nonce

Now that we have a nonce being submitted with our form, we now need to add our validation to ensure it’s valid. Where you place your validation code is crucial! Ensure that the validation happens before you access any values of the form, in a way consider the form submission invalid until it’s validated. To verify a nonce, we call wp_verify_nonce( $nonce, $action ). You’ll notice that the attributes are flipped from when we created it ¯_(ツ)_/¯.

Since submitting a form happens via POST, we can access the nonce value by $_POST[‘support-nonce’].

View the code on Gist.

Project: Code in Action

Now that we know how to protect our forms, let’s put that into action! The following video summarizes what we just learned, as well as provides a demonstration taking the code we just learned and integrating it into a real project.

Repo without Nonces: https://github.com/Oceas/wp-security-form

Repo with Nonces: https://github.com/Oceas/wp-security-form/tree/feature/nonce

Conclusion

Just two lines of code create and validate. Now, your form inputs are infinitely more secure. But, good coding practices don’t stop here. Over the course of October, I’ll be writing a series of blog posts about safer coding practices including discussions about sanitization and form validation. Subscribe to get notified when these are published.

The post Safely Coding: Nonces appeared first on WebDevStudios.

So you want to learn how to start making your own WordPress API endpoints? Great! Today we will be taking a dive into what it takes to write our own restful API endpoints for WordPress starting from the basics and working our way up to practical examples.

If you are unfamiliar with the basics of WordPress API, you’re in luck. I’ve previously written a series of posts just about that. See Headless WordPress: Deeper Dive API Primer and How to Post to Other Platforms for a programmer’s perspective on how to work with existing endpoints. If you’re looking to learn how to get started, check out Headless WordPress: Taking Posts Anywhere to understand why WordPress API is so important.

What’s the Point?

Before explaining how to make a custom endpoint, a better question to start with is, “Why should you make a custom endpoint to begin with?” Baked into all standard WordPress websites, we already get access to dozens of free endpoints with no coding required. I go over some of these in Headless WordPress: Deeper Dive API Primer and How to Post to Other Platforms. To see what routes your site may already provide out of the box, go to https://[insert-website-domain-here]/wp-json/.

Nugget: I highly recommend the browser extension Awesome JSON Viewer to make reading JSON returned easier to read. Or, access the endpoint with your preferred REST API client.

So, with all these endpoints already provided to us, why should we write our own? The following examples, listed from least to most complex, are great reasons why creating a custom endpoint is the way to go.

Example One: Upvote Button

WP-Inspire is a website gallery of beautifully-designed WordPress sites meant to inspire others. Designed by WebDevStudios Frontend Engineer, Oliver Harrison, each site featured is simply its own custom post type with a meta field of upvotes.

To make the upvote button work for each site, we implemented a simple REST API endpoint. When the user clicks the upvote button, our custom-endpoint is called via AJAX and is passed the site’s ID. The endpoint then simply updates the site’s meta field by one and returns the new site upvote count. From this example, a custom endpoint simply made it easier to add dynamic updates to our site with AJAX without having to reload the website.

Example Two: Gutenberg Block Fight Logic

In another project, there was a need to display a multi-round competition between multiple teams in a bracket. Each team received votes in a given round. Based on these votes, the next rounds had to automatically be built based on the results and displayed in a custom Gutenberg block. A custom endpoint was made for the project so that the complex fight logic could be done in the backend and simply returned a formatted array of the next round’s entrants that the Gutenberg block could display.

In this example, we were able to decouple the complex data query and structuring in the backend (applying the various match-up logic) to simplify the display logic on the frontend, making the Gutenberg block leaner. Additionally, since the bracket logic was now an endpoint, the data could be used elsewhere such as an external website or even a mobile app.

Example Three: Connecting a Custom SAS with WordPress

Connected Church is a custom SAS developed to help churches manage their organization (think QuickBooks for church). One module in Connected Church allows you to post content to your church’s website and also display a warning banner across the whole site in the event of an emergency.

Additionally, there are multiple forms that a church can embed on their website that will automatically store the data directly into Connected Church, instead of just on the website or email. To allow for each church’s website to communicate with the Connected Church church management system, they wrote a custom plugin that registers multiple custom REST API points specifically to allow the church management systems to automatically update their WordPress sites remotely.

The Coding

First Endpoint

Ready to start writing your own REST endpoints? Let’s get started!

If you have any familiarity with WordPress development, registering your first endpoint should be a fairly straight forward process. Just like registering an action or shortcode, to register an endpoint, all you have to do is call register_rest_route()on the rest_api_init hook and provide a callback method. Seen below is your standard hello_world().

Let’s break down register_rest_route() . It takes in three parameters the namespace, route, and args. 

• The namespace is the first URL segment after the rest core prefix. In our case, by choosing myepiscopal,the routes we are registering are actually https://example.com/wp-json/myepiscopal/*
• The route is the URL after our namespace that we want to respond to. In our case, /hello-world/
• The args is a multi-dimensional array that include the method type we want the route to respond to (Get or POST) and the callback function we want to be called with the URL is hit.

Putting it all together by calling https://example.com/wp-json/myepiscopal/hello_world, the hello_world() function is called and returns the string “Hello World!”

View the code on Gist.

Working with URL Parameters

Depending on your use case, you may only need a non-configurable endpoint to trigger some PHP code. However, more likely you’ll want to pass parameters to your endpoint for more advanced responses. Any URL parameters passed with a given request will be accessible through their key in the args object passed to your callback method. For example, ?name=Bob can be called by calling $args[‘name’].

Note: Always remember to sanitize and check parameters before use in any data-sensitive manner, such as data queries.

View the code on Gist.

Let’s Turn it Up

There really isn’t much more to REST API development then there is to any other WordPress coding. The main piece that makes it restful is the initial call to register_rest_route() . From there, you write your existing PHP code with full access to all of WordPress specific assisting functions. The only difference is your function return should be JSON. With that said, let’s attempt a more practical example of something that might be more useful than a simple hello_world().

In our next example, we are going to create a custom endpoint that will allow other applications to post a banner bar across our entire website for special announcements or updates. When done, it should look something like the following image below.

In the following code, we register a simple JavaScript file to display a status bar at the top of that page; and in the PHP file, we register our endpoint and enqueue our script. Now when we hit our custom endpoint with a POST request and form body containing a message and active status, it should display on our website.

Note: This code is entirely for demonstration purposes and should not be used in production. As the endpoint is making changes to our database, you should sanitize the request data first and also add authentication for your incoming requests.

View the code on Gist.

Normally, we’d be making a POST request from our existing third-party SAS, but in this case, we’ll simply make one using our preferred API testing client.

That’s It!

We first learned of a few examples creating our own REST API endpoint that may be useful. Then, we covered the basics of registering and accessing parameters passed to our custom endpoint for use in our various WordPress plugins. Finally, we concluded with a more practical solution for a custom web application that can update content on our WordPress website for us.

The primary takeaway from this lesson is to see that creating our own endpoints should be easy. If you can register a shortcode, you can register your own endpoint. As always, keep learning and comment below with problems you use custom WordPress endpoints to solve.

The post Headless WordPress: Making Your Own API Endpoints appeared first on WebDevStudios.

If you aren’t familiar with what Headless WordPress is, check out the article I wrote titled Headless WordPress: Taking Posts Anywhere to get started. The article you’re reading now picks up where the prior ended, bringing us to the point where we can now take a more technical, in-depth look at the various endpoints WordPress offers us.

From what you’ve learned from my first Headless WordPress blog post, you can develop your own unique solutions to fetch and publish post content to any platform be it Medium.com, Facebook, Twitter, or another WordPress site. Once you learn how to fetch and send data to WordPress site you can create whatever solution you desire through the power of APIs.

Tooling

At its core, Headless WordPress is just a series of restful API endpoints. If you are not familiar with what REST API is, check out this great video over REST API concepts and examples.

When working with any API system, it is highly recommended to first get familiar with the endpoints you are working with before trying to integrate them into any existing project you are working on. This allows you to focus just on the fundamentals of the API instead of the complexities of getting it to work with your existing code.

One way you can begin working with REST APIs is to use a restful API client—dedicated clients such as Postman (All platforms), Insomnia (All platforms), or my personal favorite Paw (Mac only).

Review Common Endpoints

A good visual I use for understanding the purpose of REST APIs is thinking of them in terms of pipes that connect our code with other websites and servers. Just like a city pipe can carry water, sewage, and power to your house, an API can carry data to and from our WordPress site, but unlike a utility company, the other end is yet another website.

While there are hundreds of endpoints built into WordPress and thousands more that can be added through the use of plugins, we’ll cover some of the most common ones in regards to posts. For an exhaustive list of endpoints, a great place to visit is the WordPress Codex over endpoint references.

Endpoint Primer

Before we explore some example endpoints, it’ll help to understand how the various endpoints are structured. Pictured below is what your average endpoint will look like broken into its core parts.

1. The first section (pictured in green) is the domain of where your website is hosted. In our case, that would be blog.myepiscopal.com. However, if your WordPress is installed at a directory on the domain, say example.com/blog, your endpoint would be example.com/blog/wp-json/...
2. The second section (pictured in yellow) is the main path where all WordPress APIs start from. /wp-json/ tells WordPress the incoming request is meant for the REST API and not a normal user visiting your website.
3. The third section (pictured in red) is the namespace of the endpoint you are working with. In our case, /wp/v2/ is the endpoint where all of WordPress’ core endpoints are registered to. However, third-party plugins can register their own. For example, the plugin API Bearer Auth registers the namespace /api-bearer-auth/v1/. So, its example path will look like example.com/wp-json/api-bearer-auth/v1/.
4. The fourth section (pictured in blue) is the action in the namespace we want to make. For example, the /posts/ endpoint in WordPress tells the site we want to interact with posts.
5. The fifth and final section (pictured in pink) are any additional URL parameters we want to pass to the endpoint action. In the case of this example, we are telling WordPress to return posts 100 at a time.

Fetching Content

Note: When fetching content, unless a website’s API has intentionally been locked down, you should not have to authenticate to make any non-destructive requests.

Fetching Posts

Now that we have an understanding, let’s start fetching some posts. To get a full page of posts, simply hit https:example.com/wp-jon/wp/v2/posts and you should get the latest posts from that WordPress website. Below is what that can look like in PAW. From the response, we can see WordPress returns a JSON array of post data.

Special Fields

• id – This is the ID of the post stored in WordPress. We can use this to fetch the post by itself in a future request.
• date – This is the date the post was published on.
• title->rendered – This is the user-readable title of the post.
• content->rendered – This is the rendered html of the post’s content which can be used to display the contents of the post; or, if combined with TinyMCE, you can develop your own post author interface in your existing software application.
• featured_media – This is the ID of the featured image for the given post. We can use this to fetch the image asset on a future request.

Fetching A Single Post

Fetching a single post is done very much in the same way as querying for many posts. All we do is add the post ID we want to query /wp/v2/posts/<id>. This is what it would look like if we are looking for a post with ID 27 https:example.com/wp-jon/wp/v2/posts/27. The main difference is instead of returning a JSON, array we simply receive the post data with the same fields.

Special Fields (Same as Posts)

• date – This is the date the post was published on.
• title->rendered – This is the user-readable title of the post.
• content->rendered – This is the rendered HTML of the post’s content which can be used to display the contents of the post; or if combined with TinyMCE, you can develop your own post author interface in your existing software application.
• featured_media – This is the ID of the featured image for the given post. We can use this to fetch the image asset on a future request.

Fetching a Featured Image

Once we have the featured image ID from our two previous queries, we can fetch its rendered URL (so we can display it) by using the /wp/v2/media/<id> endpoint. If we are searching for a featured image by ID 28, it looks like this: https:example.com/wp-jon/wp/v2/media/28.

Special Fields

• mime_type – This is the type of file (JPEG, PNG, etc.).
• alt_text – This represents any alternative text provided for the image for accessibility purposes.
• source_url – This is the URL for the image. This URL can be placed directly in the src of an image tag to display the image.

Authentication

Note:  In order to create, edit, or delete posts, you’ll need to have some form of endpoint authentication installed on your site. While there are many options out there, the one we will be using for this tutorial is API Bearer Auth.

Authenticating

In order to make any destructive requests (create, update, or delete) of post or image content, we must first authenticate as a site user. With API Bearer Auth installed, we simply need to pass our username and password in a request body to the endpoint api-bearer-auth/v1/login.

When making any POST or DELETE requests to WordPress API, make sure in the request header you set Authorization: [authentication-code-here]. If you do not, you’ll get a 401 error saying you are not authorized.

Special Fields

access_token – This is the token we will use to authenticate ourselves for any update style requests.

Updating and Creating Content

Creating a Post

When creating a post, there are countless options we have at our disposal to fully create a post through the REST API. Check out the codex for a full list of post arguments you can pass. Today, we will focus on the bare minimum: title, content, and status. 

To create our post, simply send a POST request to the /wp/v2/posts/ endpoint with our arguments filled out in the form body and that’s it! You should receive the post body returned in JSON format like the /wp/v2/posts/<id> route.

Remember to include your authorization token!

Special Fields

status – Make sure this is set to publish if you want the post to publish automatically otherwise the post will be saved as a draft.

Updating a Post

Phew! We made it this far now, but how do we update an existing post? When updating a post, simply act like you’re creating it. Just include the desired post’s ID in your request /wp/v2/posts/<id>.

Deleting a Post

To get rid of the evidence, instead of making a POST request to /wp/v2/posts/<id>, we will send a DELETE request that simple! Bye-bye, posty.

Uploading Media

Up to this point, we’ve found out how easy it to create, read, update, and delete posts. Surely, updating photos is an easy task? WRONG! WRONG! WRONG!

Okay it’s not really that hard, but it took me an embarrassing amount of time to get it working. This one endpoint is the primary catalyst for why this post exists (documenting frustration). I was, unfortunately, unable to get a media item to upload via a REST client, however, as a lover of PHP that’s how I got it to work.

Step One: Expand Your Header

Unlike all other API requests, media upload requires additional settings in your request header in order for your upload to work. Specifically, we must define the Content-Dispostion and Content-Type field in our header request. Within the Content-Disposition field, simply update the filename to whatever you want it to be saved as in WordPress. The Content-Type is the file file-mime type you are uploading.

$this->headers = [
'Authorization' => 'Bearer ' . $response->access_token,
'Accept' => 'application/json',
'Content-Disposition' => 'attachment; filename=testing.jpeg',

'Content-Type' => 'image/png',
];

Step Two: Form Body

With our updated request header, we simply need to make a POST request to the /wp/v2/media endpoint. For the form request, simply use the file contents (bits) form in PHP. We can use the file_get_contents() method. A successful submission should return a JSON payload of the media like that from /wp/v2/media/<id>.

All Together

View the code on Gist.

Let’s Put Headless WordPress to Use

Do you have an existing Software as a Service (SAS) or project you’d like to integrate with WordPress? Watch as we take a walk through what it takes to do just that. In our project example, we create a simple frontend form that allows us to publish a post to our existing WordPress website using many of the routes we explored above.

Note the purpose of this demo is to just show you how easy it is to work with Headless WordPress. Once you know how to send form data, you can easily integrate your business logic in place or a simple form to populate your website. Find the code on GitHub.

Keep Exploring Headless WordPress

I hope this WordPress API primer was helpful in giving you the tools you need to start integrating your existing projects with Headless WordPress. The world of coding is an exciting field with new APIs being added every day.

Perhaps your next goal is to have internal statistics or products published to your corporate website from an internal tool, or displaying NASA launch updates to your space blog automatically. With Headless WordPress, the sky’s the limit!

Interested in working with a WordPress agency comprised of WordPress API experts ready to integrate your exiting website with Headless WordPress? Contact us! We’d love to talk about your ideas for your next web project.

The post Headless WordPress: Deeper Dive API Primer and How to Post to Other Platforms appeared first on WebDevStudios.

GIFs

If you are like me, nothing hurts mentally worse then seeing a huge wall of text. Although Slack is an awesome tool for business communication, who says you can’t have fun at work? Enter the humble GIF, one of my favorite tips for using Slack.

Before we start, I have to advise that you pronounce it with a hard ‘G,’ like ‘gift,’ not like the peanut butter Jif. (If this joke escapes you, please see how to Pronounce GIF ). Built into all Slack channels is a shortcut called /giphy  that makes adding GIFs to your Slack channels easy-peasy.

Step One: Start a message and type /giphy followed by the topic of the GIF you’d like to demonstrate.

Step Two: A preview of the GIF that will be inserted will appear. If, at first, a GIF appears that you do not like, simply click Shuffle until you find the perfect specimen and click Send.

Step Three: Bask in your achievements.

Reactions

Everyone appreciates acknowledgment. Fortunately, Slack provides a really easy way to do this through the use of reactions. Here’s another practical tip for using Slack: if someone shares good news, you can celebrate . Or, if someone is asking you to check into something, drop them an .

Simple reactions with emojis can serve both as mini celebrations or business purposes, without having lengthy conversations or noisy responses.

Step One: Find the message you wish to react to (this can be text or an image including ones you posted). If you hover your mouse over the message, you should see a tool pane pop-up with a smiling face and + sign show up in the right corner.

Step Two: From the emoji tool-pane that appears, choose the appropriate emoji that conveys your reaction.

Bonus: Practical Example

A practical way to use reactions, which can be employed for business purposes, is to ask people to leave a certain reaction to serve as a checklist. For example: “Hey, everyone, I just updated the engineer documentation. If you could please respond with a so I know that you read through it.” Then as people read the documentation, they can respond with that particular type, and you can have a quick list as to who has completed this or not.

Bonus-Bonus: Make Your Own Reactions

If you find your reaction palette limiting, or perhaps you wish to add reactions with the logos of your clients, you can create your own custom reactions.

Threads

Quoting earlier, “If you are like me, nothing hurts mentally worse then seeing a huge wall of text,” another method for cutting down on the total number of viewable messages in a given Slack channel is to take advantage of the threads feature in slack. Let’s say you ask a question in a Slack channel about a particular subject. If people respond directly without using a thread, that question’s response may get lost amongst all the other messages that have nothing to do with that specific question.

By creating thread messages, replies are organized together to make it easier to follow an isolated conversation. Think of this practical tip for using Slack in this way: threads help make public channels more readable by moving discussions about discrete topics into their own workspace.

Step One: Find the message you wish to start a thread to (this can be text or an image including ones you posted). If you hover your mouse over the message, in the right corner, you should see a tool pane pop-up with a text messaging symbol and + sign show up.

Step Two: A pane should open up on the right with a standard message window. Simply type a message as you would normally.

The benefits of a thread are that while additional messages appear in the Slack channel, any responses to a particular message are still organized in their own workspace.

@ All the Things and Channel Etiquette

If you have an important message that needs to come to the attention of multiple people, Slack offers @[keyword] as a way to send push notifications to your targeted audience. This can be useful if you have a general channel for the whole company that may be polluted with noisy banter.

By using the @channel, it will notify all members in that channel who are online or not to the contents of your message. This can be important for a company-wide update.

Slack provides three default @ groups:

• @here notifies only the active members of the channel (those that are online).
• @channel notifies all members of the channel (those online or not).
• @everyone notifies everyone in the company.

To use the power of @, simply include it anywhere in your message that you are currently typing, including in images, files, or message threads. For example “@channel Reminder this Friday is payday”, “@everyone We will be closed this Friday for Good Friday”, “@here Is anyone available to look at this ticket?”.

Warning: Just like the boy who cried wolf, it is highly recommended to use the powers of @ sparingly. Using @ calls something to attention. If everything becomes important, then nothing is important.

Bonus: Create your own custom @Groups

If your company pays for any tier of Slack Standard, Plus, or Enterprise you can create your own custom groups. For example, @support can contain all your support staff so that you can call their attention specifically. For more info, check out Slack’s guide create a user group.

There’s More

I hope you found some of these tips helpful in helping you Slack off better! Slack is an awesome tool for communication that no single blog post can fully capture. If you’re interested in a guide, such as how to have an email message sent to a specified channel or launch Zoom meetings straight from Slack, keep checking back to our blog for a Part 2 on this topic.

The post Practical Tips for Using Slack appeared first on WebDevStudios.

The Home Office (Your Environment and Tools)

The best place to start when you begin working from home is to set up your work space defining your new “home office.” Often, when showing up to a physical office at your work, the space in which you physically work may be out of your control, from the equipment you use, to furniture, to little details as simple as the paint colors on the wall.

Let’s create the ultimate work productivity space of your dreams! When setting up your work space, it is important to start with two key terms: separation and isolation. While some may find it comfortable laying down in bed or living room couch to stay focused on work, it’s best to define a separate space dedicated to work. For myself, this takes place in a dedicated home office. When the door is closed, I’m working; and at the end of the day when I leave the room, I have left “work.”

Separating the places that I work and relax helps create the mindset that when you’re in your dedicated space you are there to work and to avoid distractions all that is possible. If you are not lucky enough to have the luxury of a dedicated room, other great examples could be a dedicated card table in the corner of a low-traffic room or patio. The key emphasis here is to isolate yourself from others who you may share your house with so that you can focus on work.

The Tools

Now that we have our boundaries defined for our home office, what can we fill it up with to help us hit our peak performance? While your profession may dictate its own unique requirements, the essentials of any home office we all share are desks, chairs, and computers. These are the must-have items you shouldn’t skimp on.

The Standing Desk – It’s an Up and Down Relationship

While we can agree or disagree about the medical benefits of them, standing desks are awesome! When in a regular workplace, you often will get up from your chair multiple times a day to interact with your co-workers. Now that they are a Zoom, Slack, or Skype call away, you’ll often find yourself sitting still in place for hours at a stretch.

Investing in a standing desk can help with those “restless legs” inclinations to get up and stop working. If you are interested in a standing desk, consider one of these two: standing desk that converts an existing desk for around $100 or those that replace your desk entirely. I personally own and highly recommend the SHW 55” Standing Desk.

The Second Monitor

It’s 2020, and in nearly all office environments, the second monitor has become the norm not the exception. With the addition of another monitor boosting productivity as much as 50%, it only makes sense that we should have one of these in our home office (as a software engineer, I typically prefer four of them myself).

If you are looking to add a second monitor to your setup, there are solutions for nearly all budgets, from the 20” Sceptre E205W starting at $90, to the 34” LG 34UM69G-B ultrawide at $360  for the creative or spreadsheet heavy type.

Bonus Tip: How to get a Second Monitor for FREE (or nearly free)!

Do you already have an iPad or Android tablet from the past three years laying around? Congratulations you already own everything it takes to have a second monitor! To use your iPad as a second monitor with a Mac, you can use Apple’s Sidecar feature, or for Windows users, I highly recommend Duet Display. If you have an Android Tablet with a windows computer, consider checking out Space Deck.

Your Hours (Tracking and Staying Focused)

Now that you have a comfortable working space with the right tools, now how can you get started on working from home successfully? If your employer dictates your schedule like they would at an office, it will be easy to continue as before. But if you’re a freelancer, or perhaps are given a lot more flexibility over your schedule by your employer, ask yourself two questions:

• Are there any times I HAVE to be working? (For example, a company meeting every day or week.)
• When am I available to work? (Taking into account other obligations such as homeschooling kids or parental care.)

Once you know the times you must work and the times you can work, put your schedule on your calendar and make it a routine. This article, How Do You Choose Your Work Schedule, is very helpful.

Tracking Work Tasks

If you work on multiple projects in a given day, you most certainly will have gotten to the point where a simple excel timetable becomes no longer maintainable for tracking your time to bill to clients (even if they are internal). If you are a freelancer on a budget, you may want to check features your accounting software’s offerings. Often, they come with a simple time tracking feature included with your plan and can automatically generate invoices for the work you complete. Checkout Freshbooks or Zipbooks for more examples.

If you are working in a team environment with larger budgets, you may want to consider a dedicated time-tracking software. At WebDevStudios, we prefer Harvest; with a dedicated time-tracking service you get access to desktop and mobile apps to easily track your time to specific projects and budgets, additionally for manager’s you can opt to record site’s visited and screen-shots of your computer for accountability when employees are working.

Staying Focused and Earning Your Break (Beyond Time Tracking)

When you are sitting down to get your work done, it’s important to make sure you are working and not distracted by your devices and social media. One technique I like to use to keep on track is the Pomodoro Technique where you set a 25-minute timer to focus only on work followed by a five-minute break. If you feel an impulse to be distracted during your working time, write down what you intended to do and visit your list during your break.

By rewarding yourself with frequent breaks, you’ll soon find that you get more work done by intentionally focusing on your tasks during the times you need to work and escape dead-ends in your work thoughts by having a forced break. If you are Mac user, I highly recommend the Be Focused Pro app on the App Store.

Bonus: Find your phone a distraction? Ideally, you’ll want to have your phone located in a different room only to check it during intentional breaks. However, if you need to have it physically available, there is a whole market of apps dedicated to making your phones less distracting. A personal recommendation would be to check out Forest – Stay Focused an app that pesters you if you use your phone during times you should be working (also available on the Play Store for Android).

Online Meetings (How to look, How to Act)

Looking Good for the Camera

When conducting meetings remotely, it is important to be mindful as to how you look through the lens of your webcam. When joining an online meeting with colleagues, and especially with clients and customers, you should always pay special attention to your appearance. Whether you agree or not, many people make a direct correlation between your appearance and your productivity.

The three primary elements that make the largest impacts to your appearance are physical appearance this includes your clothing, hair, etc., your backdrop (this is the scene visible to others in your web call), and, finally, the angle of camera (controlling what parts of your environment people see).

Physical Appearance

I won’t spend much time on this part, as it is highly specific to each person’s style, work environment, and culture (besides, do you want fashion advice from a software developer?). A simple way to start here is to dress the same as you would in your regular workplace and adjust accordingly. When making good impressions, you can always scale things down, but it is always harder to step them up.

Backdrop

This is an extension of your physical appearance. While in an office environment, you are not usually responsible for the space that you are meeting in. However, working from home, people will be able to see how you maintain your work environment. The following are some quick steps you can apply to keep your backdrop sharp:

• Avoid having traffic areas behind you. For example, if your desk is in a living room or has a stair-well behind you, others in your meeting will see foot traffic or activities from your family members, which you can’t control.
• Avoid having any mess or clutter immediately behind you.
• Consider purchasing a divider or backdrop such as a photography backdrop or a Shoji screen.
• Depending on your video conferencing software, you can employ a virtual background. Just don’t turn yourself into a potato.

Camera Angle

When setting up your webcam, you should ideally have the camera parallel with your eye level. If the camera is too high you run the risk of physical distortion where things in your view are not in proportion, or you risk having parts of your face cut off. Inversely, having your camera too low can risk parts of your face also not appearing; but additionally, if the camera is angled up, people will be looking literally up your nose in a “nosel effect.” If your webcam is fixed to your computer, unfortunately, you may not have the flexibility

Etiquette

How do you conduct yourself when in an online meeting? Just like in a regular meeting, it’s never polite to talk over others when they are talking. While most will never do this intentionally, this often is a common occurrence within a video call. Depending on your and your peers’ internet connection, there can be as much as a two- or three-second delay. The following are tips to avoid the most common online issues:

• Always keep your microphone muted when you are not actively talking (or planning to). Unexpected noises in your environment (perhaps from a pet) is amplified on others’ speakers.
• Always wait for two to three seconds after the last person was speaking to begin speaking. Don’t forget to un-mute your microphone before you start.
• Ideally, you will want to avoid all side conversations during a meeting. However, since you cannot whisper to someone else in a meeting, consider using the chat functionality to private message others in the meeting or to provide additional information to other meeting goers that isn’t worth interrupting the active speaker.
  • Note: Even if you are private messaging a peer during a meeting know that most meeting platforms allow you to download message transcripts including those that are private.
• If you are dialing in on multiple devices in the same room, perhaps dialed in by phone and then joined with a computer, make sure you mute at least one of the devices. If you do not, you run the risk of creating an audio feedback loop.

Communication Is Key

Last, but not certainly least, when working remotely, communication is key. Whether you are looking for status updates on projects or just checking in on how someone is doing, reach out to those who you work with often. It is easy to feel alone when you can’t physically see those who you work with. Just know that they are in the same boat as you. Here are a few tips to take in mind when communicating:

• If you are working over a technical matter it may be better to have a video conference, if not much progress is being made.
• Send a hello message (with no strings attached) to your peers in the morning.
• Use plenty of GIFs. If using Slack, type /giphy topic-of-gif to lighten up any conversation or express excitement.
• Know that just like email, written text such as an instant message has a difficult time carrying emotion and intent. If a message comes across as rude or condescending, it might help to call or have a video meeting with the individual. Nearly never is that the intent.

Recommendations for Software

The following are personal recommendations for instant messaging and video conferencing software. This list isn’t exhaustive but should start as a great starting point.

Instant Communication Software

• Slack – Has a generous free tier and often has huge support for third-party integrations, such as having an email generate a message to a group chat.
• Google Chat – If your corporate email address is a Google Apps for business, you get access to  Google’s instant messaging platform for free.
• Microsoft Teams – This is a great instant messaging platform, if your corporate email is hosted by Office 365.
• Skype – This is another simple instant messaging platform alternative.

Video Conferencing

Note: Most instant messaging platforms allow you to conduct small video calls between a few members in your team, however, it’s recommended to use a dedicated video conferencing tool, if possible.

• Zoom – Probably one of the most recognizable names in the online meeting space, Zoom offers extensive tools for conducting online meetings for gatherings of all sizes.
• Google Meet  – This is Google’s video companion app to Google Chat. If you are already using Google Apps for business, you also have access to Google Meet for no additional cost.
• WebEx – This is a simple meeting tool by Cisco.

Closing

I hope you found these basic tips to getting started working from home helpful. If you are looking for more helpful articles over working remotely check out our blog!

The post New to Working from Home? Try These Tips appeared first on WebDevStudios.

An accessible website means it is properly designed and coded in such a way that all users can access the same resources regardless of abilities. Simply put, an accessible website means that all users regardless of background have equal and fair access to all your site’s content and resources. Sadly, even in our new decade, a majority of the internet remains inaccessible to millions of people. If you operate any online resource blog, eCommerce shop, web application, etc., ignoring this portion of the population not only reduces the number of customers you can serve but also presents legal risks, as well. It is my intentions to serve as a starting point in your journey to making your online services more accessible to others, although I make no illusions to this being a comprehensive list. However, by putting into practice these steps you will be well on your way to making your WordPress a more fair and accessible place.

Monetary Benefits

It’s estimated 19.4 % of all United States residents have some form of disability. This represents over 48.9 million people just in the U.S. alone. The total after-tax disposable discretionary income for working-age people with disabilities is $21 billion! From a conversion perspective, why would you not want to serve value customers? In a survey by Click-Away in 2016 71% of disabled customers will abandon a site that isn’t accessible and will never return.

Legal Reasons

In 1998, the US Congress amended the Rehabilitation Act to require Federal agencies to make their electronic and information technology accessible to people with disabilities[1] . The reason behind this decision was to provide equal access to all information technology for people with disabilities.

Fast forward to today, and still, a large part of the public web remains inaccessible to those with some form of disability. This inaction of the collective web has resulted in the need for legal action to force website owners to bring their sites into compliance with local state and federal laws. Since 2017, there has been significant growth in the number of federally-filled website accessibility cases nearly doubling every year.

Recent examples include the Supreme Court ruling that the Domino’s website and mobile-app must be screen-reading capable, which supported a lower court ruling in the case known as Domino’s Pizza v. Guillermo Robles, No. 18-1539. Further examples include federal district court cases in Florida and New York which ruled that websites failing to meet Web Content Accessibility Guidelines (WCAG) guidelines are violating Title III of the ADA code.

It’s unfortunate that it takes legal action to encourage website owners to be more accessible, but I felt it best to include this section to drive home the significance of applying good accessibility practices. I’m not a lawyer and make no attempts to say that by applying the following steps in this article you will have done enough to avoid legal action. It is simply my hope this will better prepare you to take your first steps to make the your WordPress site and the web more accessible to others. For more information, I would highly recommend looking up additional details about section 508 and Title III of ADA guidelines and how they apply to private organizations.

Use Accessibility Tools to Make Your WordPress Site More Accessible?

Before we begin making any changes to our website, it helps to get an understanding of how it currently stands in regards to accessibility. A great first place to start is using the free Accessibility Insights tool developed Microsoft. Using Accessibility Insights tool in our case the chrome extension we can run their FastPass test to see quick things we can fix in our site.

Note: The Accessibility Insights tool will identify a lot of elements that can be potentially wrong with your site from color contrast, images missing alternative text, forms missing labels, and so much more. With all the issues it might identify for your domain, it can be easy to become overwhelmed by the results. It’s always best to make changes to your website in phases. There is nothing wrong with taking it slow.  Now that we are aware of some issues with our website, we can begin applying our first steps to making our WordPress site more accessible.

Alternative Accessibility UI Tool: Wave Accessibility Tool

First Steps to an Accessible Website

1. High Contrast Colors

When designing elements for your website, such as graphics, menu links, and buttons, ensure that the colors combined in your design have high enough contrast in order to be visible. In order to be WCAG 2 AA compliant, there must be at least a contrast of 4.5:1 between your color choices. It’s okay if you don’t know how to choose the proper contrast. There are great online tools such as Monsido Color Contrast Checker that allows you to combine color combinations online and see their calculated contrast differences.

The following are examples showing how by simply changing at least one color in a combination, we can enhance the visibility of our elements.

2. Use ALT Text

When using images anywhere in your blog, you should always ensure that there is alternative (ALT) text included with the image. ALT text refers to the invisible description of images that are read aloud to visually impaired users with the assistance of screen readers. Adding ALT text allows you to include images, while still providing the content of the image in an alternative text-based format.

It’s not important to just provide ALT text; it must be useful within the context of the content. You do not have to describe every detail of the image, and you are able to skip over purely decorative images, but images containing crucial information need to have ALT text used. An easy way to come up with descriptions is to think about how you would relay the information over the phone.

For example consider a graphic at an online store that states which credit cards are accepted. What is the more appropriate ALT text?

1. ALT=”Credit Card Logos” (Which credit cards?)

2. ALT=”MasterCard, Visa, American Express, and Discover accepted.” (This specifies which credit cards.)

Get more information about ALT Text from Penn State.

3. Use Headings Properly

H1, H2, H3, H4, H5, H6… oh, my.

Headings can be tricky when making your WordPress site more accessible. Naturally, if you’re like me, your default habit when publishing a blog post is to probably use headings to format your posts and documents to be easier to read.

The purpose of headings are really to serve as an outline or skeleton of the page’s content. Although sighted readers can easily identify headings by visually scanning pages for larger text, visually impaired readers rely on screen reading software and are unable to see these visual cues. So, increasing the font size won’t assist. It is important that you nest your heading elements properly in a semantic-based approach, not how they look visually.

Note: If the visual style of how headings look is preventing you from using them properly for the page’s content, you can always update them for sighted readers with simple modifications with CSS. Or, if you are using a page builder tools, often you can increase the size of text regardless of what header type was selected.

Video Resource: Why headings and landmarks are so important — A11ycasts #18

4. Using Proper Links

When you are including text within an article, it’s important to help users understand the destination of where the link is taking them. A good rule of thumb is to write links that still make sense out of context using descriptive title text about what the content is, not “click here” or “read more.”

The following are bad examples of links in the text:

• Click here to see examples of our previous work.
• For a full list of our services, or to see a list of all our published books, click here or here.

The following shows the same links in a more usable form:

• Examples of our work are available on our website.
• Learn more about our services or check out all our published books.

Additional Tips for Good Links

1. Make sure that text links are (not a link) underlined and in a different color than the rest of the page’s content to help colorblind users find links easier.
2. Avoid links opening up a new window or tab if you are able to. New windows have a different window history disabling the Back button for users and the new windows are harder for those with screen readers to navigate to.
3. When using an image to serve as a link make sure to include the link in the ALT tag.

5. Use Plugins to Enhance Accessibility

Finally, once you have fixed all your images, headings, and links you might consider checking out adding One Click Accessibility Plugin to your WordPress site. While installing this plugin won’t replace good content writing habits, in just a few seconds you can provide your readers with an easy-to-use tool to self-service your site’s content in a way that is best for them.

Features Included

• Resize font (increase/decrease)
• Grayscale
• Negative Contrast
• High Contrast
• Light Background
• Links Underline
• Readable Font
• Link to Sitemap / Feedback / Help pages
• Enable skip to content
• Add outline focus for focusable elements
• Remove the target attribute from links
• Add landmark roles to all links
• Customizer for style adjustment

Not the End

That’s it. That’s all I got!

I hope you found this post informative and hopefully you learned a thing or two on how to make your WordPress site more accessible for others. This post was never intended to be comprehensive instead focusing on simple features that you can apply immediately to your posts and pages. Don’t stop here and remember to continue your learning. An accessible website is not a race; it’s a marathon. Start slowly and improve as you go. If you have any questions, feel free to ask below and I’ll try to do my best to respond.

Additional Resources and References

• Accessibility.io
• WordPress Accessibility Guidelines
• How Thinking About Accessibility Can Lead to Success
• 4 Ways to Make Your WordPress Site More Accessible
• When Good Sites Go Bad: The Growing Risk of Website Accessibility Litigation
• Video: Accessibility Tools & Resources for WordPress
• Accessibility Department of Penn State <— This was one of my personal favorites.

The post 5 Ways to Make Your WordPress Site More Accessible appeared first on WebDevStudios.