Personally, I'd be happy to see all pop-ups go away, but this is an interesting review of the evolution of pop-ups and some ways to make them work (or replace them) on mobile, while still following Google's guidelines.
Smashing Newsletter With useful tips for web devs. Sent 2× a month.
You can unsubscribe any time — obviously.
Are mobile pop-ups dying, or will they simply undergo another adaptation? If they continue to remain effective, how should designers make use of them, especially in mobile web design? Are there alternatives? Let’s see what the research says.
The pop-up has an interesting (and somewhat risqué) origin. Were you aware of this? The creator of the original pop-up ad, Ethan Zuckerman, explained how it came into being:
Specifically, we came up with it when a major car company freaked out that they’d bought a banner ad on a page that celebrated anal intercourse. I wrote the code to launch the window and run an ad in it. I’m sorry. Our intentions were good.
Basically, the client was dissatisfied with having their ad placed beside an article discussing this less-than-savory subject. Rather than lose the ad revenue or, worse, the client, Zuckerman and his team came up with a solution: The car company’s ad would still run on the website, but this time would pop out into a new window. Thus, the pop-up gave the advertiser an opportunity to share
The most common site issues and how to fix them - from the perspective of the WordPress host.
Consumers typically have their own experiences when it comes to web hosting and their own opinions. If you search Google for reviews for any web hosting provider you’ll find dozens of results. Usually, there are a lot more negative reviews than there are positive ones. I thought I would flip that around and share some WordPress hosting challenges from the perspective of the WordPress host and how I frequently solve them. I have compiled a list of bad web practices and recommendations on what not to do on your site, based on thousands of hours of customer interactions, support tickets, and troubleshooting I experience on a daily basis. Some of these range from beginner mistakes to more complex issues. A lot of these can be the difference between having a successful WordPress site and a failure. Picking the right web host is very important. But your decision also goes hand-in-hand with educating yourself on how to best optimize your WordPress site.
I often observe that even seasoned developers focus on what they are good at, which is building solutions and sometimes neglect or don’t have time to learn the latest optimization practices. Whether you are a WordPress user just
Morten Rand-Hendriksen explains that before we can talk about ethical design, we need to understand what ethics is. Morten has a degree in philosophy, so he's well-qualified to address this issue.
Every design decision is a decision made on behalf of other people, those we often refer to as “end-users.” As the creators of designed experiences used by people all over the world, it is our responsibility to think carefully about how our decisions impact the person on the other end of the conversation. Even small and seemingly insignificant decisions can have enormous implications, and ethics can help ensure the longevity of our designs and help us carve paths to better futures for everyone. Earlier this month, a friend reached out with a question:
How hard would it be to use the processing power of computers visiting their site to mine for cryptocurrencies?
The first I heard of cryptocurrency mining (cryptojacking for short) through websites was a news story from September 2017 about a script found on the website of a TV network called Showtime. Since then, similar scripts have appeared on everything from government websites to good old-fashioned blogs. Sometimes the scripts are put there by hackers (first documented by Scott Helme), other times by the site developers themselves.
The most recent example is from the folks at Salon who are testing out cryptojacking as
The author of Page Builder Sandwich shows how to make your plugins extensible so that other developers don't have to modify your source code. It's a nice tutorial. I guess Smashing Magazine is publishing WordPress content again. They were a good source for a long time but a few years ago they discontinued the practice. Glad to see them back.
Wonderful, friendly people who keep this lil' site alive — and get smarter every day. Are you smashing, too? →
Have you ever used a plugin and wished it did something a bit differently? Perhaps you needed something unique that was beyond the scope of the settings page of the plugin.
I have personally encountered this, and I'm betting you have, too. If you're a WordPress plugin developer, most likely some of your users have also encountered this while using your plugin.
Here's a typical scenario: You've finally found that plugin that does everything you need — except for one tiny important thing. There is no setting or option to enable that tiny thing, so you browse the documentation and find that you can't do anything about it. You request the feature in the WordPress plugin's support forum — but no dice. In the end, you uninstall it and continue your search.
Imagine if you were the developer of this plugin. What would you do if a user asked for some particular functionality?
The ideal thing would be to implement it. But if the feature was for a very special use case, then adding it would be impractical. It wouldn't be good to have a plugin setting that only 0.1%
Good read for people that are new to WordPress development, but maten know PHP
For validating a URL, WordPress’s function will have a similar impact, but only lets through allowed protocols. is not in the default list, so it would keep you safe. However, unlike filter_var, it’ll return an empty string (not a false) for a disallowed protocol that is passed to it. WordPress-specific Functions To Keep An Eye On
In addition to core-PHP potentially-vulnerable functions, there are some WordPress-specific functions that can be a bit of a gotcha. Some of these are very similar to the variety of dangerous functions listed above, some a little different.
WordPress Unserializes With maybe_unserialize
This one’s probably obvious if you read the above. In WordPress there’s a function called maybe_unserialize and, as you’d guess, it unserializes what’s passed to it if need be.
There’s not any new vulnerability that this introduces, the issue is simply that just like the core unserialize function, this one can cause a vulnerable object to be exploited when it’s unserialized.
is_admin Doesn’t Answer If A User Is An Administrator!
This one’s pretty simple, but the function is ambiguous in name, and so it’s prone
A great article from Jakub Mikita in which he shares the lessons he learned and the mistakes he made while developing Wordpress plugins.
Wonderful, friendly people who keep this lil' site alive — and get smarter every day. Are you smashing, too? →
Every WordPress plugin developer struggles with tough problems and code that’s difficult to maintain. We spend late nights supporting our users and tear out our hair when an upgrade breaks our plugin. Let me show you how to make it easier.
In this article, I’ll share my five years of experience developing WordPress plugins. The first plugin I wrote was a simple marketing plugin. It displayed a call to action (CTA) button with Google’s search phrase. Since then, I’ve written another 11 free plugins, and I maintain almost all of them. I’ve written around 40 plugins for my clients, from really small ones to one that have been maintained for over a year now.
Measuring Performance With Heatmaps
Heatmaps can show you the exact spots that receive the most engagement on a given page. Find out why they’re so efficient for your marketing goals and how they can be integrated with your WordPress site. Read article →
Good development and support lead to more downloads. More downloads mean more money and a better reputation. This article
WordPress is currently fully localized for over 65 languages and offers partial translations for an additional 95 locales. If you haven't internationalized your WordPress website yet, it's probably time to do so.
Wonderful, friendly people who keep this lil' site alive — and get smarter every day. Are you smashing, too? →
On September 30th, 2017, the international WordPress community united for 24 hours to translate the WordPress ecosystem. For the third time, #WPTranslationDay fused an all-day translating marathon with digital and contributor day events designed to promote the value of creating accessible experiences for global users, better known as "localization".
As an open-source community, we should all strive to localize our open-source contributions. Before you can transcribe your digital assets though, you have to internationalize your codebase.
The terms “internationalization” and “localization” are often used interchangeably, though they technically represent two different aspects of the translation process.
Internationalization (I18N) is the process of internationalizing or adapting your theme or plugin to translate it into any language in the world.
Localization (L10N) is the subsequent process of localizing, or translating your internationalized tools into a given language.
WordPress is currently fully localized for over 65 languages
Smashing Magazine recently moved from WordPress to Netlify. They wrote an interesting article about the conversion into a static website by routing all of the dynamic content through a CDN.
Smashing Magazine gave us a little surprise recently: Its website has been completely overhauled, switching away from WordPress to Netlify. One of the several reasons for the move is cost: Netlify allows for a static version of a website, which can be hosted directly on a content delivery network (CDN), reducing the number of web servers that are needed. In addition, because CDNs are located near users, accessing the website becomes faster. It is a wise move, indeed. However, this decision comes with the consequence of leaving the WordPress ecosystem. If your website needs to support AMP or Dropbox or AWS S3 or pretty much anything else, most likely there is a WordPress plugin for that. The WordPress ecosystem, which relies on a huge community of developers, enables us to constantly incorporate new features into our websites with no major effort, or at least with much less effort than is required to develop the functionality from scratch. Moving from WordPress to Netlify has trade-offs: speed versus functionality, cost versus community support.
What if it were possible to combine the best of both worlds? That is, what if we could have a WordPress website the dynamic content of which
Muhammad Muhsin created this tutorial to show how to create a single page site using the WP Rest API and React. It is a massive tutorial that moves rather quickly. I found it interesting as much for the concepts and ideas as the actual project.
Wait, What? WordPress REST API?
Yes, the WordPress REST API will help you build the back-end foundation for your web application. This is a good choice for your web application’s back-end technology if you are building a content-driven solution. WordPress will interoperate smoothly with other technologies as well; you could use Node.js as the focus of your application to connect to other RESTful services.
The WordPress REST API is a game-changer for WordPress, which can now safely be called a web application framework — not just a CMS. Now that the front- and back-end are completely decoupled, WordPress can be used as a mobile app back-end or as a back-end for any system focusing on content.
But why WordPress? The reason: You will be amazed at the functionalities
How to use Cloudflare or other cloud DNS service to get free SSL. Note that this is "flexible SSL" and not "full SSL".
This is Smashingmagazine's in-depth article about WP-CLI and how to use it.
The command-line interface has always been popular in the world of developers, because it provides tools that boost productivity and speed up the development process. At first sight, it might seem hard to believe that using the command line to perform certain tasks is getting easier than using a graphical interface. The purpose of this article is to clear up your doubts about that, at least concerning WordPress tasks. WordPress provides a graphical user interface for every administrative task, and this has helped to make it the most popular content management system on the web. But in terms of productivity, working with the command line enables you to accomplish many such tasks more efficiently and quickly.
WP-CLI is a set of command-line tools that provide such functionality for managing WordPress websites. In this tutorial, I’ll describe the benefits of using and extending WP-CLI, and I’ll present several advanced commands to make your life easier when working with WordPress.
Note: The following steps require a UNIX-like environment (OS X, Linux or FreeBSD). If you are a Windows user, you will need a command-line tool such as Cygwin or a virtual machine.
Installation of WP-CLI is
Morten makes the case for using the CCS grid and provides an in-depth overview and tutorial. For an example, he uses the CSS grid with the _s theme.
Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now! Industries often experience evolution less as slow and steady progress than as revolutionary shifts in modality that change best practices and methodologies seemingly overnight. This is most definitely true for front-end web development. Our industry thrives on constant, aggressive development, and new technologies emerge on a regular basis that change the way we do things in fundamental ways.
Today, we are in the early stages of such a revolutionary shift, brought about by CSS Grid Layout. Much of what we know of the possibilities, limitations and best practices surrounding web layouts is effectively rendered obsolete by this new layout module, and in their place we find new possibilities, limitations and best practices that will take us into the next era of web design.
Much has already been said about the technical aspects of CSS grid and its one-dimensional cousin flexbox by people smarter than me. In this article, I want to
The author makes a case for static website generators, referencing the performance / security downsides of WordPress's dynamic nature to build their case. A downside, though, is the complexity for end users.
At StaticGen, our open-source directory of static website generators, we’ve kept track of more than a hundred generators for more than a year now, and we’ve seen both the volume and popularity of these projects take off incredibly on GitHub during that time, going from just 50 to more than 100 generators and a total of more than 100,000 stars for static website generator repositories. Influential design-focused companies such as Nest and MailChimp now use static website generators for their primary websites. Vox Media has built a whole publishing system around Middleman. Carrot, a large New York agency and part of the Vice empire, builds websites for some of the world’s largest brands with its own open-source generator, Roots. And several of Google’s properties, such as “A Year In Search” and Web Fundamentals, are static.
Static websites are hardly new, going all the way back to the beginning of the web. So, why the sudden explosion in interest? What’s up? Why now?
The first ever website, Tim Berners-Lee’s original home page for the World Wide Web, was static. A website back then was a folder of HTML documents that consisted of just 18 tags. Browsers were simple document navigators
This is a great article that takes an in-depth look at the many facets of WordPress support. I especially liked his use of the "four aspects of a message" to get as much information and understanding as possible. There are lots of good insights and tips for those offering support.
6 Comments A year and a half ago I released my first premium WordPress plugin, Advanced Ads. It’s true that once the plugin was out, my most important task was support. Support is a crucial element that determines not only the success of the project, but also how happy everyone will be, me included.
With this in mind, I constantly optimized my approach to providing support. Let me share with you what I learned. Read on to find out:
what I learned about support,
the four sides that will help you understand each request,
which fears of mine proved to be unfounded,
what an efficient support system looks like,
how to optimize support.
The main purpose of support is to help people use and understand a product. Therefore, support is not only an email reply or documentation. It extends to the following:
making features self-explanatory,
writing understandable labels,
fixing issues caused by other plugins,
making the user feel like you are ready to help.
Beside helping others use your product, you also benefit from support.
I spend a lot of time with every problem reported for the first time, because I know that for every person who reaches out, many more might not and either live with
Really smart article about the improving capabilities of "advanced website builders" (SquareSpace, Wix, Weebly, etc.) and the implications of SaaS websites for custom development shops.
4 Comments Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now!
Advanced website builders — the tools provided by Squarespace, Wix, Weebly, The Grid and more — produce websites that look and feel like they were designed and coded by humans. They’re also software as a service, which is a different business model than traditional, custom-developed websites. So, should companies use them? At some point, will they replace custom development?
In short, yes.
Self-serve website-builder platforms are quietly becoming very powerful. A lot of us write them off without much thought, but it’s time for agencies and custom development shops to pay attention. It won’t be hard to stay ahead of the builders… once we acknowledge they’re coming for us.
In 2004, the year my web design agency incorporated, a professional website experience cost six figures and took half a year or more to launch. Today, a business can buy a website on Squarespace for $12 per
Excellent article, including a checklist on how to prepare your site for HTTP/2, for when your server finally supports it.
The Hypertext Transfer Protocol (HTTP) is the protocol that governs the connection between your server and the browsers of your website’s visitors. For the first time since 1999, we have a new version of this protocol, and it promises far faster websites for everyone. In this article, we’ll look at the basics of HTTP/2 as they apply to web designers and developers. I’ll explain some of the key features of the new protocol, look at browser and server compatibility, and detail the things you might need to think about as we see more adoption of HTTP/2. By reading this article, you will get an overview of what to consider changing in your workflow in the short and long term. I’ll also include plenty of resources if you want to dig further into the issues raised. My aim is to give you enough of the background to be able to make good decisions as you plan your move to HTTP/2.
HTTP is an old protocol, initially defined in 1991, with the last major revision — HTTP/1.1 — published in 1999. Websites in 1999 were very different to the websites we develop today. In http2 explained, Daniel Sternberg notes that the amount of data now required to load the home page of an average website is 1.9 MB,
Smashing Magazine guides have been recognized for their thoroughness and relevance. In this tutorial Daniel Pataki walks you through the process of creating a website with WordPress, from picking a domain name, through installation and configuration, to analytic tracking. It is an excellent beginners guide.
Earlier this year, WordPress passed the 24% mark, running almost a quarter of all websites — and for good reason. It has a loyal user base and scores of dedicated developers who bring better features to the system year round. This article is for those of you who either are new to WordPress or are regular users who want to learn about the best way to run a WordPress website. We’ll be learning about working with domains, installing WordPress, managing content and using great plugins and themes to secure our website and make our content shine.
I want to stress the same thing as I do when writing code-heavy articles: If you don’t understand everything here fully, don’t sweat it! Nothing is particularly difficult, but there is a lot to take in. We’ve all been there, we’ve all been confused by this stuff before. Don’t be afraid to get your feet wet and experiment; that’s how all of us learn about WordPress!
This article will be quite lengthy, so I thought it would be easier for you to see what we’ll be talking about in advance. If you already know about some of these, use it as navigation to skip to the parts you’re interested in.
All About Domain Names
The domain name identifies your website
Nice overview of the new responsive image support built into WordPress core. The article also discusses how theme authors can configure responsive images for their themes.
While the growing adoption of responsive images cannot be ignored, it can be very difficult to employ the functionality under the constraints of a large CMS like WordPress. Although it is entirely possible to write the feature into your theme on your own, doing so is a challenging and time-consuming endeavour. Thankfully, with the launch of WordPress 4.4, theme developers and maintainers will find it much easier to introduce responsive image functionality into their themes. In this recent launch, the RICG Responsive Images plugin has been merged into WordPress core, which means that responsive image support now comes as a default part of WordPress. Let’s take a look at how the feature works, and how you can use it to get the best support for your WordPress site.
With WP version 4.4 the RICG Responsive Images plugin has been merged into WordPress core. Responsive image support now comes as a default part of WordPress. (View large version)
How The Feature Works
As soon as you update to WordPress 4.4, all of your content and featured images will have srcset and sizes attributes, which are filtered to ensure that every available image size is present while maintaining the dimension of the
This article has a bunch of interesting snippets for customizing the WordPress admin. Most of them involve removing elements to simplify or make it harder for a client to make mistakes. I liked, for example, adding a help 'tip' to the editor page to explain about new lines.
WordPress is a wonderfully powerful CMS that ships with many versatile features giving it the flexibility to work out of the box for a wide range of users. However, if you are a professional building custom themes and plugins, sometimes these features can be problematic. The same features and options that allow off-the-shelf themes to adapt to many different use cases can sometimes also be used to undermine a carefully designed custom theme built for a specific use case. The following article comprises a collection of code snippets that I use again and again on almost every WordPress project. What they all have in common is that they limit functionality that is either unnecessary, confusing, or unsafe. Everything that follows can be used on any site, but these tips are especially applicable for professionals making custom themes and plugins for clients. The notable distinction is that custom themes can be built to serve a specific purpose. So the blanks for the authors’ content can and should also be much narrower. A well-designed WordPress theme should make as many design decisions as possible so the author doesn’t have to.
There is no good reason why anyone should be live-editing
WordPress 4.4 added Meta Data options for Categories and Tags. This is a good tutorial on using the new functions added for working with Term Meta Data.
WordPress 4.4 introduced term meta data which allows you to save meta values for terms in a similar way to post meta data. This is a highly anticipated and logical addition to the WordPress system. So far, the post and comment meta systems allowed us to add arbitrary data to posts and comments. This can be used to add ratings to comments, indicate your mood while you were writing a post, attach prices to product posts, and various other information you think is relevant to your content. As of the newest version of WordPress, meta data can now be added to terms which allows us to create features like default category thumbnails in a standardized way. This tutorial will show you how you can edit, update and retrieve these meta data for terms.
The logic behind term meta data is not new, already being used for posts, comments and users.
To enable meta data for terms, the new termmeta table was introduced. It saves the combination of the term_id, meta_key and meta_value, plus an incrementing meta_id.
Four new functions were introduced to handle create, read, update and delete (CRUD) operations for term meta data:
add_term_meta(): adds the meta data
update_term_meta(): updates existing meta
Highly recommended. This is a great overview and explanation of the components and steps involved in serving up a WordPress page as well as the various points at which the process can be optimized. Although it focuses on WordPress and PHP, the article would be of benefit to anyone involved in developing, running, or maintaining websites.
Editor’s Note: Today marks a special day for WordPress. Powering many websites (and yes, Smashing Magazine is one of them), it celebrates its 13th birthday today. Happy birthday, dear WordPress! Here’s to many more! Do you remember when you could run a “fast” WordPress website with just an Apache server and PHP? Yeah, those were the days! Things were a lot less complicated back then.
Now, everything has to load lightning-fast! Visitors don’t have the same expectations about loading times as they used to. A slow website can have serious implications for you or your client.
Consequently, the WordPress server stack has had to evolve over the years to keep up with this need for speed. As part of this evolution, a few gears have had to be added to its engine. Some of the older gears have had to change as well.
The result is that the WordPress server stack looks quite different today than it did a few years ago. To better understand it, we’re going to explore this new stack in detail. You’ll see how the various pieces fit together to make a WordPress website fast.
Before diving in, let’s zoom out and look at the big picture. What does this new
A few things that Smashing Magazine has learned over the last year about the performance challenges of this very website and about the work they have done recently.
Today Smashing Magazine turns eight years old. Eight years is a long time on the web, yet for us it really doesn’t feel like a long journey at all. Things have changed, evolved and moved on, and we gratefully take on new challenges one at a time. To mark this special little day, we’d love to share a few things that we’ve learned over the last year about the performance challenges of this very website and about the work we’ve done recently. If you want to craft a fast responsive website, you might find a few interesting nuggets worth considering. – Ed. Improvement is a matter of steady, ongoing iteration. When we redesigned Smashing Magazine back in 2012, our main goal was to establish trustworthy branding that would reflect the ambitious editorial direction of the magazine. We did that primarily by focusing on crafting a delightful reading experience. Over the years, our focus hasn’t changed a bit; however, that very asset that helped to establish our branding turned into a major performance bottleneck.
Good Old-Fashioned Website Decay
Looking back at the early days of our redesign, some of our decisions seem to be quick’n’dirty fixes rather than sound long-term solutions. Our advertising
Extensive explanations, tips, and examples of using WP hooks. Good way to dig in and get started with hooks.
Even though hooks in WordPress are amazing and everyone uses them knowingly or unknowingly, I get the impression that some advanced users and especially front-end developers still seem to avoid them. If you feel like you’ve been holding back on hooks, too, then this article will get you started. I am also going to reveal some interesting details to anyone who thinks they are familiar enough with hooks. You’ll want to read this article especially if you’d like to:
understand code snippets with hooks such as those found in forums;
extend WordPress, plugins and themes without breaking updates;
learn how to avoid common problems;
allow others to extend your code.
My examples are taken from WordPress’ core and from my work as a freelance developer and author of the Advanced Ads plugin.
Whenever you want to do something or customize something in WordPress, then there is very likely a hook you can use.
The “do” hook is called an “action.” Wherever an action is defined, you can execute your own code. Here are some examples:
send an email to the author once a post is published;
load a custom script file in the footer of the page;
add instructions above the login form.
The most important thing
A great article presenting multiple approaches on how to build a settings page for your WordPress plugin.
Anyone who has created a WordPress plugin understands the need to create configurable fields to modify how the plugin works. There are countless uses for configurable options in a plugin, and nearly as many ways to implement said options. You see, WordPress allows plugin authors to create their own markup within their settings pages. As a side effect, settings pages can vary greatly between plugins. In this article we are going to go over three common ways you can make your plugin configurable. We will start by creating a settings page and create our fields using the default WordPress Settings API. I will then walk you through how to set up your fields with a custom handler. Finally, I will show you how to integrate a great configurable fields plugin Advanced Custom Fields (ACF) into your own plugin.
Since this is a long post, here is a table of contents with links to each of the major sections:
For code examples please see the repository I have set up to accompany this post.
Creating Our Plugin And Settings Page
The first thing we need to do is set up our plugin and create a settings page. All three approaches outlined in this article start with the plugin structure below. This plugin