Akismet – The End of Comment SPAM

Has comment SPAM got you down?

icon-256x256Akismet to the rescue! Comment spam can take a lot of time to sort through, but Akismet can do the sorting for you. This nifty plugin will automatically filter out SPAM comments and place them in your SPAM folder. Whether you are holding comments for moderation or not, this plugin will save you time.

Installing Akismet is Easy!

Step One – Install and Activate Akismet

Navigate to the Plugins page from your WordPress Dashboard. Akismet is (most likely) already installed on your blog and all you will have to do is activate it. If you see Akismet listed on your Plugins page simply click the “Activate” link. If Akismet is not in your list of plugins navigate to Plugins > Add New. Akismet should appear at the top of the Add Plugins screen. Click the “Install Now” button and activate Akismet.

Screen Shot 2016-06-14 at 3.18.30 PM

Step Two – Get Your Akismet API Key

Go to akismet.com/plans/ and choose a plan. The “name your price” plan can be free, or you can choose to pay an amount that is a fit for your budget 🙂 . You will need to either login with a WordPress.com account or create a WordPress.com account if you do not already have one. Once you have successfully signed-in and completed payment (optional) you will receive an API key.

Step Three – Configure Akismet Settings

From your WordPress Dashboard navigate to Settings > Akismet and add the API key to the configuration page. Done!

If your website or blog is already burdened with a lot of SPAM you should navigate to Comments and click “check for spam.” Akismet will run through all of the comments on your site (that were submitted before installing Akismet) and filter out the SPAM. Please note that if you have a lot of SPAM this may take a while.

Tada! Comment Spam is Now a Thing of the Past

Now you can sit back and relax while Akismet sorts through your SPAM comments and leaves just the true gems for you.

If you are a power blogger or enterprise user you should check out Akismet’s paid plans to learn more about their advanced features and other WordPress services.

WP Engine: The Best Managed WordPress Hosting

Choosing a hosting provider for your WordPress website is an important decision. In this article we will discuss some of the excellent features offered by WP Engine’s managed hosting service and why we recommend them to every client.

What is Managed WordPress Hosting?

Managed WordPress hosts specialize in hosting WordPress websites specifically and they offer special features like caching, staging for updates, easy backups and restores, and speed enhancements. They are generally helpful with WordPress issues, and they often have additional security features that other hosts don’t have. This is very different than traditional shared hosting where you simply rent storage on a server which may or may not be well designed to work with specific platforms or technology, and where you may feel left on your own if your site is hacked or you have a WordPress specific question.

When you should consider switching hosts:

When you start a new blog/website it’s normal not to think about things like server performance, traffic and security and often people looking for hosting only consider cost. You want to worry about the site’s appearance and what content to publish rather than the technical underpinnings of the server hosting your site, and that’s totally understandable. Often it is only after the site’s been up for sometime that issues with your server will begin to arise, and you may start to wonder about your choice of web hosing. Maybe your site slows down or you have down time, or goodness forbid your site gets hacked. Good quality managed WordPress hosting guards against these issues, and even though it tends to be a bit more expensive, it can save you a lot of hassle, and even money, in the long run.

Why is WP Engine the Best WordPress Hosting?

1. Designed for WordPress

WP Engine’s WordPress hosting is designed and optimized for WordPress websites specifically. They take care of every single piece of server optimization to ensure your website is living on the most fastest and best WordPress hosting platform possible.

2. The Best Customer & Technical Support

WP Engine’s technical team and customer support consist of WordPress developers and trained experts. The WP Engine support team is available 24/7 via phone, chat or support tickets. We can not emphasize enough how valuable it is to have a smart and knowledgable support team available for you (and your website) at any time. They are also extremely professional and friendly!

3. The Best  Security

WP Engine takes security very seriously. They monitor server traffic 24/7 and are able to prevent malicious traffic and attacks. In addition to real time monitoring and finely tuned server security, all WP Engine plans include daily backups and 1-click restore points. With WP Engine you are only 1-click away from your site being restored to a prior state if anything goes wrong.

4. Speed!

The WP Engine architecture and caching system ensures your site will perform at optimal speed and their architecture is continuously improved to reduce site load time. Additionally WP Engine can make use of a Content Delivery Network (CDN) to distribute your site data across a global network of servers to reduce geographic distance between your site visitors and your website data if you server a global audience.

5. One-Click Staging Websites

We can not emphasize enough what a valuable tool the one-click staging feature is. We LOVE it! A staging website is basically a copy or clone of your live website. One of the reasons we love the staging environment is that it gives our clients are safe and easy place to try out core and plugin updates or plugin additions before changing things on their live websites. This way, clients can take control of their own updates while maintaining confidence that  those updates will not break any functionality on their live website.

6. Free SSL Certificates with Let’s Encrypt

To top it all off, WP Engine now offers free SSL certificates through Let’s Encrypt. With fast and easy configuration we appreciate how painless it is to configure SSL for any site on WP Engine.

TLC with WP Engine ♥

Your website is very much like a living thing. It needs care and love and maintenance. You probably spent many thousands of dollars investing in your new website, and you want your users to enjoy a fast and reliable experience when they visit it, while you want to maintain it in as pain-free a way as possible. This is where WP Engine comes in.

In closing, it may seem like spending $35/month on hosting is a lot, and with plans starting at $35/month WP Engine is not a “cheap” hosting solution. But with all of the great features, performance and support that WP Engine can offer, we believe that it is an excellent value.

WP Engine

How to Build an Accessible Web Slideshow (Slider)

There are several factors that contribute to making a slideshow accessible and inline with modern standards. First, the user needs to have the ability to keyboard navigate within the slideshow. This includes keyboard controls like previous slide and next slide. If there is text within the slide, keyboard navigation should allow users to tab into this text as well.

Secondly, a screen reader should be able to identify whether a user has tabbed into a slideshow, and identify which slide in the series is being displayed. Additionally, if there is text within a slide, a screen reader should be able to read this as well.

Though slider keyboard navigation could be developed entirely from scratch, one slider plugin in particular offers a robust javascript API that allows for custom functionality. That plugin is called Slider Revolution. Because keyboard navigation is so important to accessibility, Slider Revolution’s built in functions are very useful.

In the code below, navigation functionality for the previous and next slides are added.

In this case, Slider Revolution’s functions for next slide and previous slide can be bound to the left and right arrow icons on the slideshow. These slider controls can be used with a traditional mouse as well as keyboard navigation.

Speaking of keyboard navigation, the user will need to tab, or focus, into these new custom slider components. To accomplish this, the “tab-index” html attribute can be utilized. Tab index, as one might expect, allows the user to tab into an element on the page. A tab index of 0 uses the natural page flow to set the tab order. This makes the most sense for this particular use case.

This code example shows how to add both aria-labels and the tab index attributes to a slider.

Now that the slideshow is full navigable via mouse or keyboard, some screen reader enhancements can be made as well. Modern screen readers can identify where a user is on the page using aria labels. An aria label is an html 5 attribute that acts as a landmark that tells the screen reader to identify an element that’s getting focus. Aria labels can be added to the slideshow’s main container, the containers for each slide in the series, as well as text inside each slide. In the code above, an aria label is added to the main slideshow container using the .attr() method. With these aria labels attached, screen reader users will hear an audio cue confirming which element of the slide show is getting focus.

Combining all of these components adds up to a slideshow that’s more accessible than most!

SSL and HTTPS – Everything You Need to Know

What is SSL?

SSL (Secure Sockets Layer) is a standard security technology for establishing an encrypted link between a server and a client—typically a web server (website) and a browser (e.g., Chrome, Safari, Internet Explorer); or a mail server and a mail client (e.g., Outlook).

Originally HTTPS was designed to allow for sensitive information to be safely exchanged over the internet, today it is a best practice for all websites.

Here are the top four reasons why every new website being built today should be served over HTTPS:

  • SEO – Search engines have started to rank sites that are served over HTTPS higher than comparable HTTP sites
  • Trust & Security – HTTPS makes man-in-the-middle attacks much more difficult and establishes a level of trust with the server you are connecting to
  • Surveillance – The rise of government surveillance, both foreign and domestic
  • It’s easy! Setting up HTTPS is now generally easy to do and SSL certificates can now be purchased and installed for free

How SSL Works

The lack of encryption with http:// URLs makes it very unsafe to browse and interact with websites that contain sensitive information, like bank websites, shopping websites, or any website that you login to, and especially any website where you enter a credit card number.When you visit a website at an http:// URL, information is sent through the network (“over the wire”) unencrypted, and you have no guarantee that the server you are connecting to at the other end is actually the server you think it is.

The https:// protocol solves these problems by forcing the network packets to be encrypted and guaranteeing via a third-party that the server on the other end is the one and only valid server for that URL. HTTPS makes man-in-the-middle attacks far more difficult and establishes a level of trust with the server you are connecting to.

The Certificate Authority

The third-party that establishes this trust is the “Certificate Authority”. The Certificate Authority sells SSL certificates and creates the network “handshake” that happens when connecting to a website. This way you can be sure when browsing over HTTPS that the server you are connecting to is the server you are asking for, and that any network packets you pass back and forth will be encrypted.

How to Implement SSL

The process of purchasing and installing an SSL certificate is generally very simple, and many web hosts will both sell and install SSL certificates in one step. You can also purchase an SSL certificate yourself from a certificate authority like RapidSSL and then ask your host to install it for you.

Although SSL certificates can still be expensive when purchased through certain certificate authorities, a new initiative led by a group of the biggest internet companies in the world called Let’s Encrypt is promising to provide top notch SSL certificates for free. As of January 2016 this service is in public beta, but very soon it will be the go to place for acquiring free SSL certificates.

Standard vs. Wildcard SSL Certificates

The only decision a potential SSL certificate purchaser needs to make is whether to get a standard SSL certificate or a special SSL certificate called a wildcard certificate. Standard SSL certificates protect a single domain like mightyminnow.com but don’t protect subdomains like hello.mightyminnow.com, whereas wildcard certificates can protect one level deep into subdomains. If your domain name has any subdomains that you want to serve over HTTPS, you’ll want to purchase a wildcard certificate.

What Now?

If you want your website to be more secure, better trusted and better “liked” by Google – consider purchasing and configuring an SSL certificate.

Dynamically Populate Gravity Forms Drop Down Fields

Gravity Forms is one of the best form plugins for WordPress powered websites. It allows you to quickly and easily create a form by dragging and dropping form elements into the editor, change their names, properties and settings. One of many elements available to use is the drop down field. You can either add the values manually using the form editor or populate all items dynamically via filters in your code.

For this example we will be covering dynamic drop down population via filters. We’ll end up with a drop down field populated with a list of movies, which is set up as a custom post type in our WordPress installation.

The first thing we’re going to do is add a new drop down field to our form. Here is what it looks like when you expand the edit options:

Drop down field

In order to keep it organized, and since we’re going to dynamically populate the items, we can delete all the default items (First Choice, Second Choice, Third Choice) that Gravity Forms adds when you add the field to the form.

If you check the official Gravity Forms documentation, you will see that it suggests you to write down the Field Id (in this example, id = 5) so you can use it in your code to target the correct element to be populated.

Even though this will work, I would prefer to add a class to the element and check for this class when targeting the element in the code. This way there’s no need to worry about ids, which sometimes can be a problem if you work with different environments or servers where the ids can be different on each installation.

For this field, we’re going to use the class name ‘movies-dropdown’, set under Appearance > Custom CSS Class on our drop down.

Drop down settings

With our drop down set up in the form editor, it’s time to created the logic behind it. The filter we’ll be using is the ‘gform_pre_render’ filter, which is executed before the form is displayed and can be used to manipulate the Form Object prior to rendering the form.

Here is the code:

 

Gravity Forms is an great plugin and it allows you to build pretty much any custom functionality using its Hooks and Filters, and there are many others you can use. For more information and details about all of the Gravity Forms features, you can always refer to their official API Functions documentation.

Hope this helps and see you next time!

Working with JSON

This week I wanted to talk a bit about JSON and how powerful it can be for developers. JSON played a big role in the creation of my very first plugin. Short for Javascript Object Notation, JSON has flexibility and a relative easy-to-learn format that can really help make working with complicated data structures easier for developers.

Typically you’ll see JSON used as the data format for sending back end data to a script on the front end and for responses from external APIs. In the case of my plugin, I wanted to display my “badges” that I earned from an online learning site. These badges, as well as pretty much every other piece of data tied to my account, are available in JSON format on this online learning site via their API. I can see data from every single course I have completed since I began using the site almost 2 years ago. I easily found the names of the courses, the dates I completed them, as well as the urls of both the courses themselves and the badge images tied to each course.

First I wrote a function to pull the JSON I needed from the site’s API:

This function simply returns the data from the API in JSON format. Notice how the $wp_username variable gets passed in so that any user’s info can be returned, if it exists. I’m also running the JSON through PHP’s json_decode() function before returning it, which will turn it into a standard PHP object that I can access just like any other object in PHP. This will come in handy throughout the process.

Here is a small sample piece of the raw JSON returned by the function:

First, notice how “badges” is a nested array. All of the data related to badges is in this array. I can easily filter through the data and get only the pieces I want by interacting with the PHP object returned by my function above:

Here I’m using count( $wp_profile->badges ) to get the number of total badges attached to my account. I want to display my most recent badges first and they are returned oldest first from the API, so I count the total number of badges and then use a for loop that decrements on each interation to build my output starting with the most recent badge. This loop could continue all the way down until my very first badge, or I can stop after a specific number.


From here, we can begin isolating the individual pieces of data that we want to display. Notice that every piece of data we need must start at the highest level of the JSON tree, stored in the $wp_profile variable. We then use the “->” symbol to move one level down into “badges”. We continue to use this symbol down through the levels of arrays, getting more specific until we get what we need. The curly brackets hold the specific names of the data we are looking for , including “badges”, “name”, “courses”, “title”, “url”, and “icon_url”. See the text block above to look at this code in action. Now that we have our data, all we need to do is wrap it in html markup. Now we are free to style and arrange this data as needed.


Obviously there is still plenty of work left to do to get a fully functioning plugin. However, the flexibility and simplicity of using JSON moves things along tremendously. This was a simple example showing the potential power of JSON, and the possibilities are endless! Hopefully you found this piece informative, and that it inspires you to jump into JSON for your own development. Good luck!

Google’s Mobile-Friendly Search Algorithm

Mobile-Friendly Search ResultMobile internet usage continues to grow. In fact, global internet usage on mobile devices has surpassed desktop internet usage in 2014 according to ComScore. We at MIGHTYminnow have been early adopters of mobile-friendly standards, and currently ensure our client’s websites are developed to be responsive. A responsive website displays beautifully on devices of all sizes and offers no barrier for user interaction and engagement on mobile devices.

Since Google’s search results are always about relevance, it makes perfect sense that they would serve search results to mobile device users that are mobile-friendly. This is exactly what Google will begin doing on April 21st when Google launches their mobile search algorithm, which will consider mobile friendliness as a ranking factor. Currently Google’s mobile search results include a handy label next to mobile-friendly sites letting users know that these sites will display well on their device. The next step will actually favor mobile sites in the search results. This means that if your website is not mobile-friendly, mobile users will have a hard time finding your website through Google search on a mobile device.

To find out if you website is mobile-friendly, try Google’s Mobile-Friendly Test.

Need help making your website responsive? Have questions? Contact us!

WordCamp SF 2014 Review

The MIGHTYminnow team was out in full force for this year’s WordCamp SF, and what a great event it was! All of the presentations were excellent, we learned a ton about the exciting new features coming soon to WordPress, and the positive energy of the WordPress community was palpable throughout the entire weekend. The future of WordPress is brighter than ever!

We got so excited watching the presentations that we thought we’d go through a couple of our favorites and offer some of our thoughts in response. All of the WordCamp presentations can be viewed on WordPress.tv, including a great presentation by our own Senior Developer Mickey Kay, and we highly recommend giving them a watch. Without further ado:

Andrew Nacin: The Future of WordPress is Global

Nacin is one of the WordPress lead developers and a key figure in the WordPress community, and his talk on growing WordPress internationally was very interesting. In the last couple of years the WordPress core team has been working hard to make core 100% translatable into not just any language, but into any locale. They’ve done this by wrapping each of the 4,000+ strings that are unique to WordPress in an internal translation function, so that each string will always dispay on the screen in the language that the WordPress user has selected. Then they hooked the translation library up to GlotPress, a translation engine project maintained by Automattic that anyone can submit translations to, and with the help of the website translate.wordpress.org the WordPress community has already translated the platform into 40+ languages.

This is huge, because as Nacin pointed out, only 5% of the world’s population speaks English as a first language. With WordPress now ready to use in every major language on the planet, we can expect a massive amount of international growth in the platform in the near future, and that means more developers, more content creators, and more people involved in helping to make WordPress the best publishing platform on the web.

But the core team isn’t stopping there. The big announcement during Nacin’s presentation was that in addition to core being fully translatable, all plugins and themes in the WordPress.org repository are now translatable using the same process as core via the translate.wordpress.org website. This means that you can write a plugin or a theme, publish it in English to the official repo, and anyone else in the world can at any time hop on translate.wordpress.org and write translations for the unique strings in your plugin or theme. Then users of the plugin or theme who are using WordPress in another language can use your plugin or theme without you as the developer having to do any of the translation work!

This is going to be huge for WordPress, and we’re very excited to see the community grow as WordPress becomes the first truly global web platform ever.

Sam Hotchkiss: Data First – How APIs are Changing the Internet

There was a lot of discussion at this year’s WordCamp SF about the new WordPress API, which is slated to be merged into core in early 2015, and Sam’s talk was all about APIs. Although there have been solutions for externally working with WordPress data for a while, the new WP-API represents a huge step forward over the existing solutions and will enable a whole new generation of external apps to be built on top of WordPress. This is very exciting.

The goal with an API like this is to provide a way for the abstract data that is inside WordPress to be used outside of a WordPress install. Almost everything that you can do from within a WordPress install will eventually be possible to do from a completely separate app that can communicate with the WordPress install using the API.

This means that entirely new wp-admin back-end user interfaces or front-end user interfaces can be developed on top of the WordPress data model, allowing WordPress to be used only as a system for interacting with abstract data. In the near future, there might be several popular flavors of the wp-admin back-end to choose from, some tailored for bloggers and casual users and others for businesses with specific needs. It’s conceivable that every major use case for WordPress could eventually have a custom wp-admin, or even several competing wp-admins that offer different optimizations and workflows.

One of the possibilities that we are most excited about is the potential to create front-end UIs that behave like native applications. Popular JavaScript frameworks like Backbone.js could be used to create WordPress sites that respond to user input immediately and never need to refresh the page, and front-end UI wouldn’t even need to live on the same server as the WordPress install because it could communicate with the WordPress install using the API.

The future of the web is all about freeing data from the murky depths of databases and clunky UIs, and the new WordPress API will allow WordPress data to flow more freely around the internet than ever before. We’ll definitely be keeping our eye on the new WP-API.

Guillermo Rauch: Realtime Communication with Socket.IO and WordPress

The presentation given by Guillermo Rauch about using his socket.io real-time web engine with WordPress was simply incredible. He’s clearly thought a lot about how the web of the future will function, and by creating socket.io he has allowed us all to start building futuristic websites today.

Socket.io keeps a connection between the client and the server open after the initial page load, and this allows the page to keep updating itself in real time based on the user’s interaction with the page, or new data from the server, or both. It can be used to create things like a collaborative online whiteboard that multiple users can draw on at the same time, or a super-fast chat application, or a web audio synthesizer where multiple users are collaboratively making music together in real time.

The example integration with WordPress that Guillermo showed off during his presentation elicited disbelieving gasps from the audience. In just a couple of minutes he live coded a script that counts how many users are reading a post at the same time and sends this information to all of the users reading that post. As more people in the audience jumped on his demo site during his talk we could all see the number on the page rising and rising, all in real time. It was totally cool.

After seeing his presentation we’re more convinced than ever that the future web will be all about real time client server communication, and we’re very glad that people like Guillermo are out there building the tools to make it all possible.

Conclusion

There has never been a better time to be part of the WordPress community, and all of the great presentations that we saw at this year’s WordCamp and the enthusiasm and mutual respect that we felt from everyone all weekend really drove this point home. Being a part of an open source web project like WordPress is a very special thing, and we are more excited than ever to keep using WordPress for our client projects and to help contribute to the growth and success of the platform for many years to come.

Include Private/Draft Pages In Parent Dropdowns

Screen Shot 2014-09-02 at 3.52.08 PMBy default, WordPress only includes published pages in the dropdown select menu that allows you to choose a parent for a particular page. This is a pretty well documented problem that is yet to be addressed in core. Not a huge issue, however it can cause some pretty pesky problems.

For example, say you have a parent page and a child page that aren’t quite ready to share with the world, so you want to make them private. So you edit the parent page and set it to private. Then you go to the child page to set it to private. Alas, the parent page will no longer appear in the dropdown “parent” menu, and thus if you save the child page at all, it becomes parentless. No fun, right?

So this snippet fixes that problem by adding private and pending (awaiting review) pages to the parent dropdown menu – and it works for bulk editing, quick editing, and editing in a single page view. If you want to tweak the post_status types that are included, just edit the array listed in the code, using values from the WP_Query codex page.

How to Properly Move the Entire Site Footer in Genesis

How to properly move the Genesis site footerWe recently had the need to move the entire .site-footer div in Genesis. There are various tutorials out there that suggest using the following code to relocate your footer content:

However this won’t actually move the entire .site-footer div. On the contrary, it will only relocate the contents of the div, which means you’ll end up with:

  1. An empty .siter-footer div
  2. Your site-footer content orphaned somewhere on your page with no good semantic classes or IDs

Not good, right?

So if you want to properly move the entire site footer, use the following code (making sure to substitute the desired hook in place of new_hook below):