Afghanistan

Angola

Albania

United Arab Emirates

Argentina

Armenia

French Southern and Antarctic Lands

Australia

Austria

Azerbaijan

Burundi

Belgium

Benin

Burkina Faso

Bangladesh

Bulgaria

The Bahamas

Bosnia and Herzegovina

Belarus

Belize

Bolivia

Brazil

Brunei

Bhutan

Botswana

Central African Republic

Canada

Switzerland

Chile

China

Ivory Coast

Cameroon

Democratic Republic of the Congo

Republic of the Congo

Colombia

Costa Rica

Cuba

Northern Cyprus

Cyprus

Czech Republic

Germany

Djibouti

Denmark

Dominican Republic

Algeria

Ecuador

Egypt

Eritrea

Spain

Estonia

Ethiopia

Finland

Fiji

Falkland Islands

France

Gabon

Georgia

Ghana

Guinea

Gambia

Guinea Bissau

Equatorial Guinea

Greece

Greenland

Guatemala

Guyana

Honduras

Croatia

Haiti

Hungary

Indonesia

India

Ireland

Iran

Iraq

Iceland

Israel

Italy

Jamaica

Jordan

Japan

Kazakhstan

Kenya

Kyrgyzstan

Cambodia

Kosovo

Kuwait

Laos

Lebanon

Liberia

Libya

Sri Lanka

Lesotho

Lithuania

Luxembourg

Latvia

Morocco

Moldova

Madagascar

United States

We built the website for the client on WordPress. 

Burns and Wilcox

Web Development

We designed and built the www.dat.com website. 

The Learning Experience is the largest operator of daycare centers in the US. We designed and built this site on WordPress. 

The Learning Experience

Bulls Watchlist provides industry leading insights on the best stock options and crypto trade picks that give your investments the edge they need.

Exemplifi built the subscription billing platform for them that include e-commerce, payments, and text alerts. 

Bulls Watchlist

Graphic Design

Creative Strategy

Many Educational institutions recognize that kids today learn faster with immersive and hands-on experiences. At Exemplifi we recently launched a site for FOSS, a K-8 STEM Program offering solutions focusing on providing high quality science programs and materials. The site was built on WordPress and launched on the WPEngine and done with one of our agency partners.

FOSS

We designed and launched the website for Fast Radius. A cloud based manufacturing services provider.

Fast Radius

The go-to resource for endometriosis, a chronic and painful disease. We built this on the Adobe Experience Manager platform. 


AbbVie

The nation’s leading provider of public transportation contracting and management services. This site was built on Sitefinity. 

First Transit

HART provides convenient, affordable public transportation options tailored to Hillsborough County in Florida.
We built this site on Kentico

HART

Korea, Republic Of

The global website for FILA was built on Drupal. 


FILA

This amazing site for VANS lets you build your own shoes. The site was built in Adobe Experience Manager. 

Vans

Experiential Marketing

We built this Educational site for educating patients on value-based healthcare.
The site was built with WordPress.

Blue Cross

Cellebrite's digital intelligence platform enables forensic investigators to capture insights in today’s complex, digital world. We designed and built this site on WordPress. 

Cellebrite

A miracle drug for spinal muscular atrophy that is also very expensive. The site educates patients on how to get reimbursed by insurance.

Novartis

We recently launched two sites for Akcea Therapeutics, one for patients and one for healthcare providers, for their recently FDA approved drug, Tegsedi. This was built on WordPress, deployed on the WPEngine platform and has deep integrations into the Salesforce Marketing Cloud. 

Ackea Therapeutics

Epiq supports 90% of the top global law firms and half of the Fortune 100 in making and implementing better data- and technology-driven legal and business decisions.

We built their website on Kentico. 

Epiq Global

We build enterprise websites that deliver on our client’s marketing objectives and built to the latest web standards. Sites today have to be fast, personalized and multilingual. They have to drive leads and nurture relationships. Our sites do that well. 

We are experts in the industry-leading digital experience platforms such as Adobe Experience Manager, Sitecore, Drupal, WordPress and others. Our breadth enables us to build on our client’s marketing tech investments or recommend what is best for them. 

We redesigned the Reynolds website, with the latest Drupal stack and created a website with massive UI, UX, and performance improvements.

Exemplifi

We built a WordPress website for FOSS, leaders in revolutionary science curriculums for schools. As an enterprise website development company, we built this website with the focus of providing maximum detail to parents and teachers to get the most out of their children's and students' science curriculums.

We built a WordPress website for the insurance firm Burns and Wilcox, leaders in delivering comprehensive insurance services. As an enterprise website development company, we built this website with multiple service pages that looked great and led to major conversions.

We built a Drupal website for the Reynolds Brand of Kitchen products. As an enterprise website development company, we built this website in record time.

We built a WordPress website for Fidelity Payments, a leading provider of frictional digital payment services that streamline daily operations, lower costs, and fight fraud.  As an enterprise website development company, we built this website to be highly secure, and easy to use and navigate.

YouTube

Exemplifi on YouTube

User experience plays a crucial role in helping companies give their customers a great experience. One aspect of this is ensuring their websites cater to multiple languages and convey their messaging to each user's language preference.

Here's how we built a multilingual site on WordPress
#userexperience #wordpress #multilingual

One of the most useful features of Webflow is the ability to replicate components and rapidly accelerate your website development. Our latest insight digs deeper into this feature using Symbols in Webflow.

https://enterprise.exemplifi.io/3FEy2Dh

#webflow #websitedevelopment #websitedesign

Exemplifi is now #hubzone certified!

The HUBZone certification allows federal and state agencies the ability to utilize Exemplifi’s website development expertise within their budget and quotas. There is a genuine gap and desire in the government sector for a reliable, secure, and on-time delivery partner for #websitedevelopment and #websitemanagement services, and we believe we are primed to solve that problem.

#governmentcontracts #federalcontractors #governmentcontractors #Exemplifi

It’s official! Thanks to our people, we’re proud to have earned the Great Place to Work® Certification™. Our company culture is our top priority! #GPTWcertified #exemplifi #websitedevelopment 



If you're planning to take your website and business to the next level. You need an enterprise-level #wordpress website solution like #WPVIP. Our latest insight post gives you a step-by-step guide to migrating from #wpengine to WPVIP seamlessly. 

https://enterprise.exemplifi.io/3qPh137

Facebook

Exemplifi on Facebook

One of the most valuable features of Webflow is the ability to replicate components and rapidly accelerate your website development. Our latest insight digs deeper into this feature using Symbols in Webflow.

https://t.co/3xzIhfYeWL

#webflow #websitedevelopment #websitedesign

#Exemplifi is now #hubzone certified!

HUBZone certification lets federal and state agencies use our #websitedevelopment and #websitemanagement expertise within their budget and quotas.

#governmentcontracts #federalcontractors #governmentcontractors

It’s official! Thanks to our people, we’re proud to have earned the Great Place to Work® Certification™. Our company culture is our top priority! #GPTWcertified #exemplifi #websitedevelopment 

https://t.co/EzaHCq4QPw

If you're planning to take your website and business to the next level. You need an enterprise-level #wordpress website solution like #WPVIP. Our latest insight post gives you a step-by-step guide to migrating from #wpengine to WPVIP seamlessly. 

https://t.co/9puFAQleYV

RT @MarTechSeries: @ExemplifiSites Announces Certification as a California Green Business https://t.co/XZdEDnFuwr #martech #marketing #Tech…

Excited to announce a partnership with Contentful, the content platform for the digital-first era! https://t.co/0cCX1mN8lY

Excited to launch a new site for our client -- the largest operator of daycare centers in the country https://t.co/A5xchP2a4a

On the occasion of Global Accessibility Awareness Day, download our guide to improving your site accessibility. https://t.co/qRyDTkuQhG

Excited to be selected as a Top 50 WordPress Web Design Company!

https://t.co/tEHeo5s0qu

Excited to be selected a Top 50 WordPress Web Design Company! https://t.co/4Im16ChSNn

Twitter

Exemplifi on Twitter

One of the most valuable features of Webflow is the ability to replicate components and rapidly accelerate your website development. Our latest insight digs deeper into this feature using Symbols in Webflow.

Exemplifi is now HUBZone certified! :D

The HUBZone certification allows federal and state agencies the ability to utilize Exemplifi’s website development expertise within their budget and quotas. There is a genuine gap and desire in the government sector for a reliable, secure, and on-time delivery partner for website development and website management services, and we believe we are primed to solve that problem.

It’s official! Thanks to our people, we’re proud to have earned the Great Place to Work® Certification™. Our company culture is our top priority! #GPTWcertified #exemplifi #websitedevelopment

How to Migrate a Website from WPEngine to WPVIP

#WordPress is one of the most popular #CMS out there, and with the latest version - WordPress 5.9, it's taken a significant leap that helps #developers complete #WebsiteDevelopment projects in record time. 

Here is our analysis of WordPress 5.9

GoogleBusiness

Exemplifi on Google Business

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*NYDZjpO-rEd82vhz.jpg" /></figure><h3>Introduction</h3><p>Symbols are one of the most useful features of the <a href="https://www.exemplifi.io/insights/simultaneous-development-in-a-single-webflow-website">Webflow builder</a>. Symbols allow you to turn any element and its child element into a reusable component. This could include buttons, navigation bars, hero sections, card elements, footers, etc. Creating reusable elements like Symbols can greatly speed up the development of your project.</p><h3>Creation</h3><p>We can create symbols of two different types</p><h3>Identical content symbols:</h3><p>Identical symbols are used in scenarios where the layout and content of the symbol remains constant on each use of it. For example in navbars, footers, Sign up forms etc. To turn any component into a reusable symbol, all you need to do is right-click that element in your canvas and select the “Create Symbol” option in the dropdown and give it a name.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1000/0*HJ-sQjxS484iAZ37.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1000/0*2BoN0AT1vmsjWa68.png" /></figure><p>‍</p><h3>‍Unique content symbols:</h3><p>‍</p><p>These are symbols that retain their layout, but their content can be edited — text, images, links, video and rich text. This allows each instance of that symbol to be unique while retaining its original structure. This is done through the use of override fields.</p><p>‍</p><p>Upon selecting the “Create Symbol” dropdown option and giving your symbol a name, Webflow allows you to create override fields for that symbol. To do this, you simply click the plus icon under the Symbol Master section in the left-side panel.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*pJ_sl_rm0TG8WTxe.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Rn7bu2XMeVXA3IIJ.png" /></figure><p>You will then be able to select which field you want to be able to override (such as text), give a name to the field, and set its default value.</p><p>‍</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/490/0*JjLQJbgY_GOIZUAa.png" /></figure><p>Next time you add one of these symbols to your project, you will be able to give this field its own unique value.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*1vXwfwQ2SHcttl0a.png" /></figure><h3>Reuse</h3><p>The next time you want to use this symbol, go into your symbols library in the right-side panel by clicking the plus icon and selecting the Symbols tab and dragging the symbol into your canvas.</p><h3>Editing</h3><p>To edit a Symbol, double tap on the symbol and press enter. Now, users can make changes to the fundamental Symbol. Edits to the main Symbol affect each instance, unless specifically overridden in a Symbol instance.</p><p>‍</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*fe9KKJyAwOSFZ1TY.png" /></figure><h3>Unlinking</h3><p>To unlink a Symbol and make changes to it independently:</p><ul><li>Right-click the Symbol label</li><li>Choose unlink from Symbol Or , if the element is hard to select, right-click the element in the Navigator</li></ul><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*RtSLDnHRjJNSSeX0.png" /></figure><h3>Conclusion</h3><p>While symbols are a very useful <a href="https://www.exemplifi.io/insights/a-webflow-widget-to-display-filter-and-style-data-from-multiple-collections">feature of Webflow</a> they do come with their Pros and Cons</p><h3>Pros:</h3><ul><li>We can make reusable components with ease</li><li>We can override the content to create unique components while retaining uniformity in layout</li><li>We can change the styles and apply it to all the places in a website automatically</li><li>We can create nested symbols inside a symbol like buttons etc.</li></ul><h3>Cons:</h3><ul><li>We still cannot create overridable fields for styles like background color, color etc.</li><li>We cannot move symbols from one site to another in one click. If you need to move it, we would need to first unlink the elements and then copy each to another site and relink them to create the symbol</li></ul><p>If you liked this insight and want more updates, Sign up for our monthly <a href="http://exemplifi.io">Exemplifi Newsletter</a>.</p><p>‍</p><p><em>Originally published at </em><a href="https://www.exemplifi.io/insights/how-symbols-work-in-webflow"><em>https://www.exemplifi.io</em></a><em>.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=f211a8dd48a1" width="1" height="1" alt="">

Stories by Exemplifi on Medium

How Symbols work in Webflow

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*8NIbr5c311_R7TQA.png" /></figure><p>‍</p><p>In this post, we migrate one of our client websites — built on WordPress — from WPEngine hosting to the WPVIP WebOps platform. We outline the various steps involved in this relatively complex process that spans both Development and <a href="https://www.exemplifi.io/insights/effective-devops-for-enterprise-websites">DevOps</a> activities.</p><p>‍</p><p>If you are interested in the pros and cons of these platforms, you can check out any of our following posts:</p><p>‍</p><h3>The Website Infrastructure</h3><p>Our client is a B2B firm in the agricultural sector. The website we built for them helps them interact with their dealers and sales professionals.</p><p>‍</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*9XoajE76hyE9cTuH.png" /></figure><p>‍</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*ImHhxzXYTrdUXuOY.png" /></figure><p>‍</p><p>The website had a lot of relatively sophisticated capabilities:</p><ul><li>Woocommerce and product catalog management</li><li>Integration of the Product Catalog with a backend Product Information Management (PIM) system</li><li>Single Sign-On Capabilities with their internal authentication systems</li><li>Quiz functionality to enable sales professionals to narrow down their product selection</li></ul><p>‍</p><p>From a technical perspective, the WordPress site had the following components:</p><ul><li><a href="https://www.exemplifi.io/insights/whats-new-in-wordpress-5-9">WordPress 5.9</a></li><li>Woocommerce</li><li>ZingTree Plugin (for Quizzes)</li><li>MiniOrange Plugin for Single Sign On</li><li>Elementor and Gutenberg Builders</li><li>Custom Theme</li></ul><p>‍</p><p>The hosting of this site was on WPEngine. From a DevOps perspective, there were three environments for dev, staging, and production.</p><p>‍</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1018/0*DrXUau14jUg89g7T.png" /></figure><p>‍</p><p>More details about the configuration of this infrastructure will be provided in a later section below.</p><p>‍</p><h3>Step 1 of The Migration Process: WordPress</h3><p>The first step in the migration process is to cutover the WordPress site from <a href="https://www.exemplifi.io/wpvip-connector">WPEngine to WPVIP</a>.</p><p>‍</p><p>We leveraged the default WordPress export capability to export the site as an XML file.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*uh6U9gkv3RYPRXQ6.png" /></figure><p>‍</p><p>The next step is to import the site into WPVIP using the import utility of WordPress.</p><p>‍</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/993/0*2--yeKiDsAvq9EqQ.png" /></figure><p>‍</p><p>Upload xml file and click on <strong>Upload file and Import</strong> button</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/908/0*qKD8JvRkRXj0UAfg.png" /></figure><p>‍</p><p>Now, the site is up and running on WPVIP!</p><p>‍</p><p>The final step is to migrate the Plugin and Theme Setups. This is a little tricky as WPVIP does not allow installation of plugins through WordPress. You have to do this through Git. The steps involved here are:</p><p>‍</p><p>Clone the WPVIP site git repo into your local</p><p>‍</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/644/0*6PIlXOmGyngWqZlw.png" /></figure><p>‍</p><p>Copy all the plugins &amp; theme from the existing site and add it to the relevant directories in the git repo.</p><p>‍</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/613/0*_6bduGgyAuaZiRYs.png" /></figure><p>‍</p><p>Commit and push to the git repository. Now the plugins and themes should be visible on the WPVIP site. Go ahead and activate them and your good to go!</p><p>‍</p><h3>Step 2 of the Migration Process: Replicate WPEngine Settings on WPVIP</h3><p>‍</p><p>Now that we have successfully migrated the WordPress site to WPVIP, the next step is to replicate the WPEngine settings on WPVIP. These fall into the following categories:</p><ul><li>SSL Certificates</li><li>CDN</li><li>Redirect Rules</li><li>Git Permissions and Users</li><li>Backups</li><li>Access and Error Logs</li><li>Web Rules</li><li>Domains</li><li>sFTP Users</li></ul><p>‍</p><h3>Redirect Rules</h3><figure><img alt="" src="https://cdn-images-1.medium.com/max/810/0*4cVbM5XeIqFgYQf1.png" /></figure><p>‍</p><p>There are many places where you can implement redirect rules, including WPEngine (as shown above). To migrate these over to WPVIP, you should be aware that VIP doesn’t utilize Apache in its stack, so things like an .htaccess file containing redirects can’t be utilized. Otherwise, incorporating the rules into something like the <a href="https://wordpress.org/plugins/safe-redirect-manager/">Safe redirect manager plugin</a> would be the way to go.</p><p>‍</p><h3>CDN</h3><p>‍</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/783/0*szQ8WgL_6tBdBMiI.png" /></figure><p>‍</p><p>Based on your WPEngine plan, you have access to features such as their Content Delivery Network that is powered by Cloudflare. To achieve a similar functionality on WPVIP, no additional configuration is required to utilize their CDN. It comes out of the box!</p><p>‍</p><h3>Backups</h3><p>‍</p><p>WPEngine offers daily backups.</p><p>‍</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/619/0*3StdY56j6QiuGWVo.png" /></figure><p>‍</p><p>There is no way to migrate these to WPVIP, which has its own automated backup process. The general advice here is to keep the account active with WPEngine until their backups rotate out or there’s been enough of a backup history created on WP VIP to no longer require the “old backups”.</p><p>‍</p><h3>sFTP Users</h3><p>‍</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/982/0*rwgd5zQYM_opReDX.png" /></figure><p>‍</p><p>SFTP settings or users in WPEngine cannot be migrated to WPVIP as all the code deployed to the site must be committed and pushed to a provided GitHub repository.</p><p>‍</p><h3>Web Rules</h3><p>‍</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/698/0*8qUsW1CH6SaSyA64.png" /></figure><p>‍</p><p>You can configure your web rules in WPEngine and dictate whether you want to block certain IPs or implement geofencing.</p><p>‍</p><p>These rules can be reimplemented in WPVIP in the “IP Allow List” as shown below.</p><p>‍</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/569/0*LnyOC_7hileTh4m6.png" /></figure><p>‍</p><h3>Git Permissions and Users</h3><p>‍</p><p>Pointing your Git to WPVIP is very straightforward. For more advanced details around the ideal git workflow, you can read this post on <a href="https://docs.wpvip.com/technical-references/development-workflow/github-pr-reviews/">Github to WPVIP workflow</a></p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*McA9f1n7XoICQmsv.png" /></figure><p>‍</p><h3>SSL Certificates</h3><p>‍</p><p>WPEngine offers capabilities to use the SSL Certificates they offer or implement 3rd-Party certificates.</p><p>‍</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/857/0*ZipxQCEnT05zW6d0.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/563/0*3U5Ay-6SyGp3KoMw.png" /></figure><p>‍</p><p>You can transfer your 3rd-party certificates from WPEngine, over to WPVIP quite easily.</p><p>‍</p><h3>Domains</h3><p>WPEngine lets you point the WordPress site to your domains as well as establish any redirects that you need.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*axLo77i7cjoVi5Nq.png" /></figure><p>‍</p><p>These will need to be replicated in the WPVIP “Domains” section as well:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*dXub-IMYHou6Ewv1.png" /></figure><p>‍</p><h3>Going live with the new infrastructure</h3><p>After you have executed Step 1 and Step 2 above, your site is ready to cut over from WPEngine to WPVIP. To launch your site on the new infrastructure, do the following:</p><ul><li>Cancel the SSL certificate in WPEngine</li><li>Update the old WP URLs to the default WPEngine ones</li><li>Change DNS details in the DNS provider (Eg. <a href="https://www.exemplifi.io/insights/how-to-transfer-your-domain-from-godaddy-to-namecheap">GoDaddy, Namecheap</a>, or Route 53) to point to WPVIP</li><li>Remove the domain from WPEngine</li><li>Add the domain in WPVIP and add SSL certificate to the domain</li></ul><p>‍</p><p>And you are all set now with your new site!</p><p>‍</p><h3>The Exemplifi WPVIP Connector</h3><p>Have you outgrown your WPEngine infrastructure and are now looking to up-level your game by moving to WPVIP? Are you concerned about the effort involved in making this shift? With our 1-week migration guarantee, you can rest easy. We are a WPVIP Enterprise Partner and our team of WordPress experts will make this process quick, easy and painless. To learn more about our solution, you can visit <a href="https://www.exemplifi.io/wpvip-connector">https://www.exemplifi.io/wpvip-connector</a></p><p>‍</p><h3>Summary</h3><p>We love WordPress and we love building websites that help companies grow. Growing companies need a reliable Platinum tier website infrastructure that can handle the heavy demands of a rapidly scaling business. WPVIP is the premier WebOps platform across the whole gamut of performance, security, uptime and customer service by far.</p><p>‍</p><p>With that in mind, we wrote this article to help curious readers understand the steps involved in migrating from WPEngine to WPVIP. While the process can be complex and tricky, we decided to go one step ahead and created a <a href="https://www.exemplifi.io/wpvip-connector">WPVIP connector tool</a> to make the process fast and hassle-free.</p><p>‍</p><p><em>Originally published at </em><a href="https://www.exemplifi.io/insights/migrating-a-website-from-wpengine-to-wpvip"><em>https://www.exemplifi.io</em></a><em>.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=22217c7cb0e7" width="1" height="1" alt="">

Migrating a Website from WPEngine to WPVIP

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*OiSJAaZxuREzMR-7.jpeg" /></figure><p>‍</p><p>WordPress 5.9 represents the most significant release of Gutenberg features since the initial Gutenberg launch in WordPress 5.0. In addition, WordPress 5.9 includes a lot of enhancements and bug fixes.</p><p>‍</p><p>In this post, we unpack what’s new and noteworthy in WordPress 5.9, so you can get the most out of the latest version of WordPress.</p><p>‍</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/736/0*Cme6TmF3ASSvW-2c.png" /></figure><h3>Introducing the Site Editor (Beta)</h3><p>‍</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*s3NObP3-Dzugg1s3.png" /></figure><p>‍</p><h3>Full Site Editing</h3><p>‍</p><p>WordPress 5.9 will continue to build upon the site editing features first introduced in WordPress 5.8 earlier this year. In addition, this release adds a lot more features to the site editing experience.</p><p>The editor has three options.</p><ol><li>Site Editor: The Full Site Editing mode understands the site’s structure and provides ways to modify Menu items located on the left. Even more, settings are available from the top toolbar.</li><li>Template Editor: If you would like to edit one of the Global templates like Single Post, 404, Page, Archive, simply click on the WordPress logo in the upper left-hand corner.</li><li>Template Parts Editor: Template parts editor for editing and creating global elements/template parts.</li></ol><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*VQP9nf-vxVBkOeu0.png" /></figure><p>‍</p><h3>Twenty Twenty-Two Default Theme</h3><p>‍</p><p>Twenty Twenty-Two will be built for complete site editing (FSE) first with a goal of all theme styles being editable through Global Styles. WordPress 5.9 will likely be required to use Twenty Twenty-Two, a block theme.</p><p>Twenty Twenty-Two will use a variety of color palettes, page templates, headers, and footers for endless customization. You’ll be able to change fonts, image designs, and more on a site-wide level. It’s usually pretty easy to tell when a website uses a default theme, it sounds like Twenty Twenty-Two might change that.</p><p>‍</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/756/0*1VUSqOjHQ41g3wO1.png" /></figure><p>‍</p><h3>Global Styles</h3><p>New tools are coming that allow you to change design elements like typography, spacing, and colors across your entire site at once. More information and additional previews of the new interfaces are below.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*fRpMgP6aQKFN0XII.jpeg" /></figure><p>‍</p><h3>Block Editor Improvements + New Blocks</h3><h3>More Powerful List View</h3><p>List view is one of the most useful features of the block editor, especially if you are using more complex layouts (like with Kadence blocks.) List view had several limitations, but WordPress 5.9 dramatically improves usability.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Fn119BBQbodoR6RT.jpeg" /></figure><p>‍</p><h3>More Settings and Controls for Blocks</h3><p>Finally! WordPress 5.9 bakes in new typography tools, flexible layout controls, and finer control over details like spacing, borders, and more for blocks. Previously, block settings were just so limited, especially if you wanted to fine-tune details.</p><p>For example, the default paragraph block now includes color options for text color with a hex preview, background color, expanded options for typography such as line height, letter case, letter-spacing, etc.</p><p>‍</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*5r7LQ_-psPqOVV4i.png" /></figure><p>‍</p><h3>New Blocks</h3><p>‍</p><p>In 5.9. You have some really useful new theme blocks that you can use to manage the content and look of the site. Navigation, Template Part, Header, Footer, Post Author, Next Post, Previous Post, Post Comments, Term Description, and Archive Title can all be easily modified. So, it’s getting much easier to get the final result you want.</p><p>‍</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/352/0*vMvC7hHIObpnlmy2.png" /></figure><h3>Performance Improvements</h3><p>WordPress 5.9 includes several improvements for performance. You can check out all the performance improvements in WordPress 5.9 here, including some impressive speed comparisons.</p><h3>Block Inserter Performance Improvements</h3><p>The block inserter got a good performance boost! You’ll likely see a difference when searching and inserting blocks with speed and ease.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*_AtQtzfREN56G0Ik.png" /></figure><h3>Improvements to Lazy-Loading Images</h3><p>Lazy-loading images were introduced in WordPress 5.5 and later expanded to also cover iframes in WordPress 5.7. In the upcoming WordPress 5.9 release, the implementation for both received some improvements to increase performance.</p><h3>Improvements for Developers</h3><p>WordPress 5.9 has many developer-focused updates. Here are a few noteworthy features and enhancements in this update, along with notes for devs in the WordPress 5.9 field guide.</p><h3>Resources for Building Block-Based Themes</h3><p>WordPress 5.9 introduces block-based themes that use blocks to define the templates that structure your entire site. The new templates and template parts are defined in HTML and use the custom styling offered in theme.json.</p><p>The theme-experiments repository has an Empty Theme that is an excellent boilerplate to start your first block theme from. There is also a command-line script to help generate a block theme to get you started:</p><p>Block Theme Overview explains the basics of block themes and the structure and format of the themes.</p><p>Create a block theme is a full tutorial walking through creating a block theme.</p><p>Global settings &amp; styles documents how to use the theme.json to add styles to your themes.</p><h3>Updates for Settings, Styles, and theme.json</h3><p>WordPress 5.9 has changed theme.json v1 introduced in WordPress 5.8 to a v2. The existing v1 theme.json files will still work as expected, and they’ll be transformed at runtime to the v2 format by WordPress.</p><h3>New Hooks and Functions to Work with Posts, Post Types, and Taxonomies</h3><p>In WordPress 5.9, new hooks and functions are added to help developers work with Posts, Post Types, and Taxonomies.</p><h3>Summary</h3><p><a href="https://www.exemplifi.io/insights/whats-new-in-wordpress-5-8-with-screenshots">WordPress 5.8</a> came with many feature updates, but WordPress 5.9 has taken the CMS to the next level. WordPress 5.9 builds upon the latest release making a consumer-friendly CMS into a more developer-friendly CMS. Bringing together performance improvements, blocks and full site editing features are the major game changers of this latest version.</p><p>‍</p><p><em>Originally published at </em><a href="https://www.exemplifi.io/insights/whats-new-in-wordpress-5-9"><em>https://www.exemplifi.io</em></a><em>.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=76827dd57ae5" width="1" height="1" alt="">

What’s New in WordPress 5.9

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*dS8JHGXXsmxW8hE9.png" /></figure><p>‍</p><p>In this post we explore the various steps involved in migrating a site from Craft CMS to WordPress. The design of the site remains exactly the same while the underlying CMS is migrated.</p><h3>Overall Site Settings</h3><p>First we migrated the site settings. <strong>General </strong>contains details such as sitename and logo. <strong>Routes </strong>is a listing of all redirects. <strong>Users </strong>also contains passwords and associated roles.</p><p>Craft Settings</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*J0YOw0ftWsn-8xCl.PNG" /></figure><p>‍</p><p>WordPress Settings</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*LDb_vDht8h1osrSv.PNG" /></figure><h3>Content</h3><p>The first step is to replicate all the custom fields and groupings that have been created in Craft. We used the WordPress Custom Post Type (CPT UI) plugin to create custom fields and groupings. Then we replicated all the fields manually.</p><p>‍</p><p>Craft Fields</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*FsYMd5gc4tI1OHiK.PNG" /></figure><p>‍</p><p>WordPress Fields</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*7QE6zFvh88ldP68n.png" /></figure><p>‍</p><p>The next step is to replicate the actual content. Unfortunately, this is a relatively time-intensive task. We looked at programmatic ways to extract and import data. However, they were more trouble than they were worth.</p><p>‍</p><p>Craft Content</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*GUrdWAgDq83mBOw4.png" /></figure><p>‍</p><p>WordPress Content</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*RlLJiBIkzilKIIb5.png" /></figure><p>‍</p><p>Migrating the assets was relatively easy. All we had to do was to copy the folders and import them into WordPress. Of course, the folder structure had to be replicated manually.</p><p>‍</p><p>Craft Assets</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*2nDnylRn5DXNA57o.JPG" /></figure><p>‍</p><p>WordPress Assets</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*cM0WSLZ5s18TYQuy.JPG" /></figure><p>‍</p><p>Then we migrated all the taxonomy of categories and tags.</p><p>‍</p><p>Craft Taxonomy</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Q5Eb3-KKauNfEiMa.JPG" /></figure><p>‍</p><p>WordPress Taxonomy</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*TbiB7eLGsSxfvjGO.JPG" /></figure><p>‍</p><p>Finally we replicated all the navigation menus.</p><p>‍</p><p>Craft Menus</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Tj_KmZAHiNt_4Ai-.JPG" /></figure><p>‍</p><p>WordPress Menus</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*eAFN4YUQy1pGynjU.JPG" /></figure><p>‍</p><h3>Templates</h3><p>After the content was migrated, the final step was to rebuild all the templates that power the various pages of the site. Although both Craft and WordPress are PHP powered sites, there was no easy way to reuse the templates. Craft uses a Twig templating engine while WordPress doesn’t. This is a fundamental difference and we had no choice but to rebuild all the templates.</p><p>‍</p><p>Craft Template</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/477/0*rh2DkUbZEMyGA7nB.JPG" /></figure><p>‍</p><p>WordPress Template</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/477/0*1Yy3OxjbEUxo7Fze.JPG" /></figure><p>‍</p><p>Other Activities</p><p>This post covers only the development-oriented aspects of such a migration. There are a ton of other activities that are involved:</p><p>If you’d like to know more we’d love for you to join us on Linkedin at <a href="https://www.facebook.com/ExemplifiSites/">Exemplifi</a>, Facebook at <a href="https://www.facebook.com/ExemplifiSites/">ExemplifiSites</a> or Twitter at <a href="https://twitter.com/exemplifisites">ExemplifiSites</a>.</p><p>‍</p><p><em>Originally published at </em><a href="https://enterprise.exemplifi.io/36suV3S"><em>https://www.exemplifi.io</em></a><em>.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=1585335fa47d" width="1" height="1" alt="">

Migrating from Craft CMS to WordPress

<figure><img alt="" src="https://cdn-images-1.medium.com/max/797/0*J9PruOfe-vB2CliF.png" /></figure><h3>Introducing SSO</h3><p>Single sign-on (SSO) is an authentication scheme that enables users to log into multiple websites or software applications using a single ID and password. We are all familiar with this: every time we log into a website using functionality such as “Login with your Google Account,” “Login with your Facebook account,” or “Login with your Linkedin Account,” we are using the SSO capabilities offered by Google, Facebook, and Linkedin.</p><p>‍</p><p>Here is a sample screen from Medium with multiple SSO login options.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/836/0*uiemtvmNPi37Q27y.png" /></figure><p>When we go under the hood, here’s how the magic happens.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*no2lrna1Mlggvu9K.png" /></figure><p>User credentials and other identifying information are stored and managed by a centralized identity provider (IdP). An identity provider is the one that authenticates a user after he enters his credentials.</p><p>A service provider, on the other hand, provides useful services to an application or website that has authentication needs. Service providers rely on identity providers to assert the identity of a user. They do not authenticate users but instead request authentication decisions from an identity provider.</p><p>In an enterprise setting, we have SSO providers such as Microsoft Azure, Okta, Google, and many others. The most popular standard for these SSO providers is called Security Assertion Markup Language or <strong>SAML </strong>for short. SAML is an open XML-based standard that enables the communication between identity providers (IdP) and service providers (SP).</p><h3>SSO in WordPress</h3><p>In this post, we will primarily look at enabling SSO for websites built on WordPress. We look at two common scenarios:</p><ol><li>Users that come to the WordPress website have to get authenticated by a central SAML provider. We will illustrate this using G-Suite, which acts as a Service Provider (SP).</li><li>Users that come to the WordPress website get authenticated by a central WordPress website (where all the user/password information is stored). In this example, WordPress acts as both an Identity Provider (IdP) and a Service Provider (SP)</li></ol><p>There are many ways to implement SSO in WordPress. We will illustrate this using <a href="https://miniorange.com/">miniOrange, </a>which is a very popular SSO plugin that provides flexible ways to configure the SP and IdP settings. The plugin comes with out-of-the-box integrations for multiple service and identity providers making it a great tool to set up SSO on any website.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*m3YNj-fY0u0qPxFA.png" /></figure><p>When users visit a website, they get the option to log in with multiple IDPs</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/836/0*HDBMhYXZWa-7U6QQ.png" /></figure><p>Let’s consider a login scenario using Google</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/475/0*7WDheCE2JzS4-wJ9.png" /></figure><p>Using their Google ID, the user can access a completely new website without ever going through the hassle of having to register or create a new ID on the website.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*vzPXyE-Q2bCezuHY.png" /></figure><p>To configure Google as an IDP, follow the steps below:</p><p>login with your G Suite administrator account and navigate to the Web and mobile apps section under Apps.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*uq_A34saX29buDSc.png" /></figure><p>Click on the Add App button, then select the Add Custom SAML apptab to create a new SAML app in the dropdown.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*kNd_eQjYl70Qqyjj.png" /></figure><p>You can now enter the details for your custom SAML app.</p><p>Additionally, you should download the Metadata and copy the G Suite details likeSSO URL, Entity ID, and Certificate.These will come handy in the future and help configure the add-on manually. Next, go ahead and enter the details from the Service Provider Metadata tab in the SAML SP plugin.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/697/0*tsWHKHWZd8lQfDNY.png" /></figure><h3>Attribute Mapping</h3><p>Click on the AddMapping button and select user fields in the Google Directory. Once donen map them to the Service Provider attributes and Click on the Finish button.</p><h3>Activating the SSO</h3><p>This step requires a quick reset by first going to the SAML Apps again and turning it OFF for everyone and then selecting ON for everyone to activate the SSO. You have now successfully configured G Suite / Google Apps as SAML IdP (Identity Provider) for creating G Suite / Google Apps SSO login into your WordPress (WP) site.</p><p>Now to setup WordPress as a Service Provider, Go to the miniOrange SAML SSO via WordPress and select Google Apps as IDP</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/105/0*1dHI3QQO68E7mshZ.png" /></figure><p>Scroll down to Configure Service Provider and click on the Upload IDP Metadata File/XML button. Follow the instructions and input your IDP name and your setting informations will autofill in their respective fields. You have now successfully configured Google Apps as the IDP and you can enable the SSO experience illustrated earlier.</p><p><strong>Implementation using WP as an IDP</strong></p><p>To set up SSO between 2 WordPress sites, you will need to install two plugins. On the Identity Provider (IDP) site, install the <a href="https://wordpress.org/plugins/miniorange-wp-as-saml-idp/">Login using WordPress Users Plugin</a>. On the Service Provider (SP)site, install the <a href="https://wordpress.org/plugins/miniorange-saml-20-single-sign-on/">WP SAML SSO Login Plugin</a>.</p><h3>Setup WordPress as IDP</h3><p>Once the plugins are installed, You can see the information reflected as shown in the screenshot below.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*qTW4cyv8KUPHKO0-.png" /></figure><p>Next, go ahead and select the IDP Metadata and scroll down to download the XML file.</p><h3>Setting up WordPress as SP</h3><p>Login to your WordPress account and access the miniOrange dashboard. From there, select WordPress as the IDP from the Service provider setup page.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/732/0*U2x9SB7BjRyF5GPt.png" /></figure><p>Next , select the Configure Service Provider option and upload the IDP Metadata File/XML from the previous step. Once uploaded, all the setting fields are automatically filled up and you are all done!</p><h3>Conclusion</h3><p>Single Sign-on ( SSO ) has been one of the most underlooked features of Web 2.0. We all take it for granted that websites should seamlessly integrate our credentials across pages and sites, but there was a time when this wasn’t possible. In short, SSO is the single key you need to open multiple vaults. There are numerous service providers and identity providers that can be used to create a seamless SSO process for your website users. With Google’s ubiquitous presence across the web, we feel it works best to create an unhindered customer experience to leverage SSO capabilities on WordPress.</p><p>If you liked this insight and want more updates, we’d love for you to join us on Linkedin at <a href="https://www.linkedin.com/company/exemplifi/">Exemplifi</a>, Facebook at <a href="http://exemplifisites">ExemplifiSites</a> or Twitter at <a href="http://exemplifisites">ExemplifiSites</a>.</p><p>‍</p><p><em>Originally published at </em><a href="https://www.exemplifi.io/insights/integrating-single-sign-on-capabilities-with-wordpress"><em>https://www.exemplifi.io</em></a><em>.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=ff83bff55f83" width="1" height="1" alt="">

Integrating Single Sign-On Capabilities with WordPress

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*zFLXjCTJsn9xjmps.png" /></figure><p>Kentico is a versatile headless CMS and can host content in multiple languages (cultures). Multilingual websites have separate versions of pages for each language. Kentico allows you to offer culture versions of the website to visitors based on various settings.</p><p>You can find a list of available cultures in the Localization application on the Cultures tab. All major cultures are provided by default. You can assign cultures to websites and translate the content to the respective languages.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Jm7NtbUTThXEA550.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*l6lxX-uz31bPAnj2.png" /></figure><h3>Configuring multiple cultures for website</h3><p>Open the <strong>Sites </strong>application and edit your site. You can assign cultures using the Add cultures button in the culture tab.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*uzkTclrVy3-BA32l.png" /></figure><p>Now in the Pages application, you can see the culture option enabled below the content tree. You can switch to other languages as follows.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/831/0*p6lxYL5KGlVlTNdz.png" /></figure><h3>Configuring the default content culture</h3><p>If we create a website based on a web template, the site uses the culture of the given web template. All default Kentico web templates use <strong>English — United States</strong> as their default culture.</p><p>We can change this default settings in</p><p>Settings -&gt; content -&gt; Default content culture</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Ss5XwaADgl00nfga.png" /></figure><h3>Control user access for specific cultures.</h3><p>Kentico allows you to control users to access specific language versions of pages.</p><p>In the <strong>Users </strong>application, select the user whom you want to control access. In the Language tab click on <strong>User can edit the following languages </strong>and click on add languages button to select desired cultures. Now the user can able to edit only the selected languages page in the page application.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*7LoP3RWS9-o4Epsw.png" /></figure><h3>Managing cultures</h3><p>Users with the Global administrator privilege level can manage all cultures in the Localization application on the Cultures tab. To display only UI cultures, choose Yes in the Is UI culture filter and click Search.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*swiB8miSqdzq2ujT.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*nE7fC9eFMHaUWigV.png" /></figure><h3>Editing Multilingual website content</h3><p>In the Pages application on a multilingual website, you can see the language selector below the content tree. Use the selector to switch between language versions of the currently selected page.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/297/0*iiSFydHl-jWBI2OD.png" /></figure><h3>Creating multiple language versions of pages</h3><p>In the Pages application. Select the root page in the content tree and switch to French culture. Since the French version of the page does not exist yet, you can create it through one of the following ways:</p><p>Choose to Copy content from another language.</p><p>Select English — United States.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/545/0*kO6cwjxxhEQCOO8t.png" /></figure><p>The French version of the root page has now been created. You can now translate other pages on the website:</p><h3>Configuring translation services</h3><p>You can automate or outsource the translation of website content using translation services. Translation services allow you to create multilingual sites without having to edit the text in the Kentico administration interface. The system automatically ensures the transfer of data between the website’s pages and translation providers. Translation data is exported and imported via files using the standard XML-based <a href="http://en.wikipedia.org/wiki/XLIFF">XLIFF </a>format.</p><p>There are two general categories of translation services:</p><p>The main purpose of translation services is to create language versions of the website’s pages based on the content in another language. There are several different ways to submit pages for translation.</p><h3>Enabling translation services</h3><p>We can enable the translation service functionality in the <strong>Settings </strong>application</p><p>Select the <strong>Content -&gt; Translation services category</strong> and Check <strong>Enable translation services</strong>.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*iAsfKD0OyTsJ_-sD.png" /></figure><h3>Configuring content for translation</h3><p>Translation services can process the following types of page content:</p><ul><li>Content of editable regions on Portal Engine pages</li><li>Values of page fields (entered on the Form or Content tab of the Pages application)</li><li>The properties of web parts and widgets placed on the given page</li><li>Page file attachments (without their <a href="https://docs.xperience.io/k12sp/developing-websites/managing-responsive-images">image variants</a>)</li></ul><h3>Configuring page fields</h3><p>To choose which page fields are sent for translation, Open the Page types application.</p><p>Edit the specific page type and switch to the Fields tab. Select the field you wish to configure and enable or disable the Translate field flag. Translation is only available for fields with the Text, Long text or File Data type.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*0x9PAoUCNODZC0Rf.png" /></figure><h3>Summary</h3><p>Kentico is a great CMS for companies that have a multi-lingual audience and whose offerings serve a large base of cultures. Creating a great user experience includes having a website that can easily communicate with consumers in their language of choice. Kentico allows developers to build websites that span multiple languages and automatically adjust to users from multiple geographies and provides translation aswell. At Exemplifi, we work extensively with Kentico and other headless CMS and have built multiple websites using its versatility.</p><p>If you liked this insight and want more updates, we’d love for you to join us on Linkedin at <a href="https://www.linkedin.com/company/exemplifi/">Exemplifi</a>, Facebook at <a href="http://exemplifisites">ExemplifiSites</a> or Twitter at <a href="http://exemplifisites">ExemplifiSites</a>.</p><p><em>Originally published at </em><a href="https://www.exemplifi.io/insights/launching-international-sites-on-kentico"><em>https://www.exemplifi.io</em></a><em>.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=8640251b084f" width="1" height="1" alt="">

Launching International Sites on Kentico

<figure><img alt="" src="https://cdn-images-1.medium.com/max/804/0*Nq2rm4I7PpNRFr-J.png" /></figure><h3>Introduction</h3><p>If you are facing difficulty picking the right page builder for your website, then this article is for you. We take two powerful page builders — Oxygen and Elementor and look into each thoroughly. We provide a complete comparison of each builder and their exclusive features, ease of use, pricing plans, and pros &amp; cons.</p><h3>Elementor and Oxygen Builder: Getting Started &amp; Ease of Use</h3><p>‍</p><h3>Elementor</h3><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Ggv6QGNFvlbsLzUB.png" /></figure><h3>Oxygen Builder</h3><p>‍</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/800/0*Ql4oh7CoPpgZ4rON.jpeg" /></figure><h3>Features of Elementor and Oxygen builder</h3><p>‍</p><h3>Elementor</h3><p>‍</p><h3>Oxygen</h3><p>‍</p><h3>Pros and Cons of Elementor and Oxygen builder</h3><p>‍</p><h3>Elementor</h3><figure><img alt="" src="https://cdn-images-1.medium.com/max/980/0*1gNBt3TIzacdWBc2.PNG" /></figure><p>‍</p><h3>Oxygen Builder</h3><figure><img alt="" src="https://cdn-images-1.medium.com/max/984/0*ojmAjEYAW8_DbCBG.PNG" /></figure><h3>Pricing of Elementor and Oxygen builder</h3><h3>Elementor Pricing</h3><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*LzBkkI24x--ef4XX.png" /></figure><h3>Oxygen builder Pricing</h3><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*JCdg1a-a_HTLAKrI.png" /></figure><h3>Conclusion</h3><p>When it comes to Oxygen VS Elementor, there’s no clear winner. If you’re looking for simplicity, Elementor wins. If you’re looking for speed and flexibility, Oxygen wins. Both are incredibly well designed, and can definitely be learned to create stunning websites.</p><p>If you liked this insight and want more updates, we’d love for you to join us on Linkedin at <a href="https://www.linkedin.com/company/exemplifi/">Exemplifi</a>, Facebook at <a href="http://exemplifisites">ExemplifiSites</a> or Twitter at <a href="http://exemplifisites">ExemplifiSites</a>.</p><p><em>Originally published at </em><a href="https://www.exemplifi.io/insights/oxygen-builder-vs-elementor"><em>https://www.exemplifi.io</em></a><em>.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=7c270cc58152" width="1" height="1" alt="">

Oxygen Builder vs. Elementor

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*SQbJZ6HZlEtKJud5.png" /></figure><h3>The Client’s Use case</h3><p>Our client is a mid-sized tech enterprise and decided to move their online recruiting platform to <a href="https://www.greenhouse.io/">Greenhouse</a>. Companies use the Greenhouse product to create job postings, organize them by departments and office locations and market these jobs on various social platforms. Candidates can also submit their job applications.</p><p>Greenhouse offers several ways in which clients can use their product. The most basic and plain vanilla option is to simply embed an iframe on your website. With this option, you will have limited control over the look and feel. At the high-end, Greenhouse offers a set of APIs — for jobs, departments, locations, and job descriptions — that clients can consume and integrate into a completely custom branded experience.</p><p>Our client decided to leverage the high-end option. Not only did they go with a completely branded experience, but the design was also extremely interactive and necessitated the use of a powerful reactive JS framework such as Vue.</p><p>Since the client’s website runs on WordPress, we had to build a solution on it. It had to deliver a completely branded and interactive experience to the users while integrating deeply with Greenhouse APIs.</p><h3>The Technical Background</h3><p>The careers website had three primary templates:</p><p>The Home Page was designed as a classical component-driven template. This would be built in WordPress, and when the candidates click on the CTAs, they are taken to the job listing page.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*2rMej9UASivgxK4W.png" /></figure><p>The Job Listing Page was designed as a very interactive experience with the following elements:</p><ul><li>A robust search engine</li><li>A faceted filtering experience to shortlist jobs by departments or locations</li><li>The job listing would change dynamically based on the filters selected.</li></ul><p>It is useful to note that this complete page would be API-driven.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*DDb3MJPRDsV1EWJq.png" /></figure><p>Finally, the job description page would show the details of a selected job, and the candidate would submit their job application as well. Again, this is an entirely API-driven page.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*zfOP4tggdsHybqHn.png" /></figure><h3>Why did we need a reactive JS framework like Vue?</h3><p>A website like this has a lot of interactive functionality that goes beyond traditional website interactions. For example, when the user clicks on a list of depts on the left, several things happen:</p><ul><li>The list of filters on the left changes</li><li>The list of jobs on the right changes</li><li>The List count is updated</li><li>The pagination is changed</li></ul><p>There are lots of such interactions on this site. We need reactive JS frameworks to build interactive applications such as this. Traditional programming languages like PHP would be insufficient and cumbersome. The most popular reactive frameworks are VueJS and ReactJS. We selected VueJS to build this.</p><p>Complex user interactions involve the manipulation of a lot of HTML Document Object Model (DOM) elements. When a user interacts with the page, the browser has to update these DOM elements and render them on the screen. Updating the DOM using traditional PHP and javascript is cumbersome.</p><p>VueJs operates utilizing the “Virtual DOM” concept. Vuejs updates the virtual DOM instead of the real DOM when the stage changes. and offers the ability to control the timing at which the Virtual DOM is rendered. This makes the HTML page rendering pretty quick and improves application performance.</p><h3>Integrating Vue with WordPress</h3><p>We integrated Vue with WordPress by including the <a href="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">vue.js</a> file in the <strong>wp_enqueue_scripts </strong>function. This function will load the vuejs files in the page header properly, reduce page load time and help avoid conflicts with other themes and plugins. We integrated the Greenhouse application in a similar fashion. You can see the code snippet below.</p><p>‍</p><pre>function func_load_vuescripts() { wp_register_script( &#39;wpvue_vuejs&#39;, &#39;https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js&#39;); wp_register_script( &#39;wpvue_vue-routerjs&#39;, &#39;https://unpkg.com/vue-router/dist/vue-router.js&#39;); wp_register_script(&#39;greenhouseapi&#39;, get_stylesheet_directory_uri() .&#39;/wp-vue/greenhouse.js&#39;, array(), &#39;1.0.0&#39;, true); } add_action(&#39;wp_enqueue_scripts&#39;, &#39;func_load_vuescripts&#39;);</pre><p>‍</p><p>We then initialize the vue app within the greenhouse.js file as follows:</p><pre>var app = new Vue({ el: &#39;#wp-vue, data: { message: &#39;Wordpress Vue Integration!&#39; } })</pre><p>Within the WordPress template file, we can render the vue elements by declaring a wrapper div with “id wp-vue” as follows.</p><p>This straightforward template syntax initializes the vue app in WordPress. The data and the DOM are now linked, and everything is now reactive. We can test this by opening our browser’s JavaScript console and set app.message to a different value. When you now view the template, you will see the message like below:</p><p>‍</p><h3>“Wordpress Vue Integration!”</h3><p>The greenhouse jobs section is componentized into four separate vue components.</p><p>The vue components we will create can be rendered by declaring inside the wrapper div as follows:</p><p>‍</p><p>All the four components are wrapped under the wp-vue div and can communicate to each other through the declared vue properties.</p><h3>Consuming the Greenhouse JSON APIs with Vue</h3><p>There are three main Greenhouse APIs that we connect with : Jobs, Departments and Locations</p><p><strong>Jobs API</strong></p><p>URL : <a href="https://boards-api.greenhouse.io/v1/boards/datsolutions/jobs">https://boards-api.greenhouse.io/v1/boards/datsolutions/jobs</a></p><p>This API returns JSON data in the format shown below:</p><p>‍</p><pre>&quot;jobs&quot;: [ { &quot;absolute_url&quot;: &quot;https://careers.dat.com/jobs/4182734004?gh_jid=4182734004&quot;, &quot;data_compliance&quot;: [ { &quot;type&quot;: &quot;gdpr&quot;, &quot;requires_consent&quot;: false, &quot;retention_period&quot;: null } ], &quot;internal_job_id&quot;: 4126201004, &quot;location&quot;: { &quot;name&quot;: &quot;Beaverton, OR, USA&quot; }, &quot;metadata&quot;: [ { &quot;id&quot;: 4200041004, &quot;name&quot;: &quot;Employment Type&quot;, &quot;value&quot;: &quot;Regular&quot;, &quot;value_type&quot;: &quot;single_select&quot; }, { &quot;id&quot;: 4209572004, &quot;name&quot;: &quot;Full-time/ Part-time&quot;, &quot;value&quot;: &quot;Full-time&quot;, &quot;value_type&quot;: &quot;single_select&quot; } ], &quot;id&quot;: 4182734004, &quot;updated_at&quot;: &quot;2021-11-16T16:25:31-05:00&quot;, &quot;requisition_id&quot;: &quot;272&quot;, &quot;title&quot;: &quot;Accountant I&quot; }, } ]</pre><p>‍ <strong>Departments API</strong></p><p>URL <a href="https://boards-api.greenhouse.io/v1/boards/datsolutions/departments">https://boards-api.greenhouse.io/v1/boards/datsolutions/departments</a></p><p>The JSON data format is shown below:</p><p>‍</p><pre>&quot;departments&quot;: [ { &quot;id&quot;: 4023682004, &quot;name&quot;: &quot;Billing Services (DAT730)&quot;, &quot;parent_id&quot;: 4023681004, &quot;child_ids&quot;: [ ], &quot;jobs&quot;: [ { &quot;absolute_url&quot;: &quot;https://careers.dat.com/jobs/4168749004?gh_jid=4168749004&quot;, &quot;data_compliance&quot;: [ { &quot;type&quot;: &quot;gdpr&quot;, &quot;requires_consent&quot;: false, &quot;retention_period&quot;: null } ], &quot;internal_job_id&quot;: 4114273004, &quot;location&quot;: { &quot;name&quot;: &quot;Beaverton, OR, USA&quot; }, &quot;metadata&quot;: [ { &quot;id&quot;: 4200041004, &quot;name&quot;: &quot;Employment Type&quot;, &quot;value&quot;: &quot;Regular&quot;, &quot;value_type&quot;: &quot;single_select&quot; }, { &quot;id&quot;: 4209572004, &quot;name&quot;: &quot;Full-time/ Part-time&quot;, &quot;value&quot;: &quot;Full-time&quot;, &quot;value_type&quot;: &quot;single_select&quot; } ], &quot;id&quot;: 4168749004, &quot;updated_at&quot;: &quot;2021-11-16T16:24:58-05:00&quot;, &quot;requisition_id&quot;: &quot;215&quot;, &quot;title&quot;: &quot; Collections Specialist &quot; },] } ]</pre><p>The data from the Greenhouse API is consumed by the javascript <strong>fetch( )</strong> method and the response data can be structured based on our needs. In the code below, we show how to consume the Jobs JSON data with the fetch( ) method and assign the response data to the Jobs Component property.</p><p>‍</p><pre>fetchJobList(){ let url = &#39;https://boards-api.greenhouse.io/v1/boards/datsolutions/jobs?content=true&#39;; fetch(url).then((response) =&gt; { return response.json() }).then((data) =&gt; { datJobs = []; data.jobs.forEach(function (job) { var jobtitle = job.title; jobDepp = []; job.departments.forEach(function(department) { jobDepp.push(department.name); }); job[&#39;depp&#39;] = jobDepp; datJobs.push(job); }); this.jobs = datJobs; console.log(&quot;jobs:&quot;, this.jobs); }); },</pre><p>‍</p><p>‍</p><p>These props will later be passed to the child component to display the Job list. The same approach will be used to display the Department and Location listing.</p><h3>Delivering an interactive experience with Vue</h3><p>As discussed earlier, a website like this has a lot of interactive functionality that goes beyond traditional website interactions. Let us once again, consider the scenario when the user clicks on a list of depts on the left, several things happen:</p><ul><li>The list of filters on the left changes</li><li>The list of jobs on the right changes</li><li>The List count is updated</li><li>The pagination is changed</li></ul><p>Before the click the screen looks like this:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*O06SOA5QfiRBAQBK.png" /></figure><p>After the click the screen looks like this:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*3GgItN9pyUFTsv5X.png" /></figure><p>As you can see, several things have changed:</p><ul><li>The checkbox is highlighted</li><li>We now see a “Clear All Filters” link</li><li>We see the selected checkbox value show up as a blue button</li><li>On the right, you can see that the list of jobs has been filtered by location.</li></ul><p>If we now select another filter, this is what we see:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*BmSfPQZ2JL16lls4.png" /></figure><p>The list of jobs is now filtered by both location and job category.</p><p>Let us now review the architecture behind delivering this highly interactive functionality. The overall structure is as follows:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/984/0*j20p9jj6ILGOFAYg.png" /></figure><p>As described earlier, the department, search, location and jobs components operate with the overall Greenhouse.js main component. The <strong>filterbyDepartment</strong>( ) and <strong>filterbyCountry</strong>( ) methods filter the jobs array by the selected Department and Country values.</p><p>‍</p><pre>methods: { filterByDepartment(jobs){ if(!this.checkednames.includes(&#39;All&#39;) ){ return jobs.filter(f =&gt; this.checkednames.some(value =&gt; f.depId.includes(value))); }else{ return jobs; } }, filterByCountry(jobs){ if(!this.checkedcountry.includes(&#39;All&#39;) ){ return jobs.filter(f =&gt; this.checkedcountry.includes(f.location.name)); }else{ return jobs; } }, }, computed: { fetchjobs: function() { return this.filterByDepartment(this.filterByCountry(this.filterBySearch( this.jobs))); }, }</pre><p>See below for the sequence of actions that is triggered when a user clicks on the checkbox, and the refreshed list of jobs is shown.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*t1anbf338NRu0fPA.png" /></figure><p>A similar sequence runs and the element “Clear All Filters” is shown along with the selected filter values:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1007/0*3LN8YEijr1waCPwT.png" /></figure><h3>Summary</h3><p>Greenhouse has been a reliable recruiting platform for almost a decade now, and we wanted to deliver the best-customized and interactive recruitment experience to our client utilizing the best of Greenhouse’s services and building upon it with Vue.JS’s flexibility.</p><p>In this project, we’ve built a customized recruitment page with functionalities of filtering, branding, mobile responsiveness, and quick loading times coupled with a user interface that provides a seamless experience for applicants and recruiters alike. Combining the powerful capabilities of VueJS’s and Exemplifi’s expertise we were able to customize and integrate multiple APIs to give our clients the desired outcome and help empower their HR teams.</p><p>If you liked this insight and want more updates, we’d love for you to join us on Linkedin at <a href="https://www.linkedin.com/company/exemplifi/">Exemplifi</a>, Facebook at <a href="https://www.facebook.com/ExemplifiSites">ExemplifiSites</a> or Twitter at <a href="https://twitter.com/exemplifisites">ExemplifiSites</a>.</p><p><em>Originally published at </em><a href="https://www.exemplifi.io/insights/how-we-built-a-careers-website-on-wordpress-with-vue-js-and-greenhouse"><em>https://www.exemplifi.io</em></a><em>.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=761f735911e6" width="1" height="1" alt="">

How we built a Careers Website on WordPress with Vue.js and GreenHouse

<figure><img alt="" src="https://cdn-images-1.medium.com/max/700/0*nOvnxNON1kmVpm6g.png" /></figure><p>When you think of CMS, it usually levitates to — a seamless visual experience of toolsets that help comprehensive workflow in a collaborative environment. Here I’d like to point at both sides of the coin in a CMS, <strong>CMA</strong> — content management application, and <strong>CDA</strong> — content delivery application. CMA refers to the front-end visual editing experience, CDA is the compilation of content into a presentable format.</p><p>WordPress is one such famed label that meets the eye. Going above and beyond, Drupal, Sitecore, DNN, and AEM are enterprise-scale complex CMS. Visual builder tool sets reduce the dependency bottlenecks of vanilla CMS editors with a decoupled team workflow.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*FXRnADVz7tsCa-c8.png" /></figure><p>Vanilla CMS</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*XKICL1y3Q3bNoW1X.png" /></figure><p>Visual Builder CMS</p><p>Visual builders solve one problem, tempting new uninvited guests. Even a modest CMS without visual builders can handle the most complex of data if architectured correctly with pros and cons. It may sound vague, naive, and even ephemeral to say visual builders are not the golden goose. To the readers’ disbelief, even the most powerful visual builders can fizzle.</p><h3>Acquia vs. Site Studio vs. Cohesion DX8</h3><p>Acquia provides cloud-based Drupal solutions rolled into a single platform. Not a while ago I mentioned <strong>Cohesion DX8</strong> in an insightful post on<a href="https://www.exemplifi.io/insights/component-design-in-drupal"> Component Design in Drupal</a>. DX8 was just a PoC research exercise back then. In Sep 2019, Acquia acquired the UK-based Cohesion along with its flagship enterprise-grade low-code, no-code product DX8 for Drupal.</p><p>DX8 was rebranded as Site Studio in Acquia — clever marketing roadmap! This acquisition brought all the power and UX of DX8 into the Acquia universe. DX8 (for legacy namesake) was eons ahead in the LC-NC (low-code/no-code) race, knocking out some of the favored visual builders. One of its strongest suits — is the hybrid user interface that’s not fully visual yet expressive in context. Check out this layout canvas interface:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*hdKlQKk2RhyCNPNj.png" /></figure><p>DX8 Layout Canvas</p><p>Layout canvas is your graphical playground, laid out as moveable color-coded blocks comprising components, component content aka global templates, and helpers with configuration extensions. DX8 revolves around the guiding design principles of component-based layouts, upstream it’s deriving appearance from a style guide which is also built right into DX8.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*qVFBBGGTIPU79lkJ.png" /></figure><p>DX8 Website Settings</p><p>Bridging gaps across team workflows bilaterally, the DX8 website setting controls the foundations of a theme style guide. This enables slick upstream or downstream changes at any given lifecycle of a project — precise architecture. Putting all of them in the queue bundle:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*YA16Dg6GWkwa6hI9.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*qdjWodrzENBTPDs9.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*HaDbnnE1z1WoEc5R.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*poXpPtgt_sqIaDJY.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*JB62uVy0arfQSFO4.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*FkKQ-gsTl3uTgg_5.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*FOqmCNiGCTqWxyVY.png" /></figure><p>To better understand this architecture let’s dive into a mind-map diagram. Gaining the perfect design and development workflow covering both static and dynamic variations, easing the traversal as well as domino effects of recursive changes upstream or downstream.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*ZzcPy70ttL6L5g0p.png" /></figure><p>DX8 Setup</p><p>It was a surreal experience altogether! About halfway through testing, the sunsets somewhere, not due east or west. DX8 cranks up a lot of power and flexibility to built robust dynamic sites, in rare cases, you’ll find the native way much more appealing, practical, and convenient.</p><h3>DX8 vs. Layout Builder — A Client Usecase</h3><p>The client <a href="https://www.reynoldsbrands.com/">— <strong>Reynolds Kitchen Brand</strong></a> site was due for a makeover — built on Drupal 7, CCK, and Paragraphs module, majority of native templating, resting upon customized modules. Migrating from Drupal 7 to Drupal 9 wasn’t going to be easy in any way. Lot has changed since Drupal 7, figuratively — the core requirements, APIs, module development, dependency manager (Composer), layout builder, and Symphony framework.</p><p>The team was excited to evaluate Site Studio (DX8) as the lead front-end visual tool on a live project before the D9 layout builder resonating on a similar note. See below:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*aXLRfxa4Hkw2nQmY.png" /></figure><p>D9 Layout Builder</p><p>Undoubtedly, Site Studio is a much more sophisticated tool than layout builder. In many test dry-runs, it shined out with flying colors. Site Studio enables a seamless web-based interface to create, configure and style your components — something missing in layout builder out-of-the-box. Building a static component is as easy as:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*u9PfIzDZv18Vufiq.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Z-YtLen_BlvwCrVT.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*XAIrAjWy3Tm4-pQV.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*E--AaUm_M2yD4Ro2.png" /></figure><p>All in three easy steps — build the layout, expose the configuration options, set the option values via field names, tokens, or SCSS variables — pretty neat, huh! We went a step further, setting out building dynamic components based on views hoping that the engineering nightmare is over.</p><h3>Dropping the DX8 Ball — More is Less</h3><p>The cost is great, the price is high… Take all you know and say goodbye 🎶 — The Blue Cafe by Chris Rea, closely rhymed with what was about to uncover. Views are largely supported in Site Studio; from building pages, blocks, embeds to exposing filter forms, Site Studio takes over the entire file-based templating in views through several hoops.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*gS23s01gdrMOQqGl.png" /></figure><p>Looks formidable? well, it was a giveaway to revisit the early architectural decision of flying with Site Studio because you’re tightly roped with WYSIWYG templating i.e. fields, content, or nodes, display modes, or views have to use the visual template builder instead of piled up file-based templates. Let’s examine the actual flow in Site Studio to create a view-based component:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*HjqHDGEYZrXpbYdH.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*o-i_zmgHoQtb7mvr.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*YjdfCDhotteHgL6T.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*miGED8xJO1CtGp3s.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*PBPHI0skRnW94adp.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*nCu9idnfXRmxsU2m.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*lpdQiylClC-0R7Hm.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*yS2nfDN345KFP71c.png" /></figure><p>Turns out this approach is too farfetched but it’s the only documented way in Site Studio. For one dynamic view component, you have to go through 5–6 steps, which would roughly take just one mistake or one missing step resulting in a fatal breakdown. The outcome (without styling):</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*wJrJXYE0YP5omTXS.png" /></figure><p>Dynamic View Component in Site Studio</p><p>All of this constituted one surmise, views templating should be hybrid i.e. allow file-based templates where applicable for greater control or reveal view fields, the node object, or just plain Drupal fields in the template builder as tokens in essence. Currently, the context and tokens inside the template builder are restricted to the view object or view result set among others. You can however find the contextual fields in Display mode templates.</p><p>The possibility to overcome this with custom development cannot be ruled out or if there’s any un-documented way to go hybrid. We had to cut the knot at some point after investing a significant amount of time and resources. On a closing note — <strong>Site Studio</strong> would otherwise prove to be a superior solution for lightweight dynamic sites.</p><p>‍</p><p>If you liked this insight and want more updates, we’d love for you to join us on Linkedin at <a href="https://www.linkedin.com/company/exemplifi/">Exemplifi</a>, Facebook at <a href="https://www.facebook.com/ExemplifiSites">ExemplifiSites</a> or Twitter at <a href="https://twitter.com/exemplifisites">ExemplifiSites</a>.</p><p><em>Originally published at </em><a href="https://www.exemplifi.io/insights/why-we-stopped-using-acquia-site-studio"><em>https://www.exemplifi.io</em></a><em>.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=196e3ec40356" width="1" height="1" alt="">

Why we stopped using Acquia Site Studio

<figure><img alt="" src="https://cdn-images-1.medium.com/max/912/0*I0rqnUVJqRS_xJF7.png" /></figure><p>Our client Banistr is a technology startup that is a marketplace for interior designers. Their vision is to scale the business to millions of users and hundreds of thousands of interior designers. The website needed to be super high-performance and built on a modern tech stack. In addition, the content created here would be syndicated in multiple different sites, mobile apps and such.</p><p>‍</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*d2dTIgmKFRtL-89P.png" /></figure><p>The client requirements guided us into a modern headless CMS tech stack along with reactive JS frameworks, and to avoid the traditional CMS approaches.</p><p>After assessing multiple options, we selected the following tech stack:</p><ul><li><a href="https://www.exemplifi.io/platform/contentful">Contentful as the Headless CMS</a></li><li>VueJS as the front-end JS framework</li><li>NuxtJS is a front end framework built on top of VueJS which provides server side rendering (SSR).</li></ul><h3>An Overview of the Tech Stack</h3><h4>Contentful</h4><p>Contentful is a next generation headless CMS where you can manage the content of your website, a mobile app or any other platform that displays content. Using JSON API at its core, your content becomes a real world object representation with relationships. In general, Contentful can do everything that a traditional CMS can do.</p><p>As an <a href="https://www.contentful.com/developers/docs/references/content-delivery-api/">API-centric</a> platform it means that you as a developer get your data in and out of the Contentful platform using only API calls. It also brings the microservices and SOA (Service Oriented Architecture) into play. Where a single application or website is built with small services, each running in it’s own namespace with a lightweight open communication channel often as an HTTP resource.</p><h4>VueJS</h4><p>Sitting at top of the visual layer, VueJS was the goto library to build front-end templates with its HTML-like syntax, readability, developer friendliness, and easy integration with NuxtJS. Not that ReactJS or Svelte didn’t cross our mind, but the marriage is blessed from heaven. VueJS has a smooth learning curve, transferable knowledge between teams and platform with precision reactive component updates. Building SPA or PWA is as reliable and robust as with any other competitive framework.</p><h4>NuxtJS</h4><p>Nuxt.js is an open source web application framework that is built on top of Vue.js, Node.js, Webpack and Babel.js. It simplifies the development of universal or single page Vue apps by providing basic web development features. Nuxtjs consumes the API from Contenful and displays the content in the frontend.</p><h3>NuxtJs Integration with Contentful</h3><p>There is a blog portion of the website, and this data is set up in Contentful.</p><p>‍</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*_yhnxxpcX6sybVyr.png" /></figure><h3>Setting up Contentful data</h3><p>Log in into your Contentful app and create a Blog content model in the default space. Add basic fields to the content model to store the blog data.</p><p>‍</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*43LARF2ecATd8R2T.png" /></figure><p>Create an article in the content tab using the blog content model. Fill in the basic information in the blog fields.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*n8NcpsW_HTdfZspS.png" /></figure><p>Repeat this process to create more articles</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*SaM2ClTv8gJ4GIqG.png" /></figure><p>Create an API key under settings. The spaceId and the content delivery api — access token will be used in the nuxt project to fetch the content from Contentful.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Wo73ROroQ1Iuhlh7.png" /></figure><h3>Create a Nuxtjs project</h3><p>Use the create-nuxt-app plugin to create a nuxt project.</p><p><strong>npx create-nuxt-app</strong></p><p>This command will create the nuxt project with the following structure.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/967/0*rdblGcP3cF2V3sNF.png" /></figure><p>Create an .env file and add the API details from the Contentful in to environment variable.</p><p>NUXT_ENV_CONTENTFUL_SPACE= &lt;space_id&gt;</p><p>NUXT_ENV_CONTENTFUL_ACCESS_TOKEN=&lt;access_token&gt;</p><p>Create a Contentful.js file under the plugin folder and create a Contentful client using the environment variables we added in the .env file.</p><p>const Contentful = require(‘Contentful’)</p><p>const config = {</p><p>space: process.env.NUXT_ENV_CONTENTFUL_SPACE,</p><p>accessToken: process.env.NUXT_ENV_CONTENTFUL_ACCESS_TOKEN</p><p>}</p><p>module.exports = {</p><p>createClient () {</p><p>return Contentful.createClient(config)</p><p>}</p><p>}</p><p>In the nuxt.config.js add the created plugin in the plugin array to register it.</p><p>plugins: [</p><p>{ src: ‘~/plugins/Contentful.js’ }</p><p>],</p><p>Add the modules dotenv under the buildmodules to use the environment variables throughout the project.</p><p><a href="https://go.nuxtjs.dev/config-modules">https://go.nuxtjs.dev/config-modules</a></p><p>buildModules: [</p><p>‘@nuxtjs/eslint-module’,</p><p>‘@nuxtjs/dotenv’</p><p>],</p><h3>Fetching data from Contentful</h3><p>The most common and recommended way to consume Contentful API in your front-end (assuming you’re on NuxtJS) is using plugins interface. NuxtJS plugins extend the core functionality that lets you interact with third party tools and libraries like Axios, Stripe or even creating custom implementations based on NodeJS.</p><p>The Contentful <a href="https://www.contentful.com/developers/docs/javascript/tutorials/integrate-contentful-with-vue-and-nuxt/">documentation</a> makes it fairly easy to setup and configure API consumption in NuxtJS, but it’s a barebone implementation where you get all the data at once. In a real world scenario you might want to tone it down i.e. request on demand. As an example if a user visit’s the landing page/home page it’s not required to get all the Objects from Contentful, instead just the stuff that’s needed for the home page context.</p><p>To do this we just tweaked the plugin file a little bit to only return an instance of Contentful client, and took over from there on page level basis. Here’s what the plugin file looks like:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*DnVRrXaqDJHswkLI.png" /></figure><p>‍</p><p>Now when we want to fetch any API data from Contentful we’d just import Contentful client in Vue template and call the `asyncData()` function to fetch contextual data just for the home page, see below:</p><p>‍</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/907/0*nRNQtBHjk2OsQm9B.png" /></figure><p>The explicit import at the top makes sure that you have all the bells and whistles in place before calling the actual Contentful API, do note the object notation of what we’re importing, just the Contentful client, nothing else (resource savvy import). Later we can call the client to get all the entries from Blog post type in Contentful and return them as JSON objects.</p><p>Now you should be able to access the Contentful object in console as well as in your template file. Since we divided the layout into component files we’re passing them as props to the component using shorthand Vue syntax.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/914/0*E0YLDVqcXae73lYw.png" /></figure><p>And here’s how a full rendered page:</p><p>‍</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*iFBYQf4c3QqIW5w6.png" /></figure><h3>References</h3><p>To learn more about how to use Netlify CMS to manage website content when the site is built on NuxtJS, click <a href="https://www.exemplifi.io/insights/how-to-integrate-netlify-cms-functionality-with-nuxtjs">here</a>.</p><h3>Summary</h3><p>Using a Headless CMS with a proper JS tech stack gives you tremendous power and flexibility, compared to traditional CMS platforms such as WordPress or Drupal. The benefits go beyond a classic website and extend to leveraging your content to mobile apps and progressive web apps.</p><p><em>Originally published at </em><a href="https://www.exemplifi.io/insights/how-to-launch-a-dynamic-website-using-contentful-and-nuxtjs"><em>https://www.exemplifi.io</em></a><em>.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=4adebd8bb4ae" width="1" height="1" alt="">

How to launch a dynamic website using Contentful and NuxtJS

Blog

Exemplifi Blog

It’s official! Thanks to our people, we’re proud to have earned the Great Place to Work® Certification™. Our company culture is our top priority! #GPTWcertified #exemplifi #websitedevelopment 

https://lnkd.in/gJZuCNHU

If you're planning to take your website and business to the next level. You need an enterprise-level #wordpress website solution like #WPVIP. Our latest insight post gives you a step-by-step guide to migrating from #wpengine to WPVIP seamlessly. 

https://lnkd.in/gQdUbmk4

Users prefer websites that provide them a personalized experience which tends to keep them sticking around longer. It's no surprise then that websites that provide geo-specific solutions to user queries perform much better than websites that provide non-geo-specific results.

Is your website location-friendly?

Here is a handy guide to calibrating your data and provide geo-specific content to your visitors; keeping them around longer and coming back for more.

https://lnkd.in/gN33Ant

#geotargeting #cmswebsite #wordpress #personalization