This functionality existed on the custom taxonomy recipe collection archive pages where editors could add individual recipes to the collection sections and drag and drop the recipes in the order they wanted them to appear. However, they were not able to add the same functionality to a page (in the WordPress sense).

We needed to give editors the ability to add a recipe collection section to a regular page. Adapting the existing functionality into a custom Gutenberg block gave our client the ability to create the pages they needed for their upcoming campaign.

Block Functionality Needs

On the campaign page our client was creating, they wanted to showcase a collection of recipes in any order they wanted. They wanted a Load More button in case there was more than one row of recipes. The user could choose to see them or not.

Our client also wanted a button that linked to the recipe collection term archive page. Since the functionality existed in another part of the site, I looked at how it was built to inform how to create the new Gutenberg block.

Custom Recipe Collection Block

Enter the custom recipe collection block. Creating a custom Gutenberg block meant our client could add the recipe collection section to any page, post, or custom post type, on any part of the site.

In the admin, editors are able to set the block’s title and description and use a dropdown to select their desired recipe collection term. When the recipe collection term is selected, the block title and description automatically populate with the term name and description. Both the block title and description can be manually overridden if the editor chooses.

Once the recipe collection is chosen, recipes are individually selected and added to the block. When recipes are added manually, only those recipes are displayed in this custom Gutenberg block.

The recipes may be dragged and dropped into the order they should appear. The order in which the recipes are arranged is the order in which they display in the collection block.

If no recipes are selected, then all recipes from the collection are listed and sorted by rating. The block also allows the user to toggle between displaying a button that links to the recipe collection archive.

Need a Custom Gutenberg Block on Your Website?

While this particular solution was developed for a CPG client, any company in any industry benefits from the specialized functions of a custom Gutenberg block. When you find yourself in need of one on your site, contact WebDevStudios.

The post We Built a Custom Gutenberg Block for a CPG Client appeared first on WebDevStudios.

It’s not every day I get to work on a project for someone who isn’t just known by me but is also beloved throughout the WordPress community. When I found out I would be working on the rebrand for Do the Woo, I was naturally excited, albeit a little nervous.

That’s because Do the Woo is a WooCommerce builder community run by Bob Dunn, aka BobWP on Twitter. The goal of the website is to help WooCommerce builders across the globe by elevating, connecting and guiding them, while helping to grow their skills and businesses. This is done through podcasts, blog posts, and a membership community of Friends.

Logo and Branding

The first step of this website redesign project was to create a new logo. From there, a new brand identity for Do the Woo was born.

Bob provided some general insight into his visual desires. Then Jennifer Cooley, our talented UX Designer, set to work. First up: pinning down the look and feel for the brand with color and typography. This enabled Jennifer to ideate on several designs to really hone in a logo that distinctly represents Do the Woo.

Many people are familiar with the Do the Woo podcast, but Do the Woo is more than that. It’s about community. The new brand is clean, modern, vibrant, and fun, just like the WooCommerce community it serves!

“Working on the branding for Do the Woo was a really fun challenge,” says Jennifer. “The audience is so wonderfully varied, with designers and developers alike. Keeping all of that in mind when choosing colors and styles was both demanding and a neat exercise in creative thinking.”

With the new logo and branding established, Jennifer created various designs to ensure a cohesive look for Do the Woo across the web, including:

• Poster artwork for the podcasts
• Style elements used on the website to pull it together
• Creative assets used for other future design elements

Website Redesign

With branding ready to go, the website redesign and development began. As part of the discovery process, Bob walked me through the different parts of his current website and explained what he was hoping for with the new site.

There were different categories of podcasts, blogs, and Friends (the community). These categories were used in a variety of ways on the site pages.

It was my responsibility to determine efficient ways of integrating all of these features, in addition to creating a new visual design. I considered the functionality of the whole site and found ways we could improve editorial workflows for Bob.

Leveraging Post Categories and Other Post Meta

Looking at the podcast as an example, there is the main podcast and WooBits, which is a shorter episode specifically about WooCommerce news. Within the main podcast, there are a variety of categories an episode might fall under, like Roundtable or DevChat. These subcategories indicate the type of content. The categories Site Builder or Product Builder reference the guest’s role in the WooCommerce community.

We used the Advanced Posts module by Ultimate Addons for Beaver Builder to display podcast episodes in different ways throughout the site by modifying options like the category and other variables. On the Podcast page, the first row is the most recent episode of the main podcast; the second row is specifically selected episodes, and the remaining rows are each pulling in episodes from a specific category.

All of these rows are using the same module, but with different options selected to display the correct content. When a new episode is added to the site, the corresponding sections will automatically update to include it.

Dynamic Templates

Themer is a really powerful and useful Beaver Builder tool. We made good use of it on Do The Woo.

Using Themer allows us to create dynamic templates and connect them with specific post types to ensure there is design consistency from one post to the next within a specific category. Podcasts, Profiles in Woo, and the blog all have different layouts, with different content in each.

By setting up one Themer template for Podcasts, another for Profiles in Woo, and so on, all Bob has to do is choose the appropriate category and add the content. He doesn’t need to get bogged down in remembering which layout is needed or have to create it from scratch. More efficient content management means Bob can spend more of his time doing the things he loves.

Reusable Elements

Beaver Builder makes it really easy to set up clients for continued success. Newly created pages, rows, or modules are saved as reusable elements and used on any page or post—new or existing.

I set up numerous reusable elements while building the site, which were just as handy while I was developing the site as they will be for Bob when he has develops new types of content.

Rather than starting with a blank page, he can apply a saved template and add or remove elements as needed. Or, he can create a new template by starting with the saved Page Header and Call To Action (CTA) rows and adding some other modules in between.

The Page Header row will automatically add the textured blue background image and the page title, complete with font size, color, etc. Bob can edit the title or add a line of text if he wants to customize it a bit more. The CTA row is similar in concept to the Page Header row, with an added bonus of being a global element.

This means that any customizations that might be done to it would affect every instance of the CTA row across the site, which is helpful for keeping messaging consistent without having to remember every page that includes it.

Editable Friends Pages

The Do The Woo membership consists of three levels of Friend: Builder, Community, and Pod. Community and Pod Friends get their own profile page which includes information about their company and products/services. Before the website redesign, new Friends filled out an intake form with their information and then Bob manually transferred that information to their associated profile page.

With the new site, Bob wanted to allow Friends add and update their profiles themselves. With the help of Frontend Engineer, Adam Bates, we created customizations to allow for this.

Our team considered options and decided on using Advanced Custom Fields, paired with a dynamic template created specifically for these Friends. The template contains the style and layout elements. The information supplied from Friends feeds content.

Now, these Friends are able to log into the website, navigate to the Public Profile section of their account, and easily add or update their details, including:

• Logo
• Company description
• Product/service information
• Social media links and other URLs
• Blog feed URL to show up to five of their most recent posts

Bob still has full control over these profile fields. However, now there’s one less manual step for him to complete when a new Friend joins the community.

A Success Story

In the end, it turns out I had no reason to be nervous. Working on this project was as fun as I anticipated, and Bob has been a pure delight to collaborate with.

Most importantly, we delivered a great product for Bob. In his own words, Bob says:

When I needed a major rebranding and website redesign, I chose WebDevStudios as they are an iconic agency in the WordPress space that brings experience, talent and a commitment to their clients. Not only did they deliver a final product that exceeded my expectations, but working with their team members was an absolute joy. They brought a combination of professionalism and creativity to the project, with the perfect human touch.

I count that as a win!

New Sites and Website Redesigns

WebDevStudios considers every project to be unique. We take time to understand the goals of your website and build your customized website with the appropriate solutions.

Do you need a new website? Maybe it’s time for a fresh new design. Contact the WordPress experts. Reach out to WebDevStudios and let’s start the conversation.

The post Client Success Story: Do The Woo Website Redesign appeared first on WebDevStudios.

“After having been a part of their website project over eight years ago, it was a treat and a compliment to have them return to us for a new redesign,” says Brad Williams, WDS CEO and Co-Founder. The project itself was a heavy one that included a multi-network data migration, global elements, content modules, and a new, modernized look.

“We did a bit of CSS magic,” reports JC Palmes, WDS Frontend Engineer. “The design called for layering images as a part of the background, as well as intricate details, such as texture and transparent imagery.”

Founded in 1921, Rockbrook Camp provides a supportive community of kindness, respect, and care. It is a place for girls to explore nature, develop their confidence, forge friendships, and learn new skills.

“We love our new site,” Jeff Carter, Rockbrook Camp Owner and Director, states. “We’re now proud of its design, and very happy with the flawless technical transition. The site loads fast, generates zero errors, and looks fantastic.”

Data Migration

While every data migration is important and complex, the migration for Rockbrook Camp was especially heavy because it included the migration of a multisite network to a single site installation. Previously, there were three websites as a part of the camp’s WordPress Multisite (WPMU) network: main, staff, alumni.

Our WordPress agency created a custom script to migrate all necessary data from the existing WPMU install into the new WordPress single-site install. This included:

• 1626 blog posts
• 150 pages
• 767 tags, 33 categories
• 13 plugins
• 23 users
• Media
• Post types

Website Redesign

The objective of the website redesign for Rockbrook Camp was to balance a new, modern design with sprinkles of fun and tradition to appeal to both kids and adults. We relied on content modules and global elements to create a system that would be simple for Rockbrook Camp to sustain.

Content Modules

The new Rockbrook Camp website features content modules, which can easily be populated dynamically, with little or no user input required, or manually managed by the site administrators, allowing for content flexibility and ease. These modules included:

• Hero
• Title and text
• Video
• Image and text
• Testimonial
• Category
• “From the Blog”
• Single post
• Newsletter signup
• Related posts
• Image gallery
• Camp sessions
• And more!

The “From the Blog” module was particularly interesting to build because it is a WDS-custom Gutenberg block that gives the admin the power to customize subtitle (displayed as “Latest”), title (displayed as “From the Blog”), and the last three blog posts (ordered from newest to oldest).

Global Elements

The most beneficial aspect of global elements is they can be reused across the website. So, when you edit a global element, those changes are made site-wide at very point where that global element is being used. Basically, global elements allow for the power of efficiency.

Rockbrook Camp required easy configuration of global elements. Specifically, the client needed the following:

• Site header and site header logo
• Top navigation menu
• Search form
• Primary navigation menu
• Global footer and global footer logo
• Global footer countdown
• Fallback hero image
• People post form submission
• And others

The global footer countdown was an interesting global element to implement because its purpose serves as a literal countdown to the first day of camp. With this element, the website admin can easily enter that upcoming, important date in the customizer and the countdown element will be displayed in the bottom right corner of the footer.

Additionally, the people post form submission was another standout feature because it involves user-submitted content. With this global element, users submit a form via Gravity Forms containing fields for post content and post meta. Upon submission, the post will immediately be published to the “people” custom post type created specifically for Rockbrook Camp. There is no moderation process, however, site admin has been given the ability to edit or delete posts in order to keep the content up-to-date and accurate.

Ongoing Maintenance

After launch, Rockbrook Camp transitioned over to Maintainn for ongoing maintenance under the company’s Standard Maintenance Plan. Maintainn is the WordPress support and maintenance arm of WebDevStudios; so should Rockbrook Camp find themselves in need of small development projects here and there, they will have access to the WebDevStudios team, as our partnership continues to grow and flourish.

Success!

“Our experience throughout this project was outstanding,” Jeff says, describing what it was like to have WebDevStudios work on Rockbrook Camp’s website redesign and data migration. “Our every expectation was met or exceeded, with the tricky technical issues handled with assurance and the design work pleasing everyone on our team. We appreciated the attention to detail at each step in the process and were happy to see timely progress unfold according to the estimated schedule.”

Contact the Website Redesign and Data Migration Experts

WebDevStudios treats each website project as its own unique experience. No two clients are alike, and our WordPress agency respects and understands that by customizing every single website design and development project to specifically meet the needs of each individual brand.

Do you require a full website redesign and data migration? Contact the experts. Reach out to WebDevStudios and let’s talk about it.

The post Website Redesign and Data Migration:<br>A Client Success Story appeared first on WebDevStudios.

“Following a difficult year for so many, it is so important to find those moments of comfort and joy,” says Linda Lee, Chief Marketing Officer, Meals & Beverages, Campbell Soup Company in a company news release. “The excitement of waking up to a snow day delights kids and adults alike. These are special days filled with sledding and snowman building, capped off with a warm bowl of chicken noodle soup after playing in the cold. Even in the virtual world we find ourselves in need of a good ol’ snow day.”

This particular client project required three major features:

• A sign-up form that included two phases
• A zip code-powered map
• The ability to showcase user-generated content

Read on to learn how the WebDevStudios team accomplished this.

Sign-Up Form

Saving the snow day requires the participation of children who believe in Campbell’s cause, and that necessitates a pledge. To achieve this, Campbell’s created an incentive program to inspire kids to sign the pledge. The first 3,000 to do so received a free, limited-edition, Campbell’s branded snow day activity kit.

Between the pledge and the freebie giveaway, the Save the Snow Day project required a sign-up form that captured contact information and an address. Once the 3,000 pledge threshold was met, the sign-up form was kept but utilized as a pledge and newsletter sign-up call-to-action. Additionally, the zip codes captured from the sign-ups were then used to populate the content used for the zip code-powered map.

Zip Code-Powered Map

The marketing impact of the zip code-powered map is impressive because it details the amount of pledges made across the US to save the snow day. Red map pins populate a map, showing the support behind Campbell’s efforts.

WDS built this function by getting the geo-coordinates from Google Maps API on the basis of users’ zip codes. Our backend team then saved those coordinates to a custom WordPress table. We also used Google Maps Clustering to display the numbers neatly on the map (see image above) instead of producing a big red blob of pins. For security, no other data beyond the submitted zip codes are kept in the database.

User-Generated Content

Relying on the power of social media to get the word out and influence others to join the cause, Campbell’s came up with the hashtag #SaveTheSnowDay and asked consumers to use it to tag their snowy Instagram posts. A WordPress plugin was used to integrate with Instagram and display a curated list of images taken from those that used the snow day hashtag. This created an engaging environment that allowed Save the Snow Day supporters to see their social media posts featured on SaveTheSnowDay.com.

The team members who worked on this client project have expressed sheer joy to have been a part of it. If your marketing team is looking to partner up with a WordPress agency that loves to build successful websites for consumer packaged goods, media companies, and enterprise corporations, contacts us at WebDevStudios. It would be our pleasure to bring your marketing initiatives to life.

The post Campbell’s Soup Save the Snow Day: A Client Success Story appeared first on WebDevStudios.

mySongbird recently came to WebDevStudios (WDS) for a brand new website to kick off the launch of their startup company. Once our business development team had a clear understanding of the site’s requirements, that’s when WDS turned to Pagely for hosting.

“With this particular project, we knew that the live streaming aspect would necessitate a host that could meet and support the requirements for heavy traffic without disrupting quality of service. That’s when we approached Pagely,” explains WDS CEO and Co-Founder, Brad Williams.

Phase 1: Bracket Style Competition

Overall, the website project was planned in two phases. First, there was a bracket-style voting competition that mySongbird utilized as a part of their marketing strategy. This initiative helped to build the new brand’s presence, garner an audience by tapping into the fanbase of the musical acts participating in the competition, as well as assist those musicians with earning an income, which was well-appreciated during a pandemic when live music venues were being shut down. This revenue came in when fans backed their bands by paying $1 per vote for their favorite performers. WDS relied on WooCommerce as the eCommerce solution.

“While we built the backend functionality of the bracket system ourselves, we leveraged the power of WooCommerce to make it easy for fans to vote and mySongbird to manage the competition,” reports Christine Dixon, the WDS project manager in charge of overseeing the mySongbird launch.

“The brackets worked great,” says mySongbird EP Creative Director, Robert Angone. “I like the way the head-to-head modeling was displayed.”

Phase 2: Live Streaming

The next phase of the project was especially exciting—a live streaming concert featuring Grammy-nominated multi-platinum artist, Billy Gilman, an event that took place on October 9, 2020. Aside from the live streaming performance itself, WebDevStudios also had to build the functionality for signing up for a mySongbird subscription service and video on demand, which serves as an opportunity for music fans to watch live stream entertainment after initially being aired live.

WordPress acts as the framework for mySongbird’s website, and while WooCommerce is used to provide all eCommerce aspects of the site, Bulldog Digital Media provides the streaming service itself. All WDS had to do was embed a code, and voila! Audience members could easily log into mySongbird and watch Billy Gilman perform his country music hits.

“The show looked fantastic!” exclaims Robert. “For the future, there are some tweaks we want to make, but overall the way Billy performed and the presentation of the solution was absolutely perfect for the first time.”

mySongbird VP and & GM, Meghan Thornton, agrees, adding that she appreciated the client service WDS offered on the day of the live streaming show. “We had a Slack channel and had key people on that, so there wasn’t a ton of back and forth. It was nice to have that in place to make communication between teams easier. For example, we had a problem with window width and Jeffrey [de Wit, Lead Engineer] fixed it on the spot.”

“One of our biggest challenges with mySongbird was ensuring we provided our entertainment artists and their fans a solid, dependable platform that not only offered secured payment gateways but that could also handle an onslaught of website traffic without disruption,” says Angie Commorato, A&G Marketing Founder, who brought mySongbird to WebDevStudios initially. “I trusted Brad and the team at WebDevStudios to make the right recommendations for the solution, which ended up being Pagely for hosting. The team at Pagely knocked it out of the ballpark. Not only did they give us the reliability and performance we needed for the project, but their service was impressive, too, by being accessible, answering all of our questions, and assuring us that everything would go smoothly. It did!”

Now, mySongbird is set up for success. With all the right solutions set in place and the experience of their first live streaming event behind them, there’s no limit to the musical milestones mySongbird is destined to achieve. There is no expectation of any hitches in their future bracket competitions or live stream events.

The post Live Streaming Success: A Client Success Story appeared first on WebDevStudios.

First Encounters

After meeting at a conference, Constant Contact reached out to WDS for assistance with building a WordPress plugin that allowed users to capture information directly from their WordPress sites. For WDS CEO and Co-Founder, Brad Williams, who is also a co-author of the book Professional WordPress Plugin Development, it was the perfect match.

“Working with a notable brand like Constant Contact is a big deal for us,” Brad says. “Any WordPress website owner looking to grow their email newsletter list can easily rely on this plugin to reach their goals. And with our knowledgeable team of experts, it brings me a lot of pride to be able to provide such a great company with reliable support and recommendations.”

The Constant Contact Forms plugin acts as a standard form solution. The WordPress site owner using the plugin doesn’t even have to have an account set up with Constant Contact in order to utilize its benefits.

However, those who do have an account with the company reap the largest rewards. That’s because a WordPress site owner with a connected Constant Contact account can interact with certain aspects of their Constant Contact account directly from their WordPress dashboard, instead of having to log in through the brand’s website. In other words, the plugin allows the website owner and Constant Contact account user smooth and easy management of their visitor data and/or email list without ever having to leave their WordPress dashboard!

Users are able to create forms within WordPress that, with a connected account, submit visitor-provided details to a chosen list within their Constant Contact account. This acts as an alternative to generated form embed code that can be created and provided by Constant Contact. There is also some general list creation, management, and syncing available to pull information into the WordPress dashboard.

Evolution

Since our relationship with Constant Contact was first established, the Constant Contact Forms plugin has evolved in form and function. Much of this progress is credited to WDS and Maintainn Support Engineer, Michael Beckwith, who focuses on updates and health maintenance of the plugin in coordination with the Constant Contact stakeholders.

“I feel proud, overall, about the plugin right now, and am generally happy with how it’s evolved and how the team behind it has grown to include more developers,” expresses Michael. “I am confident in our abilities to continue putting our best foot forward. I may not technically be a Constant Contact employee, but I do my best to present them in as best of light possible because I do represent them in the support I provide. My support efforts reflect on them, and I want them to be well-represented.”

Most of the plugin’s evolution has included new features related to the collecting efforts and display within WordPress, such as:

• WordPress widget to help display created forms
• Editor screen UI showing current short code
• UI to customize wording and values for various parts of the form output
• Ability to selectively disable email notifications
• Ability to selectively choose who gets notified on a per-form basis
• Ability to selectively choose AJAX submission support
• Evolved and added spam control filters to prevent false signups and junk
• Per-form styling options to help site owners make the forms fit their site design better
• Gutenberg support
• Enhancements around logging and error handling for people offering support

WebDevStudios pledges to keep our own branded plugins healthy, maintained, updated, and reliable. This pledge remains true to our partners at Constant Contact. We look forward to continuing our partnership by providing the support and development they need to provide their users and clients with a tool that brings them great success.

The post Success Story: Constant Contact Forms Plugin for WordPress appeared first on WebDevStudios.

Searching through my dresser drawers, I found my dress pants nicely folded under about three pairs of yoga pants. I tried them on quickly just to be sure they still fit. It had been about six months since the last time I had to wear them. To my relief, they did. I also grabbed three dress shirts out of my closet to ensure I had my professional attire for the few upcoming meetings with the client. It was a top-tier client. I had to look my best. I was all packed, and ready to head to the airport.

Upon arrival, I was relieved to see my flight was on time. Getting through security was quick, even with my carry-on; so, I walked to grab my coffee, snacks and magazines for the four hour flight ahead of me. As I boarded the plane, to my surprise, I was the only passenger in row 15. I stretched out, set up my computer, and we were finally on our way!

Four hours went by fairly quick after one movie and some light magazine reading. As we landed in Seattle, I was so excited to meet up with a few fellow remote workers. Although I had met these guys only a few times prior in person, we work together day in and day out, so we always give big awkward hugs when we see each other. We quickly grabbed a rental car and were on our way to Redmond.

It was Day One of the onsite client meetings, and I doubled checked that I had everything I needed: computer, computer charger, Day One meeting agenda with questions, goals and an estimated timeline, my driver’s license (for check-in at the client’s offices), pen and paper, and my most professional-looking attire – dress pants, dress shirt, and a spiffy new scarf. Oh, and I made sure that one of us knew the address, building number and meeting room ahead of time. We were on our way.

At the client check-in, we all quickly gave our driver’s licenses to the receptionist. Most clients require some form of identification to get into a secure building. She created a name tag for each of us to ensure that we were approved to be in the building and we headed to the meeting room. The client offered free refreshments that were located just outside of our meeting room. That was an awesome perk! We had our coffee filled, computers open and meeting agendas out.

When the client arrived, we were excited to shake hands in person and interact face-to-face. We all introduced ourselves and sat down to start the four hour scheduled meeting. We followed through the agenda, but really started to dive into the details of how each process and feature would work. Everyone in the room had input and asked questions. We were able to dive into technical details and outline a solid plan for the upcoming development work. We even took over the dry erase board and started doing live wireframes with the client.

Although we could have discussed this scope over various conference calls and emails, the energy and productivity of sitting in that meeting room for a few hours over two days to iron out all of the details with the client in person was truly effective. We have two solid project plans for upcoming development work and it only took three days of travel, two days of onsite client meetings, a meeting agenda, live wireframing and four talented WDS-ers to get it done!

Meeting with the client face-to-face can be extremely effective, especially when mapping out a new scope of work or project plan for a complex development project. It is also a great way to build your relationship with a long-term client. A few key considerations when planning your next onsite client meeting:

• Be open to travel
• Dress in business professional attire
• Have a plan for the meetings and goals to accomplish while onsite

You want to ensure that the time is productive and that you and your client both come out of it feeling accomplished. I personally cannot wait for my next onsite client visit!

The post Being Productive at Onsite Client Meetings appeared first on WebDevStudios.

Constant Contact has been a leader in the email marketing industry for the past two decades. Providing an email marketing platform for businesses of all sizes to quickly and easily get up and running with email marketing. Honestly, that’s only a sliver of what they do. Their mission statement reads: “To empower small businesses and nonprofits to grow customer relationships and succeed.” Now that’s something we can definitely get behind!

Constant Contact Forms for WordPress, a free plugin in the WordPress plugin directory, provides site owners a simple way to add forms to their site to collect data from visitors. For small business businesses looking to get their feet wet with email marketing, this plugin is a perfect fit.

When Constant Contact reached out to us about creating their official plugin, they wanted to ensure the plugin’s benefits wouldn’t be limited to existing Constant Contact users. It was important to them that site owners who have never used Constant Contact could still use the plugin to collect data from their visitors, and when they’re ready, they could sign up for a Constant Contact account right through the plugin.

For Constant Contact users, the plugin’s power goes way deeper. The plugin taps into Constant Contact’s powerful API and makes it effortless to map your form fields to the proper fields in your Constant Contact account. Each form submission can be seen in your Constant Contact account instantly. Small business owners looking to get started with email marketing are going to find the process!

We’re extremely excited to be working with Constant Contact on this project. And with the plugin being released to wordpress.org this week, we’re even more excited to get to work on some of the exciting additions we’ve got planned for the next version. Plus, the amazing support team at Pluginize will be handling all support requests via the wordpress.org support forum. So as you can see, the plugin and its users are both in great hands!

Download a copy of Constant Contact Forms for WordPress today and let us know what you think!

The post The Official Constant Contact WordPress Plugin is Live! appeared first on WebDevStudios.

Because of a hard launch date, this project had a super short timeline and we decided a smaller team would keep us agile. Jaimie would be our Project Manager, Simon would handle the designs/PSD, Damon would deal with the front-end development, and I oversaw the back-end development, as well as serving as a lead for the project as a whole.

I’d like to share our teams experience through building a new website for a pretty well known client.

Designs

Part of the scope, was a custom design, which featured five different templates. Skype wanted something similar to their current production site, but freshened up a bit for the new product launch. Simon also had brand guidelines and some direction from our point of contact at Skype. I spoke with Simon who told me, “All design research starts with listening. One of the issues Skype had was [that] Skype TX was buried.”

Simon took some time to research the product and find the business value within brand guidelines. This process is called “business proposition.” During the design phase, Simon also had to make the case for a few features.

“Behind good design, there’s a reason for everything. Form follows function since we’re designing not only for the client, but the client’s client…” (AKA the user!)

Thanks to software like Invision, communication between the Simon and the client went smoothly and after a few revisions, both Damon and I had PSDs to work with.

Choosing the theme and plugins

Almost all of our projects include our starter theme, wd_s. This build was no exception! Wd_s enables developers to spin-up a starter themes quickly and develop with modern build tools like Sass and Gulp. We didn’t install too many plugins; we used a select few to manage content via point-and-click, ensure everything had a featured image, rearranging page order, and more. We also used a few custom plugins as well.

The Hero

By far the most complicated part of this build was the Hero.

Take a look at the requirements:

• Every post and page must have a hero
• Use post title, excerpt, and featured image as the content, but can add additional content can be added in a control panel
• By adding additional images/content, the hero turns into carousel
• Each carousel slide can have a modal
• Modal must support oEmbeds
• Customizable headline
• Customizable paragraph
• Support for two different buttons, one of which opens a modal

If your head is spinning, don’t worry. So was mine! After speaking with Chris for a bit, we put together a development roadmap and I got to work. Because this hero had to be on every post and page, we decided to use CMB2 to create repeatable group metaboxes. These would serve as the optional “control panel.”

I also used Slick to power the carousel and custom Javascript and CSS to power the modal.

In the end, I really like how the Hero turned out. Some of the functionality developed here, will make its way into our Hero Widget plugin on Github.

The Footer

While it may not appear to be complicated, the footer was indeed difficult. Microsoft requires footers on all their web properties to be visually similar. We were instructed to “copy” the footer assets, markup, and functionality from production.

This proved to be a bit of a struggle as Damon describes, “They had some toggling in footer that worked on desktop, but didn’t have a great mobile experience. So we updated the code by rewriting the Javascript around the toggling altogether…”

In the end, Damon did a fantastic job creating a footer that works beautifully at any viewport.

Accessibility

Microsoft takes accessibility very seriously, and this was part of scope from the beginning (as well as a general practice here at WebDevStudios). We had to design and develop to meet WCAG 2.0AA standards. As you can imagine, since Microsoft is such a large company, failure to meet these standards could cost them tens of thousands of dollars in fines. Fines aside, making websites accessible for everyone is just the right thing to do.

We put this site through some rigorous testing to ensure things like, the color contrast and HTML markup passed 2.0AA specs using both Total Validator and ContrastChecker.

Data Migration

Ah yes, the final part of this project was moving the content from their proprietary CMS into WordPress. Normally, this would be handled by our migration team using our custom migration plugin. However given that the site only had about fifty posts, and the time necessary to interface our plugin into that CMS, we instead opted to migrate the data by hand. This process went fairly quickly, and in no time we had all of their content in place.

Hosting

We’ve been working with Microsoft and their WordPress properties for a couple years, so we’re familiar with the unique challenges and benefits of running WordPress on Azure.

We introduced Microsoft to WPEngine and provided the technical guidance to get Skype in Media on WPE! It’s pretty cool that this project will be the first web property owned by Microsoft on WPEngine!

Conclusion

Even though this was a custom built site for an enterprise level client, we had a short timeline and a few development hurdles. In the end, it was a fun project. I believe we were able to successfully help rebrand Skype TX, and hopefully this will help them sell a few more pieces of hardware–which at the end of the day, is why we’re here.

The post How We Built Skype in Media on WordPress appeared first on WebDevStudios.

Shopify is an e-commerce software that provides a hassle-free platform for shop owners to run their own online store and get a piece of the internet sales pie. We built them an extremely flexible e-commerce plugin that makes it easy for WordPress.org site owners to download the plugin and use immediately.

The Shopify eCommerce Plugin allows WordPress users to employ the Shopify “Buy Button” to sell existing products in their Shopify store with ease. WordPress users can embed products in their site, including pictures, product descriptions, and price, with just a few clicks! For store owners that have an extensive inventory, there is also a straightforward search function that allows them to track down exactly which product they would like to embed without hassle. Both individual products and product collections can be embedded as well.

When Shopify reached out to us, they knew they wanted to build a custom plugin that makes Shopify even easier to use than before. They had a some criteria in mind when they were searching for the right folks to build this plugin, which is as follows:

1. They wanted experienced developers with a proven track record of building high-quality WordPress products
2. They wanted the right partner for releasing the product to WordPress–folks who are proficient with the process of releasing open source products to the public.
3. They wanted to be sure that the end result was highly extendable and accessible to other developers.

We built the plugin with the features they wanted, the proper way, and included ways so that other developers could extend it; the Shopify eCommerce plugin is extremely flexible and can serve as a base for other developers to build upon. We also created extensive documentation, and rolled it out to both Github and WordPress.org.

The plugin has already gotten some attention; before it was even released on WordPress.org, Shopify made their formal announcement and it showed up on WPTavern.

We’re super excited about this product; as we mentioned at the end of last year, we would be focusing in on products, and this is just the start!

The post WebDevStudios for Shopify: The Shopify eCommerce Plugin appeared first on WebDevStudios.