HEADLESS CMS VS. TRADITIONAL CMS

1. HEADLESS CMS VS.
TRADITIONAL CMS
BUTTERCMS VS. WORDPRESS
BY JAKE LUMETTA

2. 1
2
EXAMINE HOW BUTTERCMS COMPARES TO A
TRADITIONAL CMS LIKE WORDPRESS
CLARIFY WHICH SCENARIOS MAY LEAD YOU TO
CONSIDER A HEADLESS CMS LIKE BUTTER
OUR GOALS
HEADLESS VS. TRADITIONAL

3. WHAT IS A
TRADITIONAL CMS?
HEADLESS VS. TRADITIONAL

4. A WAY TO
STORE CONTENT
A DASHBOARD
TO EDIT CONTENT
AN APPLICATION + THEME
TO DISPLAY THE CONTENT
A TRADITIONAL
CMS GIVES YOU
HEADLESS VS. TRADITIONAL
In a traditional CMS, everything is packaged together and the technical architecture tightly links the
frontend (design and layout) to the backend (code and content database).

5. 3
2
1
RAW DATA FOR THE BLOG POST IS PULLED FROM THE WORDPRESS MYSQL
DATABASE BY THE WORDPRESS PHP APPLICATION
THE WORDPRESS PHP APPLICATION PASSES THAT BLOG POST CONTENT (TITLE,
AUTHOR, BODY, PUBLISHED DATE, ETC) INTO THE WORDPRESS THEME
THE THEME TURNS THE RAW CONTENT INTO HTML THAT CONTAINS BOTH THE
CONTENT OF THE BLOG POST AS WELL AS THE DESIGN AND LAYOUT OF THE
ENTIRE PAGE AND SENDS THAT TO THE VISITOR’S BROWSER FOR VIEWING
WHEN YOU’RE USING WORDPRESS AND
A VISITOR VIEWS YOUR BLOG POST:

6. TRADITIONAL CMSs OFFER A DASHBOARD THAT GUIDES USERS THROUGH HOW TO CREATE
AND EDIT CONTENT
WORDPRESS DASHBOARD

7. WORDPRESS DASHBOARD
BY CLICKING ON THE OPTIONS ON THE LEFT, YOU CAN DO THINGS LIKE ADD A BLOG POST OR
PAGE TO YOUR WEBSITE

8. WHEN YOU SAVE YOUR BLOG POST IN THE
WORDPRESS DASHBOARD, IT GETS STORED
IN THE DATABASE FOR VIEWING LATER

9. WHAT IS A
HEADLESS CMS?
HEADLESS VS. TRADITIONAL

10. CREATE AND EDIT CONTENT, FREE
FROM PRE-PACKAGED THEMES
USE YOUR EXISTING TECH
STACK
PRESENT THE CONTENT YOUR WAY,
ACROSS
MULTIPLE TECHNOLOGIES
A HEADLESS
CMS LETS YOU
HEADLESS VS. TRADITIONAL
In a headless CMS, the frontend (design and layout) is decoupled from
the backend (code and content database).

11. DEVELOPERS MODEL OUT CONTENT IN A
HEADLESS CMS.
CONTENT EDITORS CREATE AND UPDATE RAW
CONTENT (TEXT, VALUES, IMAGES, ETC) IN A
USER FRIENDLY UI.
THE LAYOUT OR DESIGN OF THE CONTENT IS
NOT CONTROLLED BY THE HEADLESS CMS.
A HEADLESS CMS THEN TAKES ADVANTAGE OF
THE API TO DELIVER THAT RAW CONTENT
ANYWHERE: A WEBSITE, MOBILE APP,
WEARABLE—ESSENTIALLY ANYTHING
CONNECTED
TO THE INTERNET.

12. SIDE NOTE:
WHAT’S AN API?
HEADLESS VS. TRADITIONAL
API STANDS FOR APPLICATION PROGRAMMING INTERFACE.
THIS ARTICLE CONTAINS A GREAT EXPLANATION OF WHAT
AN API DOES, IN PLAIN ENGLISH.

13. WHAT IS
BUTTERCMS?
HEADLESS VS. TRADITIONAL

14. A ROBUST, FLEXIBLE,
API-BASED OR
“HEADLESS” CMS
WHAT IS
BUTTERCMS?
A WAY TO STORE, EDIT AND DISPLAY
YOUR CONTENT, YOUR WAY
A DEVELOPER-FRIENDLY APPROACH
TO CONTENT CREATION
HEADLESS VS. TRADITIONAL

15. 3
2
1
USE THE TECH STACK OF YOUR CHOICE TO QUERY OUR API TO PULL
CONTENT INTO YOUR OWN APP
DEFINE YOUR OWN CUSTOM CONTENT MODELS WITH BUTTER TO REPRESENT
WHATEVER YOUR MARKETING TEAM NEEDS TO MANAGE
POWER COMPANY BLOGS, SEO LANDING PAGES, CUSTOMER CASE STUDIES,
COMPANY NEWS AND UPDATES, EVENTS AND WEBINAR PAGES, EDUCATION
CENTERS, LOCATION PAGES, AND MORE
WHAT CAN
YOU DO
WITH
BUTTER?
HEADLESS VS. TRADITIONAL

16. BUTTERCMS PROVIDES USER-FRIENDLY DASHBOARD, MUCH LIKE WORDPRESS, FOR MANAGING YOUR
CONTENT
BUTTERCMS DASHBOARD

17. THE CONTENT API OUTPUTS YOUR CONTENT IN JSON FORMAT, WHICH IS CONSUMED BY YOUR APPLICATION TO DISPLAY
THE CONTENT IN YOUR OWN BRANDED THEME
CONTENT API

18. COMPARISON: WORDPRESS
VS. BUTTERCMS
HEADLESS VS. TRADITIONAL

19. WE TRIED USING THE WORDPRESS
API AS OUR API BACKEND, BUT IT
WAS TOO SLOW AND IMPACTING
OUR PERFORMANCE. BUTTERCMS
WAS A NO BRAINER.
DREW JOHNSON
CEO, APP PARTNER

20. SETUP
HOSTING
CODE COMPLEXITY
CMS is part of the foundation, with
website built “on top”
Use existing tech stack because
CMS is integrated
Requires a database + specific server hosting Delivered as SaaS, nothing to host
Content, CMS code, and website code
coexist and intertwine
Content exists separately and is
rendered via simple API calls
SECURITY
SITE APPEARANCE
FLEXIBILITY
Security upgrades and database
backups required
Delivered as SaaS, nothing to maintain
Use pre-packaged themes and templates
Complete control over how and
where your content appears
Must be built in a specific programming
language or framework
Integrates with any codebase

21. CHOOSING BETWEEN
HEADLESS + TRADITIONAL CMS
HEADLESS VS. TRADITIONAL

22. YOU DON’T HAVE AN EXISTING SITE
AND/OR AREN’T PICKY ABOUT THE
UNDERLYING TECHNOLOGY
WHEN A TRADITIONAL
CMS MAY BE A GOOD FIT:
YOU HAVE DEVELOPERS WHO ARE
SKILLED IN WORDPRESS AND/OR PHP
(OR YOU CAN OUTSOURCE)
HEADLESS VS. TRADITIONAL
YOUR WORDPRESS SITE WILL BE
STANDALONE AND YOU DON’T HAVE
OTHER CMS NEEDS

23. YOU HAVE AN EXISTING SITE WITH A
MODERN TECH STACK AND WANT TO
ADD CMS CAPABILITY
WHEN A HEADLESS CMS
MAY BE A GOOD FIT:
YOU HAVE DEVELOPERS WHO ARE
ALREADY FAMILIAR WITH YOUR CURRENT
TECH STACK
HEADLESS VS. TRADITIONAL
YOU WANT TO ENSURE CONTENT LOADS
QUICKLY, WITHOUT THE HEFTY
TRADITIONAL CODEBASES

24. YOU WANT IMPROVED SEO WITH
SUBDOMAIN VS. SUBDIRECTORY BLOGS
AND PAGES
WHEN A HEADLESS CMS
MAY BE A GOOD FIT:
YOU DON’T WANT TO WORRY ABOUT
HOSTING, MAINTAINING AND SCALING
A CMS
HEADLESS VS. TRADITIONAL
YOU WANT MAXIMUM CONTROL OVER HOW
AND WHERE YOUR CONTENT APPEARS ACROSS
MULTIPLE TECHNOLOGIES

25. 3
2
1 HOW YOU WANT YOUR DEVELOPERS SPENDING THEIR TIME
WHAT TECHNOLOGY YOUR DEVELOPERS ARE MOST
PROFICIENT WITH
THE AMOUNT OF VERSATILITY AND CONTROL YOU NEED FOR
YOU CMS
YOUR
DECISION
SHOULD
COME
DOWN TO:
HEADLESS VS. TRADITIONAL

26. CREATING + MANAGING
YOUR WEBSITE SHOULDN’T
BE SUCH A HASSLE
VISIT OUR SITE OR CONTACT SUPPORT@BUTTERCMS.COM TO LEARN MORE