The functions.php is a file that can be found in every WordPress theme. Not only does it allow you to control important theme features like sidebars, widgets, and the navigation menus, but it also enables you to add small code snippets that activate or deactivate code fragments or manipulate many important aspects related to your website. Basically, this file works like a plugin and loads automatically when WordPress is initiated. Of course, you can also integrate the code snippets in their custom plugin that you’d create specifically for those snippets and your website. We provide the most useful snippets for either use.

This Applies for All Graphics of This Article: Clicking it Opens the Respective Gist at GitHub

1 – Replacing the WordPress Login Logo

This way, the login design can be adjusted to a possible customer’s corporate design.

2 – Restricting Access to Menu Points in the Backend Based on the Username

With this feature, you can deactivate the access to individual admin menu items based on the username.

3 – Setting the Excerpt’s Word Length

The standard excerpt is exactly 55 words long. That can be overwritten using this snippet.

4 – Removing the WordPress Admin Bar

With the release of WordPress 3.1, the admin bar was added as a new feature. While some people find it rather handy, other people consider it annoying. You can remove the admin bar with the following code:

5 – Deactivating the Side Jump Happening When Clicking “More”

When clicking “more” on an article excerpt, WordPress automatically adds a side jump. The jump can be deactivated when loading the page using this feature:

6 – Turning Off WordPress’ RSS Feeds

Static websites don’t need a feed, and this code allows you to turn them off easily.

7 – Removing the WordPress Dashboard Widget

With this code, you can deactivate the Dashboard widgets on the admin area’s landing page either completely or partially.

8 – Integrating Custom Post Types in the WordPress Search

To have Custom Post Types, which are available since WordPress 3.0, be displayed in the results of the WordPress search, this code is required:

9 – Tying Google Analytics Code Into the Footer

A few lines of code are all it takes to tie the Google Analytics code into the footer. This works for any other analytics code as well.

10 – Displaying a Favicon

A favicon is a small image that is displayed in your browser’s tab. With a favicon, your blog simply looks more professional. The image file favicon.ico only needs to be uploaded into the main index of your theme.

11 – Your Logo in the WordPress Dashboard

From time to time, this code can be very interesting, either because you want to individualize your website, or because you’re setting up a website for a customer. The path and the name of the logo might need to be adjusted.

The Result of the Code:

Source: Jacob Goldman’s Article on Smashing Magazine

12 – Editing Footer Text in the WordPress Admin Area

The text that is displayed in the website’s admin area can be changed at any time. This is how to edit the text:

13 – Creating Your Own Dashboard Widgets

Maybe you’ve asked yourself how some plugin developers are able to integrate their self-made widgets in the WordPress dashboard. This is quite simple, here’s a possible approach:

The Result:

14 – Displaying Dynamic Copyright Data in the Website’s Footer

Often, you’ll see sites with outdated copyright data or only including the newest year, when the WordPress feature was used for that. This is not a best practice, as copyright information in a pattern like © 2014 to 2016 is much prettier for websites that have been existing for a long time. Accomplish that with this small code snippet:

Following that, you need to add the following tag wherever you want the copyright to be displayed. For example, in the footer.php.

The Result:

15 – Remove Several Standard Author Fields From the Author Profile

When you develop something for a customer, he might want to add his contact information to his user profile. That’s good, but that area is already used to display fields for services which nobody will ever use. These useless input boxes can be removed using this code.

16 – Adding Author Fields to the Author Profile

If you can remove something, you can also add it. Here’s a code that adds truly important input boxes to your author profile.

The Result:

The additional fields can be displayed in the theme using the following tag:

<?php echo $curauth->twitter; ?>

17 – Manipulating the RSS Feed Footer

This feature can be used well to display advertisement or custom messages in the feed after every article.

In this case, we’ve created a feature that displays a message within every content of the feed. Before the actual content, the message »This article was written by Andreas Hecht” is displayed, followed by »Visit DrWeb.de” after the content. It is important that the feature is only shown in and assigned to the feed using “if(is_feed)“.

18 – Displaying Article Images in the Feed As Well

If you’re using the standard WordPress feeds, you might have noticed already that the article images don’t show up in the feed. This can be fixed easily using this code:

19 – Remove the Error Message on the Login Page

When entering your access information on the WordPress login page, you’ll receive a detailed error message when the information entered was incorrect. The message tells you exactly whether your username or your password was wrong. Apparently, hackers can take advantage of that, and thus, we’ll remove this message with the following code:

The Result is an Empty Error Box:

20 – Deactivating the WordPress Search Feature

When creating a static website, you might not need a search feature anymore. While it can be removed from the design easily, it will still be there and can potentially be abused by external users. This code does deactivate the search feature entirely.

(dpe)

Opera web browser has recently got a major update, and the new version, Opera 35, comes with several features and bug fixes, as well as enhancements.

For web designers and developers who work across multiple tabs, the newest version, Opera 35, lets you easily mute tabs. Thus, when you open multiple tabs, and if one of them starts playing that odd video, you need not worry about locating that tab and closing it; Opera 35 will handle it for you. Plus, if you wish to unmute any one specific tab or a set of tabs, and mute the rest, you can simply right-click on that particular tab and unmute it.

Plus, the download interface too has been revised and updated, and it now shows you all your downloaded files such as documents, videos and music, in a streamlined fashion.

Opera 35 also comes with a good deal of customization tweaks, and you can now change themes and other appearance options directly from the settings panel. You can decide the startup behavior of your browser, as well as customize the appearance of the bookmarks bar, cookies menu, and downloads interface individually.

The latest version of Opera builds up on the developments of the previous year. Back in 2015, Opera added video compression for Android devices, as well as features such as Opera Max that can reduce your data usage when viewing videos or streaming music online via mobile devices. Opera 35 for desktop further focuses on a revamped interface and distraction-free web browsing experience.

Opera is not as popular as the likes of Chrome or Firefox, but amongst mobile users, it has a decent user base. Plus, Opera on desktop is fully cross-platform, and works well with most major operating systems, including Linux. As such, it is a worthy contender in the world of web browsers, though Opera 35, with all its bells and whistles, still does not seem like a viable replacement for Chrome or Firefox anytime soon.

If interested, you can download Opera web browser here.

In many projects, responsive images aren’t a technical issue but a strategic concern. Delivering different images to different screens is technically possible with srcset and sizes and element and Picturefill (or a similar) polyfill; but all of those variants of images have to be created, adjusted and baked into the logic of the existing CMS. And that’s not easy.

On top of that, responsive images markup has to be generated and added into HTML as well, and if a new image variant comes into play at some point (e.g. a file format like WebP or a large landscape/portrait variant), the markup has to be updated. The amount of extra work required often causes trouble — so if you have a perfect product shot, you need to either manually create variants for mobile and portrait and landscape and larger views, or build plugins and extensions to somehow automate the process.

The post Automatically Art-Directed Responsive Images? Here You Go. appeared first on Smashing Magazine.

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

Is this the Perfect Save Icon?

Why Use Www?

Design Trend: Parallax with a Twist

12 Small CSS Frameworks to Use in your Web Designs

WordPress Desktop

The Inside Story of Uber’s Radical Rebranding

What to do When You Lose Motivation as a Designer

The List of UX Tools to Rule Them all

The Genius of WordPress (and Why it’s Doomed)

Inside Facebook’s Decision to Blow up the like Button

Designer Bio Generator

8 Habits of Veteran UX Designers

Elastic Circle Slideshow

Lists are the New Search

Building Project Comet: Evolving Onboarding

Call Me E-schmail: Conquering the Beast that is HTML Email

Making the User Trust your UI

Alphabet Becomes the Most Valuable Public Company in the World

28 Tips, Tricks, and Hacks for Adobe Photoshop CC

Site Design: InVision Labs

Flickr to Be Scaled Back as Yahoo Trims 1,700 Jobs

Five Reasons LinkedIn Had its Worst Day Ever

Google’s New Interactive E-Books Would Be Impossible to Print

When Graphic Design was a Protest Weapon

The Complete Beginner’s Guide to Content Strategy

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Vintage Design: 600+ Retro Vector Illustrations and Objects – only $17!

Source

I’ve already explained how to create a theme options page quickly and easily. Creating a custom page for theme options is optimal if you want to offer your users many features. But there’s another way of realizing a page for theme options. For a while now, WordPress has been offering the theme customizer. This is perfect if your theme doesn’t offer too many options. The customizer’s big advantage is its live preview. Every change made to the theme can be checked out before you transfer it to the website. This article shows you how to “feed” the Customizer with your features.

Creating theme options with the Theme Customizer is relatively easy and offers its users the big advantage of a live preview before saving the changes. The Theme Customizer got introduced with WordPress version 3.4.

Important to Know: No More Theme Options Pages for WordPress.org Themes

When you want to create a theme for the WordPress.org theme index, you have to use the Theme Customizer. Theme options pages are not allowed anymore since the 21st of October of last year.

Creating Theme Options for the Theme Customizer

Our example theme is the Ari theme by Elmastudio. It only provides the predefined options and can thus be extended nicely in the course of this tutorial. In the following, we’ll create an entirely new Theme Customizer page for the theme.

Important: All of the following code snippets can be clicked on to download the code directly from GitHub.

The Four Methods of the $wp_customize Object

The Predefined Settings

WordPress comes with some default settings that don’t need to be defined.

• title_tagline – Website Title and Tagline
• colors – Colors
• header_image – Header Image
• background_image – Background Image
• nav – Navigation
• static_front_page – Static Front Page

The Transport Versions – refresh vs. postMessage

However, if you want some of these features to be visible before saving them, you need to add them to the Theme Customizer feature. You can assign two “transport” versions.

Refresh means that after entering your settings within the Theme Customizer, the preview page is updated directly. After that, the new settings are visible.

PostMessage however, means real-time changes. When you change the blog name in the Theme Customizer, for example, the entered letters are visible immediately. For the transport method postMessage, you need an additional, small jQuery file.

Important to Know: WordPress’ Standard Features

The screenshot shows the standard features of the transport method »refresh“. However, you can also configure them for a real-time view as pictured.

Creating Theme Options With the Theme Customizer

Please set up a new file named customizer.php in your theme’s main index. You can either create the file in a pure text editor like TextEdit or an HTML Editor.

Paste the following code into the customizer.php:

First, an own class is distributed, and then the features are registered. Every code that we’ll write now belongs into this function.

Letting the User Adjust the Colors

We’re setting up a section for the colors that users are supposed to be able to choose from later. The link and the text colors can be edited. The code needs to be copied into the function that we just set up. In this case, we’ll access the transport method »refresh“, which doesn’t need to be defined as it’s the WordPress standard, as an example.

First of all, the code describes the options that can be altered by the user, like link and text colors. Furthermore, a standard, which is already defined in the theme’s CSS stylesheet, is set for each of the two options. This way, you don’t need to define the settings for each of the color options. The settings that the user can modify in the Theme Customizer are defined this way as well. Without this configuration, a new section in the setting options won’t appear in the customizer.

Finally, the code also defines the audits that allow for these settings.

Here, new WP_Customize_Color_Control activates the color picker that enables you to determine the custom colors.

By the way, I didn’t have to set up a “colors” section, as this happens automatically when audits are defined within that section.

Now, our Theme Customizer looks like this:

You can also adjust the colors with a color picker, but no changes will be made to the theme yet. To allow the changes to be applied to the theme, you need to adjust the theme’s header.php. Thus, copy the following code directly at the top of the finishing tag in the header.php:

Once you’ve done that, the color adjustments are directly visible in the customizer, before clicking »Save & Publish“. Immediately after choosing a new color, the page is refreshed, and the changes in color choice become visible.

The two variables take the changes from the customizer and transfer the values to the small inline CSS, which is responsible for the display of the new colors.

Showing the Options in the Theme

Here, we differentiate between the features provided by WordPress by default and the one’s we defined ourselves.

Implementing an Advertisement Block

In this case, it won’t be as easy as it was when editing the colors. More code is necessary. To begin, a new section has to be set up so that the new menu item can be displayed. To do that, we’re using the $customizer_object->add_section method.

The priority determines where the new menu item is displayed. The smaller the number, the closer to the top the menu item will be placed.

Defining the Settings

Here is where the $customizer_object->add_setting method comes into play.

Creating the Input for the Settings

To create the control that is responsible for the display of the setting options in the customizer, we need the $customizer_object->add_control($controller_object) method.

There are many different controller objects, depending on what you need. Here, we have used WP_Customize_Control, which is useful for input boxes. You can use it to create a text area, a text zone, check boxes, radio elements, and colors. There are also other controller objects such as WP_Customize_Color_Control, WP_Customize_Upload_Control, and WP_Customize_Image_Control to enter colors or upload a file or image.

The Provisional Result in the Customizer

Displaying the Advertising Block in the Theme

You need to place a small code snippet wherever you want the advertising block to appear.

Once you’ve chosen refresh as your transport method, there’s nothing left to do. When you chose the transport method postMessage, you need to write a little JavaScript in order for changes to be visible in real time.

The JavaScript for the Real Time Display of Changes

Create a JavaScript file within the theme index. Name it theme-customizer.js. Enter the following code into the file:

The Result in the Theme – Advertising Block

The newly defined advertising block can now be placed everywhere in the theme, filled with text, banners, or advertisements.

Activating the Ari Theme’s Dark Theme

Ari also offers a dark version that can be activated on the theme options page. But as we only want to learn about the Customizer, we will realize the switch option for the WordPress Customizer. The real-time view makes little sense here, as the changes are visible instantly upon refreshing the page even before saving. Thus, we’ll use the standard method »refresh” for the code.

I’ve chosen a checkbox for the activation of the dark Ari theme. By placing a checkmark, you’ll activate the dark theme.

Of course, the colors of the texts and links should be adjusted afterward, as we’ve already done above.

The Needed Adjustments in the Theme – header.php

A small change has to be made in the theme’s header.php, so that the dark theme can be activated.

The code makes sure that the stylesheet of the dark theme only appears in the area when needed.

The WordPress Default Settings in Real Time

We’ll now realize two of WordPress’ default settings, being the blog name and the description, in real time using the transport method »postMessage“. To do so, the following two lines of code are required:

Additionally, a little jQuery is needed for real-time display.

Changes in the header.php

Once again, the theme’s header.php has to be edited. We need to add a CSS class each for the website title and the description to access the elements easier with jQuery.

The Result in the Customizer

Creating and Referencing the Entire JavaScript

We need a jQuery, which we’ll name theme-customizer.js, for our features advertising block, blog name, and blog description. It looks like this and belongs into the theme’s main index:

Keep in mind that the code for the text and description elements are different from the advertising block. The advertising block is tied to an HTML element while text and description are tied to a text element. For me, the real time display of blog names and descriptions only worked this way.

Referencing the JavaScript

For the Theme Customizer to be able to use the jQuery, we need to reference it. This is done in the customizer.php file within the class Ari_Customizer, but outside of the function register().

Finishing Touches

Initiating the Customizer functions and the JavaScript.

Copy the following line of code into the theme’s functions.php so that the customizer.php is accessed.

When activating the Ari theme, the following image should be displayed under »Design => Edit“:

The Complete Files and the Edited Theme to Download

To better understand how everything fits together and works, you can find the downloads to the complete files here.

• The customizer.php file download at GitHub
• The theme-customizer.js file download at GitHub
• The optimized header.php file of the Ari theme download at GitHub
• The complete, working and modified Ari-Theme as a .zip file

Conclusion

The Theme Customizer surely is an interesting thing that every developer has to deal with when wanting to offer themes in the official index. This will inevitably cause new, high-quality themes of the large providers not to be listed there anymore. That’s because large providers like WooThemes, Krisi and Co. still prioritize their own theme options page as it’s the only way to realize the vast amount of settings that today’s premium themes come with.

Of course, the professionals that provide themes on WordPress, will be able to solve many things more elegantly than I did in this article. However, this article was mainly about the basic knowledge of the Customizer; about first, fast success. And this is provided.

Further Reading

• WordPress: Theme Customization API
• WordPress Theme Review Team: Details on the new theme settings (customizer) guideline
• Tuts+: A Guide to the WordPress Theme Customizer – 7-part series
• Smashing Magazine: The WordPress Theme Customizer
• Narga: Comprehensive Guide to make WordPress Theme Options with Customization API
• WordPress Theme Review Team: Customizer tutorials and documentation
• WordPress Theme Handbook: Theme Options – The Customizer API
• Justin Tadlock: Multiple checkbox customizer control

(dpe)

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

For safe keeping

Finally, a use for banner ads

Let’s play operation

Can you relate to these situations? Please share your funny stories and comments below…

Improve Your Eye for Design with Learn from Great Design Volume 1 eBook – only $14!

Source

Chances are good you’re wasting time at work. A 2014 study by CareerBuilder found smartphone usage, browsing the Internet, using social media, and responding to email were all major factors in decreasing employee productivity. Nearly 70 percent of employees waste at least some time at work daily, with nearly a third wasting at least an hour a day on non-work-related tasks, according to a 2014 survey by Salary.com. For Web developers with looming deadlines, intelligent tech tools can help them avoid late nights and finish useful products that work better the first time around.

From workflow management to improved communication with various team members across projects, here are five tools Web developers can use to work more efficiently.

1. Cloud Storage

Forget having to wade through multiple email chains to retrieve the information you need to complete a project. Cloud storage helps you organize everything you’re working on in an elegant dashboard, allowing you to communicate with team members about the details and access materials from desktop, smartphone, and tablet devices.

If you’ve ever lost a thumb drive containing what you were working on and know the pain of having to start from scratch, you know how essential backup is, as well. Cloud storage allows automatic backup options that will instantly sync what you’re working on to all your devices, so you never have to worry about issues like theft or damage to your device. With password protection through cloud storage, you can also control who has access to your information, keeping it safe and secure.

2. Password Management

Speaking of passwords, having to keep track of multiple logins and passwords can be time-consuming. Different site requirements might warrant myriad types of passwords, and if you forget your information, the process of password recovery and setting up new logins can be frustrating and waste precious minutes you could use on work.
Password manager software helps alleviate password remembrance pain points by keeping all your user names and passwords in one secure location — you only need to remember one password to access all your logins. You can use the software on any device, allowing you to work remotely quickly and easily.

3. Workflow Management

While cloud storage is beneficial to ensuring specific projects are completed on time, a workflow management tool gets all team members on the same page about where specific parts of larger endeavors are in the process. A variety of options allows teams to choose a layout that is easy to track tasks in, seamlessly allows for communication, and grants straightforward access to project details.

Trello, for example, is a free tool that allows team members to segment ideas, to-do tasks, “doing” tasks, and tasks that are completed. Certain team members may be added to each project, which features a feed containing real-time updates of work. A workflow management system allows Web development teams and larger units to hold members accountable and stay in the loop on projects to better optimize individual time spent.

4. Testing

Testing is a crucial part of Web development that can also greatly hold up processes if it’s not done correctly. The earlier and more frequently testing is done, the more likely you can catch mistakes that will take up significant amounts of precious time in the future. Automated testing options do the work for you, ensuring you’re staying on top of the functionality of what you’re designing.

Wercker is an automated testing software service that allows for tasks including developing, building, and delivering applications. You can choose isolated environments in which to run code, and it’s adaptable for simple to complex projects. A feedback application like BugMuncher provides reports based on bugs your encounter and evolving personal preference needs.

Synchronized testing tools that offer browser reloading, clicking, and scrolling interactions to be reflected across all devices at the same time also add more minutes to your day. Tools such as Ghostlab and BrowserSync provide these functions.

5. Communication

For teams with employees who are in different time zones or aren’t in the same office, a quick communication tool allows you to instantly exchange ideas. For cross-country brainstorming sessions that would clutter up a specific project file in your workflow management or cloud storage interface, applications such as Skype allow you to discuss ideas via chat or meet face-to-face through video, while video conferencing through GoToMeeting or free Google Hangouts allows for easy communication.

Options like Screenhero include collaborative screen sharing, multiple mouse cursor usage, and voice chat options so you can share what you’re working on and better convey issues to those who join your call.

With so many differently designed tools to help Web developers, just like when you’re designing a website, testing these tools with your team helps find the best solutions that will further increase individual and enterprise productivity. Evaluate the best business solution based on budget, the size of your team, and your projects. If what your company is using doesn’t work for your individual needs, there are plenty of free tools to help you improve your own work, as well.

About the Author:

Noah Gamer directs the global Internet Marketing optimization and product web reputation strategy as the Senior Manager of Search Marketing at Trend Micro. He specializes in web product strategy development, competitive analysis, targeted content ranking methods and site optimization while influencing online identity and brand for product marketing, public relations, investor relations, technical support and corporate marketing initiatives.

(dpe)

All of us love personalized services. Regardless of the business you’re running, personalization can make a huge difference. The same applies to email marketing as well.

By collecting data on customer behaviors, you can find out what they’re interested in, which also helps you personalize the email tailored to their unique behavior and the interest. Best of all, personalizing emails are hugely helpful to enhance your email open rates and click-through rates.

Personalized promotional emails were shown to lift transaction rates and revenue per email six times higher, according to a study. Without a doubt, email personalization is very crucial to your marketing success.

List building vs. lead nurturing

If you’re on WordPress, there are a lot of plugins that can help you skyrocket your email list.

That said, when it comes to email marketing, growing your email list is just a part of the equation. Despite that you built a huge list unless you nurture the leads throughout your customer lifecycle, chances are you wouldn’t succeed in selling products to the list. And email personalization is one of the best approaches to nurturing the leads because rather than sending generic emails it helps you send personalized emails to your list that addresses the needs of each user.

Let’s take a look at different examples of email personalization and learn how you can personalize the emails to promote your products and services.

1. Retain your existing customers

As said above, email marketing is focused on adding your potential leads into your list and nurturing them throughout your customer lifecycle. In fact, email marketing can also be used to retain your existing customers and re-engage them with your brand. Since customer retention is known to be cheaper than acquiring a new one, the retention strategy like email marketing can help increasing the overall ROI of your business to a great extent.

With that said, as the competition rises among email marketers and the average number of promotional emails sent to readers continues to increase, it has been found that open rates of email are declining drastically.

How would you increase the email open rates? How would you retain your existing customers by personalizing the emails you send them?

One way to do this is by segmenting your existing customers into a distinct group and sending them exclusive offers or discounts.

Hostgator is the best example of sending retention emails to their lost customers. In their retention emails, they offer special 75% limited time discount to bring back those users who once created a hosting account and canceled it for some reason.

Takeaway: Give exclusive offers to your previous customers who once purchased your product or used your service. This strategy not only is helpful to entice more people to buy your products on a regular basis but can also be helpful to develop a loyal connection for your existing customers with your brand.

2. Create a sense of urgency

While promoting an event, creating a sense of urgency can make your leads take an immediate action, so those who’re one the fence wouldn’t miss out an opportunity. You can implement the scarcity effect on emails in many ways.

Recently, Litmus used the scarcity principle in their email campaign to promote selling tickets to their event. They let subscribers know the exact amount of tickets left for the Email Design Conference, which can encourage users to buy the tickets before they all sold out.

Take a look at another example of ModCloth.

If you’re a ModCloth customer and have added a product to the cart but haven’t completed the checkout process, ModCloth will entice you to purchase the products as soon as possible before the item gets sold out by sending a personalized email.

The tone and language used in this email are tailored to the target persona, which is nonetheless vital to the success of email marketing campaigns.

Takeaway: While sending emails to notify about the cart, you can use the same approach of Litmus. If a user has added products to cart but hasn’t completed the checkout process, you can use the scarcity principle to encourage them to purchase it as soon as possible.

3. Promote a product to the user who isn’t aware of it

Evernote is an app to collect, bookmark and organize photos, documents, web pages, etc. As Evernote is bundled with a lot of features out-of-the box, chances are an average user might not be aware that many of those features actually exist.

In their email campaigns, Evernote focuses on introducing certain features to their end users, which they believe that the user might not be aware of.

Though I‘ve been using Evernote for bookmarking the web items for a while, I’ve never had saved any email into my Evernote account as I wasn’t aware of the email forwarding feature. So, this email was custom tailored to my previous product usage.

Takeaway: Aside from recommending products based on a user’s on-site behavior, you can also recommend products that your user might not be aware of.

4. Turn a negative action into a positive experience

As a marketer, it hurts when someone cancel their order and request a refund. The reasons for the refund request may vary for each user. Sometimes the user might not be the right person to buy that product.

No matter what, while sending an email that confirms their refund request, rather than sending a generic email, you can take it as an opportunity to make a positive experience to the user.

Hubspot’s email unsubscription message is one of the best examples of turning a negative user action to making a positive user experience.

When users opt-out from the Hubspot’s email newsletter, they’ll be directed to a page where a ‘breakup video’ is posted, which not only would bring a positive smile in the user’s face but would also help to create a positive brand experience.

The page also asks users to follow them on social networking sites as a ‘second chance’, so the users can still get connected with the brand.

Sidekicks’s unsubscription email is another example of making a positive experience.

They automatically unsubscribe users who didn’t clickthrough to read any of their emails for a year. As a last chance, users can keep subscribed to the list by clicking the large blue button displayed at the end of the final email.

Takeaway: Rather than sending generic emails, sending cool personalized emails during a negative moment such as email unsubscription and canceling an order can bring a positive brand experience to your user.

Read More at 4 Ways to Personalize Your Emails with Real Examples

Material Design is Google’s design language that was announced by the company way back in June 2014. Though this design language has been around for almost two years, it’s been slow to gain traction in a lot of Google’s own products. Sure, many of Google’s Android-based interfaces currently display this design, but it hasn’t made a big impact on desktop browsers…until now.

Google’s upcoming version of its popular Chrome browser will finally feature some material-design touches that are a long time coming. The changes won’t be too drastic, but they will be enough to convey that the company is putting a lot of stock in this design, even if it has been slow to implement it.

In a recent Google Code request, the company makes clear that its upcoming version 50 of Chrome will contain Material Design principles in its interface.

Primarily affected are the browser’s extensions, settings, history and downloads pages. Since Material Design includes the minimalism of flat design, it’s no surprise to see that each of these pages is now visually less complex. Also of note is the use of card-based design popularized by Material Design.

Other changes are subtler, though no less meaningful in this show of support for Google’s new design language. The tabs’ corners will be harshly squared off as opposed to having the subtle rounding of its current iteration. The hamburger menu—long a source of debate and disagreement—is going to be retired. In its place, users will see the immediately familiar three-dots menu in the top-right corner of the browser. Interestingly, the recognizable “expansion” animation that’s present on mobile OS like Android and iOS will also be a part of the three-dots menu.

Even the buttons and icons will receive a facelift in version 50 of Chrome. The security icon, bookmark buttons and info bar get a redo, but that’s not all. Even Incognito Mode isn’t the same, as it will now sport a flatter, dark-gray look that resembles the tab bar’s color in the current version of Chrome.

It’s important to note that Google has already included material design in both the iOS and Android versions of Chrome, perhaps acknowledging that the number of mobile users continues to expand while desktop users have been shrinking in recent years. One of the design touches that will be carried over from Android Material Design versions is the ripple-like flourish that appears whenever buttons are clicked.

Google hasn’t officially announced when these Material Design features will hit Chrome, but expectations are that it won’t be long now. One of Chrome’s attractive aspects has been that it’s been relatively unchanged for years, which allowed users to feel very comfortable and familiar with it. It will be telling to see how users receive these subtle-yet-profound design changes in version 50.

Fall in Love with the Valentine Font Bundle: 9 Lovely Typefaces – only $24!

Source

This month, we’re taking a dive into the official WordPress plugin index once again to show you the most exciting and most useful extensions for your WordPress. New WordPress plugins can contain the features that you’ve been searching for for a long time. Even I discover a plugin that I’ll test in-depth from time to time as I’ve been infected with the plugin virus as well.

10 Fresh WordPress Plugins of January 2016

1 – Comment Reply Email Notification

This little plugin sends an email to the author of a comment once somebody replied to said comment. This way, you don’t have to rely on the comment subscription features of Jetpack and other plugins.

• Developer: Gustavo H. Mascarenhas Machado
• Work in progress: Yes
• Latest version from: 01.24.2016
• Costs: free on WordPress.org
• License: GNU GENERAL PUBLIC LICENSE
• Compatibility Issues: unknown
• Developer Homepage: Unknown
• Download on WordPress.org

2 – Poststats

Poststats provides interesting statistics that it adds at the end of the content. At the moment, the following data is supported: the number of words, the amount of characters, the reading and speaking time. Especially the reading time appears to be an interesting feature.

• Developer: Giustino Borzacchiello
• Work in progress: Yes
• Latest version from: 01.24.2016
• Costs: free on WordPress.org
• License: GNU GENERAL PUBLIC LICENSE
• Compatibility Issues: unknown
• Developer Homepage: unknown
• Download on WordPress.org

3 – Get Facebook Likes

Get Facebook Likes is not another sharing plugin, but serves as a display of Facebook likes, shares and the amount of comments on your Facebook articles. That allows you to create a list of the most popular blog entries based on Facebook.

• Developer: Tan Nguyen
• Work in progress: Yes
• Latest version from: 01.24.2016
• Costs: free on WordPress.org
• License: GNU GENERAL PUBLIC LICENSE
• Compatibility Issues: unknown
• Developer Homepage: unknown
• Download on WordPress.org

4 – allow-reinstalls

Allow-reinstalls enables you to update a plugin or a theme without having to delete the existing version. This can be advantageous when you use a premium plugin or theme that doesn’t support an automatic update mode.

• Developer: bobbingwide
• Work in progress: Yes
• Latest version from: 01.23.2016
• Costs: free on WordPress.org
• License: GNU GENERAL PUBLIC LICENSE
• Compatibility Issues: unknown
• Developer Homepage: unknown
• Download on WordPress.org

5 – WF Magnific Lightbox

WF Magnific Lightbox presents your images in a visually appealing light box, once the previews are clicked. The developer claims that this solution is lightning-fast and fully responsive.

• Developer: wunderfarm
• Work in progress: Yes
• Latest version from: 01.23.2016
• Costs: free on WordPress.org
• License: GNU GENERAL PUBLIC LICENSE
• Compatibility Issues: unknown
• Developer Homepage: unknown
• Download on WordPress.org

6 – Custom Login Error Message

This little plugin allows you to create your own, custom error message for the WordPress login area. This seems to be especially useful for blogs with multiple authors or a website with members.

• Developer: Muhammad Umer
• Work in progress: Yes
• Latest version from: 01.22.2016
• Costs: free on WordPress.org
• License: GNU GENERAL PUBLIC LICENSE
• Compatibility Issues: unknown
• Developer Homepage: unknown
• Download on WordPress.org

7 – Woo Message Support

Woo Message Support is an extension for the popular WooCommerce online shop system. It allows admins and customers of a shop to directly contact each other using a message system. On the website, this plugin creates a section which enables customers to directly and immediately communicate with the support. This could be a unique selling point for your shop, especially because it should increase customers satisfaction.

• Developer: Vidish
• Work in progress: Yes
• Latest version from: 01.22.2016
• Costs: free on WordPress.org
• License: GNU GENERAL PUBLIC LICENSE
• Compatibility Issues: unknown
• Developer Homepage: unknown
• Download on WordPress.org

8 – Quoty

Quoty is another select and share plugin. A marked text area can be sent directly to the social networks. The following networks are currently supported: Facebook, Twitter, Google+, LinkedIn, and Pinterest.

• Developer: nticaric
• Work in progress: Yes
• Latest version from: 01.25.2016
• Costs: free on WordPress.org
• License: GNU GENERAL PUBLIC LICENSE
• Compatibility Issues: unknown
• Developer Homepage: unknown
• Download on WordPress.org

9 – Tap&Trust

Tap&Trust searches for harmful links in your blog’s comments and turns them innoxious, so they can’t be clicked anymore. To do so, the plugin uses the WOT API (Web of Trust). However, a free WOT account is needed to use Tap&Trust.

• Developer: Matiks
• Work in progress: Yes
• Latest version from: 01.24.2016
• Costs: free on WordPress.org
• License: GNU GENERAL PUBLIC LICENSE
• Compatibility Issues: unknown
• Developer Homepage: unknown
• Download on WordPress.org

10 – WP Bootstrap Comments

WP Bootstrap Comments creates a new comment walker class, which generates comment lists using the Bootstrap Media Object markup/classes. This is useful for developers that work with the Bootstrap HTML framework a lot. This way, the interleaved WordPress comments can be used with the Bootstrap CSS classes.

• Developer: darrinb
• Work in progress: Yes
• Latest version from: 01.21.2016
• Costs: free on WordPress.org
• License: GNU GENERAL PUBLIC LICENSE
• Compatibility Issues: unknown
• Developer Homepage: unknown
• Download on WordPress.org

More recent plugins can be found here, and here, and here.

(dpe)