How To Create an Auto-Updating Widget Using WP-API

Image by Francesco Franchi

In my last post, I gave you an overview of WP-API. Read through that post if you need a primer on the capabilities of WP-API. For this post, I will offer an example of API usage and how it can benefit site owners by creating more dynamic content.

In this post, we will go over creating a comment widget that auto-updates via WP-API without refreshing the page, and how to use AJAX to poll the API for new comments and then display those comments in a sidebar widget.

Here’s a gif of the widget in action as it would look in the Twenty Twelve theme:


Continue Reading

Using MailPoet to Power Subscriptions & Newsletters

Screen Shot 2015-03-23 at 1.53.22 PM

With all the options available today for sending out newsletters and allowing visitors to subscribe to your content, choosing one can be daunting. MailPoet cuts through all the headaches and makes the pain go away by providing a neat solution that is fully integrated into WordPress and comes with an easy, familiar interface.

Why MailPoet?

MailPoet has some powerful features, including:

  • Drag & drop newsletter editor
  • Send your latest posts automatically
  • Autoresponders, i.e. “Send email 3 days after someone subscribes”
  • Send emails to your WordPress users
  • Start collecting subscribers in 2-clicks with our sign up widget
  • Single or double opt-in, your choice
  • Import subscribers in 2 steps
  • Get stats for your newsletter: opens, clicks, unsubscribes
  • Drag and drop subscription form designer
  • Your newsletters look the same in Gmail, iPhone, Android, Outlook, Yahoo, Hotmail, etc.
  • Send with your web host, Gmail, any SMTP, like SendGrid, Amazon SES Mandrill, etc…
  • Segment your lists based on unopened, opened and clicked
  • A beautiful statistics dashboard to compare your newsletters, and subscribers
  • Detailed stats for each subscriber and newsletter
  • Automated bounce handling, keep your subscribers’ list clean
  • Test your spam score before you send a newsletter to your subscribers
  • Improve deliverability with DKIM signature

MailPoet has over 200,000 active installs and has been translated into thirty languages!

Hands On With MailPoet

Rather than another comparison with other newsletter providers, let’s get our hands dirty and take a look at how I am leveraging the power of WordPress and MailPoet to automagically send out new content from my wedding website to subscribers. From the installation of MailPoet to having a fully automated newsletter that can be subscribed to was just three steps!

Step 1: Creating a Newsletter

Creating an automatic newsletter for your subscribers is simple.

Visit the MailPoet > Newsletters page and click Create a new email at the top and you will be presented with a form similar to the following. Choose “automatic newsletter,” and set the criteria for when the newsletter should be sent. In this case, I want the newsletter sent when immediately when there is new content. MailPoet allows you to have multiple lists all with different subscribers. Select the list you want and click Next step.

Screen Shot 2015-03-23 at 8.48.21 AM

The next page will bring you to a visual newsletter editor where you can drag and drop elements. By default, it will display your latest post as a demo. On the right side of the editor, there are four categories of content types for newsletters:

  • Content
  • Images
  • Styles
  • Themes

These categories give you access to:

  • Titles & text
  • Divider
  • Social bookmarks
  • Images
  • Styling of the various elements such as headers, background, and unsubscribe section
  • Newsletter themes

Under the editor is a button that will send you a sample email of what the newsletter will look like to your subscribers.

Screen Shot 2015-03-23 at 8.53.17 AM

The final page lets you review the basic details of the newsletter, as well as setup the email address subscribers will see when they receive the newsletter. When the info is all correct click the Activate button and subscribers will immediately begin receiving new content.

Screen Shot 2015-03-23 at 9.01.47 AM

Step 2: Create the subscription form

MailPoet allows you to create as many varying subscription forms as you would like. Forms can subscribe the user to a specific list or allow the user to decide which list they would like to subscribe to.

To create a new subscription form visit MailPoet > Settings and click the Forms tab. From here click Create a new form.

By default, the subscription form contains the traditional email address input. It also has options to add:

  • Divider
  • First name
  • Last name
  • List selection
  • Random text or HTML

Screen Shot 2015-03-23 at 11.00.46 AM

Step 3: Add the widget to your theme

This is the easiest part! Simply navigate to Appearance > Widgets and drag the MailPoet Subscription Form widget to the sidebar where you would like it to appear. Name it and choose the “for,” and presto, automated content subscriptions are now ready to go!

Screen Shot 2015-03-23 at 11.06.45 AM

Get ‘Dem Stats

MailPoet has some great statistics built in–similar to what you would expect from a hosted service such as MailChimp. Each newsletter is broken down by number of Opened, Open, and Clicked (link in newsletter), Sent (Not opened), Not Sent (delivery failed). When viewing stats from the newsletter you can see which subscribers opened the newsletter. You can also view an individual subscriber’s profile and see which newsletters they received and which were opened. These stats are all available on the free version of MailPoet. Upgrade to premium and additional stats can be unlocked.

Screen Shot 2015-03-23 at 11.09.43 AM

In this post, you have seen how in twenty minutes you can easily setup a powerful newsletter subscription service. This is just one example of the power of MailPoet and what you can accomplish with the plugin. What project have you created that could benefit from these features? Need help setting up MailPoet on your site? Well, you know, we can do that…

How to Create Fantastic Content for Your Company Blog

creating great content, creating content for company blog, how to create content, content marketing, webdevstudios, web development

Nowadays it’s considered fairly standard practice for every company to have a blog, but that doesn’t mean they’re always doing it well.

We’ve all seen them–the company blogs that bore, that shove their product down your throat, that spread misinformation or otherwise misrepresent the company in the worst ways (unprofessionally, awkwardly, insufficiently!). Content marketing is an amazing tool to utilize when promoting the work that you (and your team) do, but there is a way to do it right–and doing it right is absolutely vital.

Chris Lema recently gave us a very kind shout out for having a fantastic company blog, and we thought that it might be useful to share a little bit on how and why we create what we do. This is hardly comprehensive; there are a million ways to come up with valuable, worthwhile content, and, of course, it will vary wildly depending on your industry, but here are a few starting points and general strategies that we use here at WebDevStudios.

Continue Reading

Tech Non-Profit Spotlight: Girl Develop It

girl develop it, tech non-profits, coding for women, teaching women to code, women in tech, coding classes, web development, webdevstudios,

One of the major organs in WebDevStudios’ anatomy is its gigantic heart, and from it comes our contribution to the community in both charitable and educational capacities. As giving back is part of the core of WDS, it only made sense for us to turn the lens outward and shine a light on other people in the tech community who are similarly passionate and proactive.

As a result, welcome to our monthly spotlight on non-profits who are doing the good work–the meaty, meaningful stuff–and making the world a better place. Last month, we featured Hack the Hood, an Oakland-based organization that focuses on providing technical skills and training to low-income youth of color. This month, we’re highlighting Girl Develop It.

Continue Reading

The Role of a Project Manager

Why do I have a project manager on my team? What does my project manager do all day? Why am I paying for a project manager?
The role of a project manager can be loosely defined as the point of contact for the client, team planner…or the greatest multi-tasker alive.
While most of those descriptions are true, in all seriousness, a project manager may just be one of the most important roles on a team. I am going to walk you through a few key reasons why you may want to think twice before starting a project without a trusty project manager having your back.

Continue Reading

Using Browserify with JavaScript (and Keeping Yourself Sane!)

using browserify with javascript, javascript tricks, javascript in browser, wordpress, coding tutorials, webdevstudios, web development

Working with code in the browser is a challenge. Not only do you need to manage the disparate behaviors of a variety of browsers and navigate the sometimes treacherous waters of JavaScript’s functional programming logic, but managing a wide array of dependencies and large projects can quickly get unwieldy.

Browserify is a solution for allowing Node.js style require() calls for importing libraries and your own code in a simple, easy-to-read fashion.

Outside of the browser, it is pretty simple to include a library or additional file in your code (in most languages). In PHP, just calling require ‘filename.php’ does the trick. No such luck in JavaScript…at least not in the browser. In Node.js, the require() function allows for importing external libraries installed by npm or local files. Browserify aims to bring this same ease of use to the browser.

Browserify works by reading through the files passed into it and connecting them all together into a single compiled (with a bit of extra optional magic that I’ll show you, too!) file that you can then load on your site.

Continue Reading

Getting Started with SassDoc

SassDoc logo

SassDoc is to Sass what JSDoc is to JavaScript: a documentation system to build pretty and powerful docs in the blink of an eye.

So your team is using Sass, and everybody is whipping out amazing @mixins, @extends, custom functions, and maximizing use of all those wonderful, built-in Control Directives (@if, @for, @each, @while). Your team has a system in place for introducing new @mixins to other team members so everybody leverages the goodies. While each team understands each project’s Sass nuances and intricacies, there can be gaps in understanding for team members that are added, or even newly hired employees. This is where the often dreaded documentation can come in handy.

Continue Reading

Remembering Community in the Face of Negativity (AKA When .Org Users Attack!)


Sometimes it’s easy to forget that WordPress is actually a community. I’m easily reminded of the community aspects when I look at my Twitter feed–where I can catch up with awesome WP community members quickly, jump into conversations, or just revel in the many indispensable links shared by any number of said community members.

What I’m talking about, though, is when you actually get to work developing and designing sites. At times, it may be easy to get lost in the work that you’re doing. You know you need a plugin for a specific function and, lucky day, someone actually made one! You click download, you pop that puppy into your /plugins/ directory and everything is right as rain.

Many times, that’s where it ends. You get this fabulous plugin or theme and then it just exists. You see notifications when updates are available, so you get those updates and move on with your day. On your end, as a user or a developer, it’s pretty automated after you install and setup a plugin. Updates come and you apply them and then test test test. Do things still work properly and look cool? Awesome! Then let’s move on to the next task.

Before you know it, this kind of becomes your life. For the times when you don’t need to write a custom piece of functionality, there are plugins available to help, and it’s so easy to just snatch up that gravy and be on with your day. But what about the people behind those plugins?

Continue Reading

WordCamp London 2015, we’re coming for ya!

wordcamp, wordcamp london, wordpress events, webdevstudios, web development,

Here comes…another WordCamp! And it’s a big one, folks! WordCamp London is nearly here, and as we’ve done with past events, we want to give you the scoop on what to see and where to be. Our CEO, Brad Williams, will be speaking, and our Controller, April Williams, will be in attendance as well. Make sure to grab them and say hello!

Although I find it hard to believe that any of our regular readers are unfamiliar with WordCamp (come on, now!), for those of you that are completely green: WordCamps are events held all over the world where WordPress nerds unite to share their skills, insights, and learn a whole lot from a bunch of other smarties.

WordCamp London is March 20th-22nd, and you won’t want to miss Brad’s presentation, as well as a few other goodies we’ve highlighted below!

Continue Reading