Blog posts under the Headless WordPress tag https://webdevstudios.com/tags/headless-wordpress/ WordPress Design and Development Agency Mon, 15 Apr 2024 15:56:25 +0000 en-US hourly 1 https://wordpress.org/?v=6.6.2 https://webdevstudios.com/wp-content/uploads/2022/07/cropped-wds-icon.white-on-dark-60x60.png Blog posts under the Headless WordPress tag https://webdevstudios.com/tags/headless-wordpress/ 32 32 58379230 Spooky Signs That You Need a Headless WordPress Website: Unlocking the Potential of Decoupled CMS https://webdevstudios.com/2023/10/02/signs-that-you-need-a-headless-wordpress/ https://webdevstudios.com/2023/10/02/signs-that-you-need-a-headless-wordpress/#respond Mon, 02 Oct 2023 16:00:55 +0000 https://webdevstudios.com/?p=26583 Decoupled CMS architectures have gained frighteningly significant attention in the dynamic world of web development. Headless WordPress, in particular, has emerged as a powerful solution for those seeking enhanced flexibility, scalability, and performance. While Headless WordPress might sound scary, it actually empowers developers by allowing them to create innovative digital experiences by separating the frontend Read More Spooky Signs That You Need a Headless WordPress Website: Unlocking the Potential of Decoupled CMS

The post Spooky Signs That You Need a Headless WordPress Website: Unlocking the Potential of Decoupled CMS appeared first on WebDevStudios.

]]>
Decoupled CMS architectures have gained frighteningly significant attention in the dynamic world of web development. Headless WordPress, in particular, has emerged as a powerful solution for those seeking enhanced flexibility, scalability, and performance. While Headless WordPress might sound scary, it actually empowers developers by allowing them to create innovative digital experiences by separating the frontend and backend. In this article, we’ll explore the signs that indicate you might need a Headless WordPress website and instances when it may not be the ideal choice.

You Need a UX So Good It Gives Users Goosebumps

One of the primary signs that you need a Headless WordPress website is if you desire to provide an exceptional user experience. Headless architectures allow developers to utilize modern frontend technologies like React, Vue.js, or Angular to build highly interactive and responsive user interfaces.

Decoupling the frontend from the WordPress backend allows you to create faster, more engaging websites or applications that deliver a seamless user experience across multiple devices that’s so shockingly good you’ll think a wizard is in control.

Complex Content Delivery

An enterprise-grade site that demands complex content delivery across various channels or platforms is a compelling sign you need a Headless WordPress website. This was recently the case with the website project we completed for NBA G League.

Data from various APIs were integrated throughout the Headless WordPress Multisite Network of websites. Retrieving and displaying data from various sources becomes less complex with a decoupled frontend.

Hosting a decoupled frontend on the JAMstack virtually eliminates the threat of a WordPress server or database hack, since hackers don’t even know WordPress is installed in the first place. The backend, or admin dashboard in WordPress, can be hosted on a separate platform with unique authentication, keeping the separation between the public website and the admin dashboard disconnected.

When a traffic spike occurs, as is often the case during NBA games, they can rest assured that their site won’t go down because the frontend is nothing more than HTML, CSS, and JavaScript served by highly capable CDNs. There are no server-side rendering or database calls to slow things down.
Scalability and Performance

As your website grows, scalability becomes a crucial factor. Headless WordPress offers superior scalability compared to traditional WordPress setups. Since the frontend and backend are decoupled, you can independently scale each component based on its specific needs. Generally speaking, your admin dashboard will have less traffic, as only team members who need to manage the website and content will have access. The public view of the website, which all visitors see, handles the bulk of the load.

This flexibility allows you to handle high traffic volumes, optimize server resources, and ensure a smooth user experience even during peak times. Additionally, you can improve page load times and overall performance by offloading the frontend rendering to specialized systems or CDNs.

Customized Frontend Experiences

Headless WordPress is an excellent choice if your website demands a highly customized frontend experience. It enables developers to create tailored frontend interfaces without constraints imposed by traditional WordPress themes.

By leveraging modern frontend frameworks, developers can design unique, interactive user interfaces that align perfectly with their brand identity. Headless WordPress empowers developers to think beyond the traditional blog-style layouts and craft innovative and engaging digital experiences.

With headless CMS, your hands are free, and you are not locked to a specific framework or a library. You can build your frontend with React, Svelte, or anything that fits your requirements. You build the headless infrastructure once, and then you can tweak and use it in the future.
Integration with Third-Party Services

A sign that you need Headless WordPress is if your website relies heavily on third-party services or APIs. A headless WordPress setup can streamline integration processes. With the separation of concerns, developers can easily connect WordPress to various services or data sources, such as e-commerce platforms, CRM systems, payment gateways, or external databases.

This flexibility lets you leverage the best tools available in each domain while seamlessly integrating them into your WordPress-powered website.

When a Headless WordPress Website Might Not Be Ideal

Simple Content Publishing

A traditional WordPress setup might suffice if your website primarily focuses on content publishing and you don’t require complex frontend interactions. WordPress offers built-in themes and plugins that can cater to most content publishing needs without the complexity of a headless architecture.

Limited Development Resources

Headless WordPress, with its decoupled nature, often requires additional development resources. If you have limited time, budget, or technical expertise, opting for a traditional WordPress setup could be more practical.

Headless architectures generally involve more complex setups, custom development, and ongoing maintenance. You’ll need the help of an experienced team. Contact WebDevStudios.

Conclusion

A Headless WordPress website offers numerous advantages, such as enhanced user experience, flexible content delivery, scalability, and customization options. There are definite signs that indicate when you need a Headless WordPress website. However, it’s essential to carefully consider your specific requirements before embracing a headless approach.

If your website focuses primarily on content publishing without complex frontend interactions or if you have limited development resources, a traditional WordPress setup may be more suitable. By understanding the signs that indicate the need for a Headless WordPress website, you can harness the power of decoupled CMS to unlock new possibilities for your online presence. When you see the signs, contact WebDevStudios.

The post Spooky Signs That You Need a Headless WordPress Website: Unlocking the Potential of Decoupled CMS appeared first on WebDevStudios.

]]>
https://webdevstudios.com/2023/10/02/signs-that-you-need-a-headless-wordpress/feed/ 0 26583
5 Most Popular Blog Posts in 2021 https://webdevstudios.com/2022/01/04/popular-blog-posts-2021/ https://webdevstudios.com/2022/01/04/popular-blog-posts-2021/#respond Tue, 04 Jan 2022 17:00:00 +0000 https://webdevstudios.com/?p=24620 Recently listed among the top resources for the WP Owls newsletter, the WebDevStudios blog is a hot spot of information among members of the WordPress community. Whether you’re looking for a basic explanation of Headless WordPress, remote work inspiration, or a quick tip, our WordPress agency’s blog has got you covered. While we cherish all Read More 5 Most Popular Blog Posts in 2021

The post 5 Most Popular Blog Posts in 2021 appeared first on WebDevStudios.

]]>
Recently listed among the top resources for the WP Owls newsletter, the WebDevStudios blog is a hot spot of information among members of the WordPress community. Whether you’re looking for a basic explanation of Headless WordPress, remote work inspiration, or a quick tip, our WordPress agency’s blog has got you covered.

While we cherish all of our blog content, some pieces stand apart from the others, receiving the most web traffic and visits. So, we set out to discover of all the articles we published in 2021, which were the most popular blog posts. Here are the top five.

How to Use Dynamic Imports in Next.js

Content about Next.js proves to be very rewarding at WebDevStudios (WDS). We can’t get enough of it.

It was during some late-night performance testing when former WDS Frontend Engineer, Mike England, faced a challenge that inspired research. Once he found the solution to his problem, which was Dynamic Imports, Mike felt motivated to share it with the world.

In his blog post, Mike shares the basics of Dynamic Imports, how to set it up in Next.js, and advice on when to use it.

Read “How to Use Dynamic Imports in Next.js.”

Quick Tip: Sharing Data in Next.js with React Context

See? We told you Next.js content is a hot item on our website. That’s why this next article is among our most popular blog posts of 2021.

Lead Engineer, Darren Cooney, wrote this Next.js article, which is presented as a quick tip. However, don’t let that term fool you. The information in it is substantial.

Darren goes over the implementation of Next.js with React Context and breaks the setup down into three tasks. He walks you through each task and even addresses a scenario when React Context isn’t the right choice.

Read “Quick Tip: Sharing Data in Next.js with React Context.”

Using Next.js, WebDevStudios Built a 1,000 Page Headless WordPress Website

Not only is this piece of content one of our most popular blog posts of 2021, it also gets a lot of traction on Twitter. Although the headline might seem like clickbait, the story is true.

WebDevStudios really did build a 1,000 page Headless WordPress website. Director of Engineering, Greg Rickaby, relays the tale.

Greg begins by giving some background on our focus and experience before talking about the arrival of a client who required a Headless WordPress website.

He then dissects the project, mentioning both challenges and successes. Building a Headless WordPress website is a feat. Greg does a great job of covering the measures and steps our team took to bring this project to fruition.

Read “Using Next.js, WebDevStudios Built a 1,000 Page Headless WordPress Website.”

WordPress FSE and Block-Based Themes

Obviously, our virtual hallways are buzzing with chatter about Headless WordPress and Next.js, but it didn’t take long for full-site editing (FSE) to become as interesting a topic.

The technology sure caught the attention of Frontend Engineer, Alfredo Navas, who first began his journey by using his Five for the Future time to study it. Then, as any responsible member of the WordPress community would do, he shared what he learned in a blog post.

In his article, Alfredo doesn’t just write about FSE, he takes the reader through a step-by-step tutorial on creating a block-based theme.

Read “WordPress FSE and Block-Based Themes.”

Headless WordPress and Headless CMS

It was this time last year that the chatter around Headless WordPress really amped up. WebDevStudios didn’t want to jump on the bandwagon. We wanted to lead the conversation. That’s when Greg stepped up to the plate to write a high-level overview that explains what Headless WordPress and Headless CMS are and why any company may want to use them.

While the technology is certainly cutting-edge and fancy, Greg wants to ensure that key decision makers are not simply being seduced by a hot trend. He does a great job at presenting a clear rundown of Headless WordPress designed to help CEOs, CMOs, executives, and marketing directors decide whether or not going headless is the right decision for them.

Read “Headless WordPress and Headless CMS.”

The post 5 Most Popular Blog Posts in 2021 appeared first on WebDevStudios.

]]>
https://webdevstudios.com/2022/01/04/popular-blog-posts-2021/feed/ 0 24620
Company News – October https://webdevstudios.com/2021/10/26/company-news-october-2/ https://webdevstudios.com/2021/10/26/company-news-october-2/#respond Tue, 26 Oct 2021 16:00:35 +0000 https://webdevstudios.com/?p=24443 It’s eerie how quickly this month has passed. Alas, here we are nearly at the end of October. Client projects and internal Halloween activities kept WebDevStudios (WDS) busy. Additionally, talks, webinars, and social media events have, too. Peruse our latest company news. WordCamp US In light of the pandemic, WordCamp US (WCUS) remained virtual this Read More Company News – October

The post Company News – October appeared first on WebDevStudios.

]]>
It’s eerie how quickly this month has passed. Alas, here we are nearly at the end of October. Client projects and internal Halloween activities kept WebDevStudios (WDS) busy. Additionally, talks, webinars, and social media events have, too. Peruse our latest company news.

WordCamp US

This is a portrait photo of WebDevStudios Backend Engineer, Lax Mariappan.
Lax Mariappan, Backend Engineer

In light of the pandemic, WordCamp US (WCUS) remained virtual this year. Taking place on October 1st, WCUS featured two tracks, fresh content, and is reported to have had the most diverse group of new speakers.

WDS Backend Engineer, Lax Mariappan, is among the new speakers showcased at WCUS. Lax’s talk, “eCommerce Best Practices: Wooing Your Customers Is Easier Than You Think,” covered tips that any WooCommerce store owner can implement. If you missed out, Lax plans to write for the WDS blog on the same topic. Stay tuned!

WordCamp Nicaragua

Another WordCamp? Yup. This time, it was Frontend Engineer, Alfredo Navas, who dropped knowledge at WordCamp Nicaragua, October 8th.

Alfredo’s talk, “Full Site Editing and Block-Based Themes,” which was presented in Spanish, explained what WordPress full site editing is and how the new editor works. If you missed his talk and want to sharpen your Spanish-speaking skills, you can watch it below.


WordPress Social Learning Meetup

Website Specialist, Christina Workman, joined a panel of WordPress experts on October 14th. As a part of the WordPress Social Learning Meetup, which took place online, Christina and the other panelists discussed contributing to the WordPress Open Source project.

Remember, everyone is invited to contribute to WordPress, even those who are new to it. You can view the discussion below to learn more about how you can get involved as a contributor.

Headless WordPress Webinar

Announced just a couple of weeks ago, “Post Status Live: The Legend of the Headless Website” takes place this Thursday at noon Central Time. This free webinar will define Headless WordPress and help attendees ascertain as to whether or not the solution is right for their next website project.

Below are thee WDS Headless WordPress experts who will be featured at this exclusive Post Status-WebDevStudios collaborative webinar. Register with this link: wds.af/Headless-Webinar.

Photo of Brad Williams, smiling and looking directly at camera This is a portrait of Lisa Sabin-Wilson, WordPress pioneer. WordPress for Dummies author, Co-Founder, and COO of WebDevStudios. Photograph of Greg Rickaby, Director of Engineering at WordPress website design and development agency WebDebStudios.

 

The post Company News – October appeared first on WebDevStudios.

]]>
https://webdevstudios.com/2021/10/26/company-news-october-2/feed/ 0 24443
Headless WordPress Webinar https://webdevstudios.com/2021/10/12/headless-wordpress-webinar/ https://webdevstudios.com/2021/10/12/headless-wordpress-webinar/#respond Tue, 12 Oct 2021 16:00:28 +0000 https://webdevstudios.com/?p=24404 Don’t be spooked. The technology and strategy behind a headless content management system is not as scary as you think. That is why the WebDevStudios team of Headless WordPress experts are teaming up with Post Status for a free webinar on October 28, 2021 at noon Central Time. Headless WordPress Webinar “Post Status Live: The Read More Headless WordPress Webinar

The post Headless WordPress Webinar appeared first on WebDevStudios.

]]>
Don’t be spooked. The technology and strategy behind a headless content management system is not as scary as you think. That is why the WebDevStudios team of Headless WordPress experts are teaming up with Post Status for a free webinar on October 28, 2021 at noon Central Time.

Headless WordPress Webinar

“Post Status Live: The Legend of the Headless Website” is aimed to be an easy-to-understand virtual introduction to this hot technology that has everyone talking. Topics covered include:

  • Headless WordPress defined
  • Whether or not this solution is a fit for your needs
  • How and why a headless approach is faster, more secure and scalable
  • How the technology supports advanced functionality
  • Recommended list of tools, hosts, and partners for going headless

Headless WordPress Experts

Our panel of experts include:

Photo of Brad Williams, smiling and looking directly at camera This is a portrait of Lisa Sabin-Wilson, WordPress pioneer. WordPress for Dummies author, Co-Founder, and COO of WebDevStudios. Photograph of Greg Rickaby, Director of Engineering at WordPress website design and development agency WebDebStudios.

Who Should Attend

Anyone curious about going headless stands to benefit from this free webinar.

  • Marketers just hearing about Headless WordPress for the first time
  • Developers who have not worked with the technology before
  • Technologists looking for advice on implementation

Registration

Remember, this webinar is free and open to anyone.

Ready to go headless? You just might be. Register today for “Post Status Live: The Legend of the Headless Website,”  and let’s remove the fear from this growing website solution.

The post Headless WordPress Webinar appeared first on WebDevStudios.

]]>
https://webdevstudios.com/2021/10/12/headless-wordpress-webinar/feed/ 0 24404
Quick Tip: How To Disable Next.js Telemetry https://webdevstudios.com/2021/09/09/quick-tip-how-to-disable-next-js-telemetry/ https://webdevstudios.com/2021/09/09/quick-tip-how-to-disable-next-js-telemetry/#respond Thu, 09 Sep 2021 16:00:41 +0000 https://webdevstudios.com/?p=24252 Want to stop Next.js telemetry? Here is a quick tip. You can disable it via the command line or via the environment file. If you are looking only at the command, you can skip this background information section and scroll to the disable section. According to the Next.js team, they collect telemetry data to improve Read More Quick Tip: How To Disable Next.js Telemetry

The post Quick Tip: How To Disable Next.js Telemetry appeared first on WebDevStudios.

]]>
Want to stop Next.js telemetry? Here is a quick tip. You can disable it via the command line or via the environment file.

If you are looking only at the command, you can skip this background information section and scroll to the disable section. According to the Next.js team, they collect telemetry data to improve the developer experience and to ensure its growth. This makes it easier for them to find where the users get stuck and the possible areas to improve. Also, they have mentioned that their manual improvement process slowed down the growth of Next.js.

Let’s begin by looking at what telemetry is. Telemetry is the automatic collection of data to a remote system. It helps to get more information about the environment and to access the performance.

This differs slightly from users reporting bugs and feedback. As the configuration differs for every user, telemetry helps to understand the users’ needs better.

Next.js Telemetry

Enough of the backstory. Let’s see what data is being collected.

  • Next.js version and installed Next.js plugins
  • Environment information (operating system, continuous integration is enabled or not, number of CPUs)
  • Number of pages in the app
  • How long it takes to build (on the next build command)
  • Commands used (next dev, next export, or next build)

Debugging Telemetry Data

As a developer, you would like to see what Next.js collects, just like me.

You can debug telemetry data by adding NEXT_TELEMETRY_DEBUG=1 in your .env file. This allows you to check what data is being captured by telemetry. In debug mode, it doesn’t send data just outputs in the console.

For a quick demo, I’ve got this telemetry output from my existing Next.js app.

Next.js Telemetry Debug Info

Whoa, that’s a lot of information to me! It does not contain any sensitive information like file paths, errors, logs, and environment variables.

Disabling Telemetry

By default, telemetry is enabled. That means you can opt out if you don’t want to share any data. It should be the other way around (I get what you’re thinking!).

To disable telemetry, you can add NEXT_TELEMETRY_DISABLED=1 to your .env file.

You can also run the command npx next telemetry disable in the root of your project directory.

Make sure that it is disabled by checking the telemetry status.

Next.js Telemetry Check Status - Disable

That did the trick! For more information, visit Next.js official documentation page.

Did you find this quick tip useful? We’ve got a ton of valuable information on Next.js. Read our Headless CMS tutorials. 

The post Quick Tip: How To Disable Next.js Telemetry appeared first on WebDevStudios.

]]>
https://webdevstudios.com/2021/09/09/quick-tip-how-to-disable-next-js-telemetry/feed/ 0 24252
Why Is Headless WordPress Trending? https://webdevstudios.com/2021/07/13/headless-wordpress-trending/ https://webdevstudios.com/2021/07/13/headless-wordpress-trending/#respond Tue, 13 Jul 2021 16:00:10 +0000 https://webdevstudios.com/?p=24098 Marketers are infamous for jumping on trends. Good marketers investigate them first. Whether it’s fashion, up-and-coming authors, or the hottest TikTok challenge, marketers love to find ways to make trends work for their company or brand. For the past few years, website design and development companies have been talking about both Headless CMS and Headless WordPress. Read More Why Is Headless WordPress Trending?

The post Why Is Headless WordPress Trending? appeared first on WebDevStudios.

]]>
Marketers are infamous for jumping on trends. Good marketers investigate them first.

Whether it’s fashion, up-and-coming authors, or the hottest TikTok challenge, marketers love to find ways to make trends work for their company or brand. For the past few years, website design and development companies have been talking about both Headless CMS and Headless WordPress. Lately, however, the chatter has increased significantly and beyond the walls and virtual hallways of internet technologists, inspiring marketers across the various commercial industries to ask, “Why is Headless WordPress trending? Should we go headless, too?”

At WebDevStudios (WDS), our WordPress agency is super excited about Headless WordPress and all the potential that accompanies this solution. However, because we’re passionate about WordPress, our enthusiasm is a bit biased. It would simply be irresponsible to push our zeal for Headless WordPress onto anyone without first empowering them with proper information.

That’s the point of this blog post—to provide you with the background intel you need to better understand why Headless WordPress is trending. Below, I have gathered pertinent Headless WordPress articles together to help guide you through the basics, peppered with a bit of a dev-oriented nudge for a deeper understanding. Then, after beefing up your knowledge, we hope you’ll be able to decide for yourself if this is in fact a passing fad or the best digital solution for your brand.

Headless WordPress: Taking Posts Everywhere

This blog post by Frontend Engineer, Scott Anderson, was our first attempt to address Headless WordPress from a high-level point of view. We had written about the topic previously from a technical and developmental angle, but Scott’s article gives a very basic overview that helps marketers and website owners understand what Headless WordPress is and what it can do for you.

Read “Headless WordPress: Taking Post Everywhere” for some easy guidance on the subject.

Headless WordPress and Headless CMS

Director of Engineering, Greg Rickaby, dives deeper into the topic. He begins his piece by first explaining what Headless CMS is, addressing its popularity. Greg even explains the subtle nuance between a decoupled frontend and a true Headless WordPress website.

What’s especially meaningful about Greg’s article is that he defines Jamstack and then lists out the benefits of going headless. Bookmark “Headless WordPress and Headless CMS” to share with your team later. It’s one of our most popular blog posts.

Using Next.js, WebDevStudios Built a 1,000 Headless WordPress Website

Yes. It’s true. It sounds incredible, doesn’t it? Well, it is quite a feat—building a 1,000-page Headless WordPress website. Nonetheless, our team made it happen.

When the time comes to research a viable example of a headless project, read and share “Using Next.js, WebDvStudios Built a 1,000 Headless WordPress Website” to learn about the challenges and success.

Is Headless WordPress the Right Solution for You?

This is the million dollar question, isn’t it? Discovering new technological solutions is exciting for any marketing executive, but using one without proper research can spell disaster.

Before diving into any Headless CMS, we urge you to thoroughly investigate the platform, weigh the pros and cons, then talk to some experts. Is Headless WordPress the right solution for you? Maybe, but before you decide, read this blog post.

Explore Headless WordPress Now

The technology is already available for you to investigate and play with today. Take a look at some options below. Also, there’s an upcoming webinar you won’t want to miss.

WebDevStudios Next.js WordPress Starter

Earlier this year, Greg announced the release of our own Next.js WordPress Starter, which is available to the public and is used for headless projects. You can watch a video of Greg talking about this starter and its importance here.

You are invited to access the WDS Next.js WordPress Starter on GitHub.

WP Engine Atlas

Longtime WordPress partner, WP Engine, has developed an enterprise-grade Node hosting platform called Atlas. Atlas is a headless framework plugin that has been designed to lock down the frontend. Learn more about Atlas at the WP Engine website.

Headless Webinar

In partnership with Post Status, WebDevStudios’ team of Headless WordPress experts are presenting “The Legend of the Headless Website” on October 28, 2021 at noon Central. This webinar is FREE. Register now.

For more details on this upcoming event, read our announcement blog post.

Talk to the Headless Experts

Now, you should have a greater understanding as to why Headless WordPress is trending. You’re equipped with resources and knowledge to help you make an educated decision about it. Are you ready to go headless? Contact us. We’re ready to get you there.

The post Why Is Headless WordPress Trending? appeared first on WebDevStudios.

]]>
https://webdevstudios.com/2021/07/13/headless-wordpress-trending/feed/ 0 24098
Is Headless WordPress the Right Solution for You? https://webdevstudios.com/2021/06/17/headless-wordpress-the-right-solution/ https://webdevstudios.com/2021/06/17/headless-wordpress-the-right-solution/#respond Thu, 17 Jun 2021 16:00:48 +0000 https://webdevstudios.com/?p=23802 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 Read More Is Headless WordPress the Right Solution for You?

The post Is Headless WordPress the Right Solution for You? 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?

Photo by Pixabay from Pexels

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?

Photo by Element5 Digital from Pexels

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.

]]>
https://webdevstudios.com/2021/06/17/headless-wordpress-the-right-solution/feed/ 0 23802
Custom Post Type UI Supports WPGraphQL https://webdevstudios.com/2021/05/18/custom-post-type-ui-supports-wpgraphql/ https://webdevstudios.com/2021/05/18/custom-post-type-ui-supports-wpgraphql/#respond Tue, 18 May 2021 16:00:31 +0000 https://webdevstudios.com/?p=23870 In case you are not aware, our awesome engineers at WebDevStudios (WDS) are losing their heads. No, we haven’t been offending the Queen of Hearts. I’m talking about Headless WordPress and the possibilities presented by this method of content delivery, without being tied to the frontend. As such, Greg Rickaby, our Directory of Engineering, documented Read More Custom Post Type UI Supports WPGraphQL

The post Custom Post Type UI Supports WPGraphQL appeared first on WebDevStudios.

]]>
In case you are not aware, our awesome engineers at WebDevStudios (WDS) are losing their heads. No, we haven’t been offending the Queen of Hearts. I’m talking about Headless WordPress and the possibilities presented by this method of content delivery, without being tied to the frontend. As such, Greg Rickaby, our Directory of Engineering, documented how WebDevStudios used Next.js to build a 1000 page project. Since then, Evan Hildreth has provided a quick tip for adding custom meta fields to GraphQL. With that, I am pleased to continue this GraphQL topic with the announcement that with the release of version 1.9.0, Custom Post Type UI supports WPGraphQL.

Thanks to some well-placed WordPress hooks, we have technically had WPGraphQL support for a long while now, but never formally as part of the plugin itself. Jason Bahl, the creator and maintainer of WPGraphQL was also maintaining a Custom Post Type UI (CPTUI) extension that provided the UI fields to set and save WPGraphQL integration within the settings for post types and taxonomies registered with CPTUI.

Going into our March Five for the Future day, Greg informed me that Jason reached out about getting official integration for the two pieces, and after a touch of consideration, I agreed that it was time to merge them into one. Utilizing that day’s time, I set out to adapt and pull in Jason’s work into our primary plugin. If you are not using WPGraphQL at all with your site, or are perhaps not even sure what it is, you have nothing to worry about. We made sure to load the related changes only if the WPGraphQL plugin is available. If it is not, then you will only see the other 1.9.0 changes.

To help with transitions, we set up an admin notice for those with the now legacy CPTUI integration, letting the users know that they no longer need that original extension and can remove it without any loss of data. It should switch over seamlessly.

We are excited about the future of Headless WordPress and the types of creations developers around the world can produce with it. We are even more excited that users of Custom Post Type UI who are wanting to explore and try out Headless WordPress can now do so without having to leave us behind.

So what are you waiting for? Download or upgrade to Custom Post Type UI 1.9.0 and share with us what you are thinking about making in the comments below.

The post Custom Post Type UI Supports WPGraphQL appeared first on WebDevStudios.

]]>
https://webdevstudios.com/2021/05/18/custom-post-type-ui-supports-wpgraphql/feed/ 0 23870
Quick Tip: Add Custom Meta Fields to GraphQL https://webdevstudios.com/2021/04/15/add-custom-meta-fields-to-graphql/ https://webdevstudios.com/2021/04/15/add-custom-meta-fields-to-graphql/#respond Thu, 15 Apr 2021 16:00:38 +0000 https://webdevstudios.com/?p=23462 One of WordPress’ greatest strengths, at least in my opinion, is its ability to function as a general-purpose content management system. This is usually done through custom post types and custom meta fields. Putting them onto the website is as easy as adding a few pages to your theme. But what about making a headless Read More Quick Tip: Add Custom Meta Fields to GraphQL

The post Quick Tip: Add Custom Meta Fields to GraphQL appeared first on WebDevStudios.

]]>
One of WordPress’ greatest strengths, at least in my opinion, is its ability to function as a general-purpose content management system. This is usually done through custom post types and custom meta fields. Putting them onto the website is as easy as adding a few pages to your theme.

But what about making a headless WordPress site with GraphQL? How do you add your custom post types and custom meta fields to the GraphQL API?

It’s worth noting that our plugin for creating custom post types, Custom Post Type UI, now does this automatically! But if you’re not using a plugin to create your custom post types, read on to see the code behind the scenes.

I ran into this issue working on a personal website and using the WP GraphQL plugin. This website would be for my music, so I need a custom post type called “Album.”

View the code on Gist.

There are three extra arguments being passed to the register_post_type function: show_in_graphql, graphql_single_name, and graphql_plural_name. The first enables the custom post type to be added to the GraphQL API, and the last two give the name for the object:

GraphiQL IDE showing the album and albums objects

That takes care of our custom post type! But what about the custom meta field?

View the code on Gist.

This code is a little more complicated, so we’ll step through it:

  1. We hook into the graphql_register_types action. This will make sure that our next code is called at the right time.
  2. We call the register_graphql_field field with:
    1. The name of the object we are creating the field on (“Album”)
    2. The name of the field we are creating (externalLinks)
    3. Extra arguments for the function
  3. The extra arguments include a callback function that returns the value of the field.

For our callback function, we’re cheating a little bit. The meta field, find_links, can have multiple values. The purist approach would be to create a new GraphQL object and allow the links to be individually queryable. The pragmatic approach is to instead make our GraphQL field a String and encode the full meta field into a JSON object.

The GraphiQL IDE showing the results of the new custom field

The end result here is that we get the data out of WordPress and into our Next.js frontend where we can use it.

Displaying the contents of the custom meta field on the final website

You can see the full Next.js source code for my website on GitHub.

With a few tricks, it’s not hard to get the full power of WordPress into your Headless WordPress site. Using a decoupled frontend like Next.js means that the final website can be as complicated or as simple as it needs to be. And when it comes time to update or make new content, it’s as easy as… well, as easy as WordPress.

Want to see what we can do for you? Get in touch!

The post Quick Tip: Add Custom Meta Fields to GraphQL appeared first on WebDevStudios.

]]>
https://webdevstudios.com/2021/04/15/add-custom-meta-fields-to-graphql/feed/ 0 23462
Company News – March https://webdevstudios.com/2021/03/30/company-news-march/ https://webdevstudios.com/2021/03/30/company-news-march/#respond Tue, 30 Mar 2021 16:00:35 +0000 https://webdevstudios.com/?p=23455 March is coming to an end, and all kinds of activities are blooming at WebDevStudios (WDS). Our team has been working diligently on a variety of client projects, while still making time for talks, interviews, and Five for the Future (5FTF) contributions. Their hard work is being seen and noticed! We have some impressive company news Read More Company News – March

The post Company News – March appeared first on WebDevStudios.

]]>
March is coming to an end, and all kinds of activities are blooming at WebDevStudios (WDS). Our team has been working diligently on a variety of client projects, while still making time for talks, interviews, and Five for the Future (5FTF) contributions. Their hard work is being seen and noticed! We have some impressive company news to share; so let’s get to it.

WordPress 5.7 Contributor

Christina Workman, Support Technician

The newest version of WordPress was released earlier this month. Have you downloaded it yet? Support Technician, Christina Workman, was listed among the contributors. She assisted the development of this release by offering recommendations to the WordPress Events and News widget in the Dashboard.
 
 

Plugin Madness

This is the Plugin Madness 2021 logo.

Longtime favorite WordPress plugin, Custom Post Type UI (CPTUI), built and maintained by WebDevStudios, has made it to Torque Mag’s Plugin Madness again. This annual bracket-style competition pits plugins against one another and lets the public vote on their favorites. Last year, CPTUI made it all the way to the finals. Can we repeat that good fortune? With your votes, we think we can. Please vote for CPTUI at TorqueMag.io/PluginMadness daily.

Five for the Future Media Attention

WDS gets lots of support from the WordPress community for our consistent Five for the Future (5FTF) contributions, but it’s also nice when those contributions garner attention from WordPress publications, too.

Recently, “WordPress Tavern” featured two of our team’s 5FTF projects: Blogroll Block plugin by Support Engineer, Michael Beckwith, and Gutenberg Block Manager plugin by Lead Engineer, Darren Cooney. Read about Michael’s plugin here and Darren’s plugin here.

Photo of Michael Beckwith, Maintainn Support Technician A photograph of Darren Cooney, who works at WebDevStudios as a Lead Engineer. He is outdoors and smiling at the camera.

Interviews and Talks

Matt Report

COO, Lisa Sabin-Wilson, was recently a guest on “Matt Report,” a podcast for digital business owners hosted by Matt Medeiros. In her interview, Lisa shares the details of her role as our COO and talks about how our business has been impacted by the pandemic. Get some insight and inspiration by listening to this episode now.

This is the promotional image used for the Matt Report podcast episode featuring WebDevStudios COO, Lisa Sabin-Wilson.

Torque Social Hour

After announcing WDS’ Next.js WordPress starter, Director of Engineering, Greg Rickaby, was a guest on the “Torque Social Hour” where he talked about this project, which is available to the public, and why everyone is interested in Headless WordPress. You can watch his interview below.

Get Started

In a male-dominated industry, Senior Frontend Engineer, JC Palmes, shared her story of her career and how she went from reading Lisa’s book, WordPress for Dummies, to interviewing with Lisa and landing her current job at WebDevStudios during her guest appearance on “Get Started.” It’s a riveting conversation and destined to inspire anyone interested in a career as a developer. You can watch JC’s interview on Facebook.

Gatsby Conf

Technology lives worldwide, but access to technical information and education isn’t easily available in various languages. Frontend Engineer, Alfredo Navas, is setting a prime example of how to build a regional tech community that uses another primary language that isn’t English. He shared his experiences of how did it at Gatsby Conf. Watch his talk, “Building a Gatsby Community in Latin America,” below.

 

International Women’s Day North America Summit

As if contributing to WordPress 5.7 wasn’t enough, Christina found the time and energy to speak at the International Women’s Day North America Summit. She spoke on the importance of having an accessible website, emphasizing that doing so keeps your website readily available for access by all people. Watch her talk below.

 

We’re Hiring!

WebDevStudios has a plethora of job roles that need to be filled now. If you would love to be a part of a team that nurtures your growth and gives you the confidence, support, and motivation you need to speak at conferences and be interviewed on podcasts, you should look at our Careers page and apply for a position today.

The post Company News – March appeared first on WebDevStudios.

]]>
https://webdevstudios.com/2021/03/30/company-news-march/feed/ 0 23455