Tag Archives: local

Thumbnail

Preparing Your App For iOS 12 Notifications




Preparing Your App For iOS 12 Notifications

Kaya Thomas



In 2016, Apple announced a new extension that will allow developers to better customize their push and local notifications called the UNNotificationContentExtension. The extension gets triggered when a user long presses or 3D touches on a notification whenever it is delivered to the phone or from the lock/home screen. In the content extension, developers can use a view controller to structure the UI of their notification, but there was no user interaction enabled within the view controller — until now. With the release of iOS 12 and XCode 10, the view controller in the content extension now enables user interaction which means notifications will become even more powerful and customizable.

At WWDC 2018, Apple also announced several changes to notification settings and how they appear on the home screen. In an effort to make users more aware of how they are using apps and allowing more user control of their app usage, there is a new notification setting called “Deliver Quietly.” Users can set your app to Delivery Quietly from the Notification Center, which means they will not receive banners or sound notifications from your app, but they will appear in the Notification Center. Apple using an in-house algorithm, which presumably tracks often you interact with notifications, will also ask users if they still want to receive notifications from particular apps and encourage you to turn on Deliver Quietly or turn them off completely.

Notifications are getting a big refresh in iOS 12, and I’ve only scratched the surface. In the rest of this article, we’ll go over the rest of the new notification features coming to iOS 12 and how you can implement them in your own app.

Recommended reading: WWDC 2018 Diary Of An iOS Developer

Remote vs Local Notifications

There are two ways to send push notifications to a device: remotely or locally. To send notifications remotely, you need a server that can send JSON payloads to Apple’s Push Notification Service. Along with a payload, you also need to send the device token and any other authentication certificate or tokens that verify your server is allowed to send the push notification through Apple. For this article, we focus on local notifications which do not need a separate server. Local notifications are requested and sent through the UNUserNotificationCenter. We’ll go over later how specifically to make the request for a local notification.

In order to send a notification, you first need to get permission from the user on whether or not they want you to send them notifications. With the release of iOS 12, there are a lot of changes to notification settings and permissions so let’s break it down. To test out any of the code yourself, make sure you have the Xcode 10 beta installed.

Notification Settings And Permissions

Deliver Quietly

Delivery Quietly is Apple’s attempt to allow users more control over the noise they may receive from notifications. Instead of going into the settings app and looking for the app whose notification settings you want to change, you can now change the setting directly from the notification. This means that a lot more users may turn off notifications for your app or just delivery them quietly which means the app will get badged and notifications only show up in the Notification Center. If your app has its own custom notification settings, Apple is allowing you to link directly to that screen from the settings management view pictured below.


iPhone 8 Plus shown with Manage selected from notification which brings up the Deliver Quietly and Turn Off options.


Delivery quietly feature. (Large preview)

In order to link to your custom notification setting screen, you must set providesAppNotificationSettings as a UNAuthorizationOption when you are requesting notification permissions in the app delegate.

In didFinishLaunchingWithOptions, add the following code:

UNUserNotificationCenter.current().requestAuthorization(options: [.alert, .badge, .sound, .providesAppNotificationSettings])  ... 

When you do this, you’ll now see your custom notification settings in two places:

  • If the user selects Turn Off when they go to manage settings directly from the notification;
  • In the notification settings within the system’s Settings app.

iPhone 8 Plus shown with Turn Off selected from notification which brings up the Turn Off All Notifications and Configure in NotificationTester options.


Deep link to to custom notification settings for NotificationTester from notification in the Notification Center. (Large preview)


iPhone 8 Plus shown with system Settings app open with Notifications screen for NotificationTester app.


Deep link to custom notification settings for NotificationTester from system’s Settings app. (Large preview)

You also have to make sure to handle the callback for when the user selects on either way to get to your notification settings. Your app delegate or an extension of your app delegate has to conform to the protocol UNUserNotificationCenterDelegate so you can then implement the following callback method:

func userNotificationCenter(_ center: UNUserNotificationCenter, openSettingsFor notification: UNNotification?) 
    let navController = self.window?.rootViewController as! UINavigationController
    let notificationSettingsVC = NotificationSettingsViewController()
    navController.pushViewController(notificationSettingsVC, animated: true)

Another new UNAuthorizationOption is provisional authorization. If you don’t mind your notifications being delivered quietly, you can set add .provisional to your authorization options as shown below. This means that you don’t have to prompt the user to allow notifications — the notifications will still show up in the Notification Center.

UNUserNotificationCenter.current().requestAuthorization(options: [.alert, .badge, .provisional])  ... 

So now that you’ve determined how to request permission from the user to deliver notifications and how to navigate users to your own customized settings view, let’s go more into more detail about the actual notifications.

Sending Grouped Notifications

Before we get into the customization of the UI of a notification, let’s go over how to make the request for a local notification. First, you have to register any UNNotificationCategory, which are like templates for the notifications you want to send. Any notification set to a particular category will inherit any actions or options that were registered with that category. After you’ve requested permission to send notifications in didFinishLaunchingWithOptions, you can register your categories in the same method.

let hiddenPreviewsPlaceholder = "%u new podcast episodes available"
let summaryFormat = "%u more episodes of %@"
let podcastCategory = UNNotificationCategory(identifier: "podcast", actions: [], intentIdentifiers: [], hiddenPreviewsBodyPlaceholder: hiddenPreviewsPlaceholder, categorySummaryFormat: summaryFormat, options: [])
UNUserNotificationCenter.current().setNotificationCategories([podcastCategory])

In the above code, I start by initiating two variables:

  • hiddenPreviewsPlaceholder
    This placeholder is used in case the user has “Show Previews” off for your app; if we don’t have a placeholder there, your notification will show with only “Notification” also the text.
  • summaryFormat
    This string is new for iOS 12 and coincides with the new feature called “Group Notifications” that will help the Notification Center look a lot cleaner. All notifications will show up in stacks which will be either representing all notifications from the app or specific groups that the developer has set for there app.

The code below shows how we associate a notification with a group.

@objc func sendPodcastNotification(for podcastName: String) 
let content = UNMutableNotificationContent()
content.body = "Introducing Season 7"
content.title = "New episode of (podcastName):"
content.threadIdentifier = podcastName.lowercased()
content.summaryArgument = podcastName
content.categoryIdentifier = NotificationCategoryType.podcast.rawValue
sendNotification(with: content)

For now, I’ve hardcoded the text of the notification just for the example. The threadIdentifier is what creates the groups that we show as stacks in the Notification Center. In this example, I want the notifications grouped by podcast so each notification you get is separated by what podcast it’s associated with. The summaryArgument matches back to our categorySummaryFormat we set in the app delegate. In this case, we want the string for the format: "%u more episodes of %@" to be the podcast name. Lastly, we have to set the category identifier to ensure the notification has the template we set in the app delegate.

func sendNotification(for category: String, with content: UNNotificationContent) 
let uuid = UUID().uuidString
let trigger = UNTimeIntervalNotificationTrigger(timeInterval: 5, repeats: false)
let request = UNNotificationRequest(identifier: uuid, content: content, trigger: trigger)
UNUserNotificationCenter.current().add(request, withCompletionHandler: nil)

The above method is how we request the notification to be sent to the device. The identifier for the request is just a random unique string; the content is passed in and we create the content in our sendPodcastNotification method, and lastly, the trigger is when you want the notification to send. If you want the notification to send immediately, you can set that parameter to nil.


iPhone 8 Plus lock screen shown with a grouped notification stack from Notification Tester app.


Grouped notifications for NotificationTester. (Large preview)


iPhone 8 Plus lock screen shown with a grouped notification stack from Notification Tester app that has hidden content.


Notification grouped with previews turned off. (Large preview)

Using the methods we’ve described above, here’s the result on the simulator. I have a button that has the sendPodcastNotification method as a target. I tapped the button three times to have the notifications sent to the device. In the first photo, I have “Show Previews” set to “Always” so I see the podcast and the name of the new episodes along with the summary that shows I have two more new episodes to check out. When “Show Previews” is set to “Never,” the result is the second image above. The user won’t see which podcast it is to respect the “No Preview” setting, but they can still see that I have three new episodes to check out.

Notification Content Extension

Now that we understand how to set our notification categories and make the request for them to be sent, we can go over how to customize the look of the notification using the Notification Service and Notification Content extensions. The Notification Service extension allows you to edit the notification content and download any attachments in your notification like images, audio or video files. The Notification Content extension contains a view controller and storyboard that allows you to customize the look of your notification as well as handle any user interaction within the view controller or taps on notification actions.

To add these extensions to your app go File → New → Target.


Xcode shown after selecting from menu to add a new target, Notification Content Extension is highlighted.


Adding new target to app for the Notification Content Extension. (Large preview)

You can only add them one at a time, so name your extension and repeat the process to add the other. If a pop-up appears asking you to activate your new scheme, click the “Activate” button to set it up for debugging.

For the purpose of this tutorial, we will be focusing on the Notification Content Extension. For local notifications, we can include the attachments in the request, which we’ll go over later.

First, go to the Info.plist file in the Notification Content Extension target.


Info.plist file for Notification Content Extension shown in Xcode.


Info.plist for the Notification Content Extension. (Large preview)

The following attributes are required:

  • UNNotificationExtensionCategory
    A string value equal to the notification category which we created and set in the app delegate. This will let the content extension know which notification you want to have custom UI for.
  • UNNotificationExtensionInitialContentSizeRatio
    A number between 0 and 1 which determines the aspect ratio of your UI. The default value is 1 which will allow your interface to have its total height equal to its width.

I’ve also set UNNotificationExtensionDefaultContentHidden to “YES” so that the default notification does not show when the content extension is running.

You can use the storyboard to set up your view or create the UI programmatically in the view controller. For this example I’ve set up my storyboard with an image view which will show the podcast logo, two labels for the title and body of the notification content, and a “Like” button which will show a heart image.

Now, in order to get the image showing for the podcast logo and the button, we need to go back to our notification request:

guard let pathUrlForPodcastImg = Bundle.main.url(forResource: "startup", withExtension: "jpg") else  return 
let imgAttachment = try! UNNotificationAttachment(identifier: "image", url: pathUrlForPodcastImg, options: nil)

guard let pathUrlForButtonNormal = Bundle.main.url(forResource: "heart-outline", withExtension: "png") else  return 
let buttonNormalStateImgAtt = try! UNNotificationAttachment(identifier: "button-normal-image", url: pathUrlForButtonNormal, options: nil)

guard let pathUrlForButtonHighlighted = Bundle.main.url(forResource: "heart-filled", withExtension: "png") else  return 
let buttonHighlightStateImgAtt = try! UNNotificationAttachment(identifier: "button-highlight-image", url: pathUrlForButtonHighlighted, options: nil)

content.attachments = [imgAttachment, buttonNormalStateImgAtt, buttonHighlightStateImgAtt]

I added a folder in my project that contains all the images we need for the notification so we can access them through the main bundle.


Project navigator shown in Xcode.


Xcode project navigator. (Large preview)

For each image, we get the file path and use that to create a UNNotificationAttachment. Added that to our notification content allows us to access the images in the Notification Content Extension in the didReceive method shown below.

func didReceive(_ notification: UNNotification) {
self.newEpisodeLabel.text = notification.request.content.title
self.episodeNameLabel.text = notification.request.content.body

let imgAttachment = notification.request.content.attachments[0]
let buttonNormalStateAtt = notification.request.content.attachments[1]
let buttonHighlightStateAtt = notification.request.content.attachments[2]

guard let imageData = NSData(contentsOf: imgAttachment.url), let buttonNormalStateImgData = NSData(contentsOf: buttonNormalStateAtt.url), let buttonHighlightStateImgData = NSData(contentsOf: buttonHighlightStateAtt.url) else  return 

let image = UIImage(data: imageData as Data)
let buttonNormalStateImg = UIImage(data: buttonNormalStateImgData as Data)?.withRenderingMode(.alwaysOriginal)
let buttonHighlightStateImg = UIImage(data: buttonHighlightStateImgData as Data)?.withRenderingMode(.alwaysOriginal)

imageView.image = image
likeButton.setImage(buttonNormalStateImg, for: .normal)
likeButton.setImage(buttonHighlightStateImg, for: .selected)
}

Now we can use the file path URLs we set in the request to grab the data for the URL and turn them into images. Notice that I have two different images for the different button states which will allow us to update the UI for user interaction. When I run the app and send the request, here’s what the notification looks like:


iPhone 8 Plus shown with custom notification loaded after force touching the notification.


Content extension loaded for NotificationTester app. (Large preview)

Everything I’ve mentioned so far in relation to the content extension isn’t new in iOS 12, so let’s dig into the two new features: User Interaction and Dynamic Actions. When the content extension was first added in iOS 10, there was no ability to capture user touch within a notification, but now we can register UIControl events and respond when the user interacts with a UI element.

For this example, we want to show the user that the “Like” button has been selected or unselected. We already set the images for the .normal and .selected states, so now we just need to add a target for the UIButton so we can update the selected state.

override func viewDidLoad() 
super.viewDidLoad()
// Do any required interface initialization here.
likeButton.addTarget(self, action: #selector(likeButtonTapped(sender:)), for: .touchUpInside)
@objc func likeButtonTapped(sender: UIButton) 
likeButton.isSelected = !sender.isSelected

Now with the above code we get the following behavior:

Gif of iPhone 8 Plus with custom notification loaded and like button being selected and unselected.
Selecting like button within notification. (Large preview)

In the selector method likeButtonTapped, we could also add any logic for saving the liked state in User Defaults or the Keychain, so we have access to it in our main application.

Notification actions have existed since iOS 10, but once you click on them, usually the user will be rerouted to the main application or the content extension is dismissed. Now in iOS 12, we can update the list of notification actions that are shown in response to which action the user selects.

First, let’s go back to our app delegate where we create our notification categories so we can add some actions to our podcast category.

let playAction = UNNotificationAction(identifier: "play-action", title: "Play", options: [])
let queueAction = UNNotificationAction(identifier: "queue-action", title: "Queue Next", options: [])
let podcastCategory = UNNotificationCategory(identifier: "podcast", actions: [playAction, queueAction], intentIdentifiers: [], hiddenPreviewsBodyPlaceholder: hiddenPreviewsPlaceholder, categorySummaryFormat: summaryFormat, options: [])

Now when we run the app and send a notification, we see the following actions shown below:


iPhone 8 Plus with custom notification loaded with an options to Play or Add to Queue.


Notification quick actions. (Large preview)

When the user selects “Play,” we want the action to be updated to “Pause.” If they select “Queue Next,” we want that action to be updated to “Remove from Queue.” We can do this in our didReceive method in the Notification Content Extension’s view controller.

func didReceive(_ response: UNNotificationResponse, completionHandler completion:
(UNNotificationContentExtensionResponseOption) -> Void) {
guard let currentActions = extensionContext?.notificationActions else  return 

if response.actionIdentifier == "play-action" 
let pauseAction = UNNotificationAction(identifier: "pause-action", title: "Pause", options: [])
let otherAction = currentActions[1]
let newActions = [pauseAction, otherAction]
extensionContext?.notificationActions = newActions

 else if response.actionIdentifier == "queue-action" 
let removeAction = UNNotificationAction(identifier: "remove-action", title: "Remove from Queue", options: [])
let otherAction = currentActions[0]
let newActions = [otherAction, removeAction]
extensionContext?.notificationActions = newActions

  else if response.actionIdentifier == "pause-action" 
let playAction = UNNotificationAction(identifier: "play-action", title: "Play", options: [])
let otherAction = currentActions[1]
let newActions = [playAction, otherAction]
extensionContext?.notificationActions = newActions

 else if response.actionIdentifier == "remove-action" 
let queueAction = UNNotificationAction(identifier: "queue-action", title: "Queue Next", options: [])
let otherAction = currentActions[0]
let newActions = [otherAction, queueAction]
extensionContext?.notificationActions = newActions

completion(.doNotDismiss)
}

By resetting the extensionContext?.notificationActions list to contain the updated actions, it allows us to change the actions every time the user selects one. The behavior is shown in the gif below.

Gif of iPhone 8 Plus with custom notification loaded and the quick actions being changed from Play to Pause and Add to Queue to Remove from Queue.
Dynamic notification quick actions. (Large preview)

Summary

There’s a lot to do before iOS 12 launches to make sure your notifications are ready. The steps vary in complexity and you don’t have to implement them all. Make sure to first download XCode 10 beta so you can try out the features we’ve gone over. If you want to play around with the demo app I’ve referenced throughout the article, check it out on Github.

For Your Notification Permissions Request And Settings, You’ll Need To:

  • Determine whether or not you want to enable provisional authorization and add it to your authorization options.
  • If you have already have a customized notification settings view in your app, add providesAppNotificationSettings to your authorization options as well as implement the call back in your app delegate or whichever class conforms to UNUserNotificationCenterDelegate.

For Notification Grouping:

  • Add a thread identifier to your remote and local notifications so your notifications are correctly grouped in the Notification Center.
  • When registering your notification categories, add the category summary parameter if you want your grouped notification to be more descriptive than “more notifications.”
  • If you want to customize the summary text even more, then add a summary identifier to match whichever formatting you added for the category summary.

For Customized Rich Notifications:

  • Add the Notification Content extension target to your app to create rich notifications.
  • Design and implement the view controller to contain whichever elements you want in your notification.
  • Consider which interactive elements would be useful to you, i.e. buttons, table view, switches, etc.
  • Update the didReceive method in the view controller to respond to selected actions and update the list of actions if necessary.

Further Reading

Smashing Editorial
(ra, yk, il)


Follow this link: 

Preparing Your App For iOS 12 Notifications

Thumbnail

WordPress Local Development For Beginners: From Setup To Deployment




WordPress Local Development For Beginners: From Setup To Deployment

Nick Schäferhoff



When first starting out with WordPress, it’s very common to make any changes directly on your live site. After all, where else would you do it? You only have that one site, so when something needs changing, you do it there.

However, this practice has several drawbacks. Most of all that it’s very public. So, when something goes seriously wrong, it’s quite noticeable for people on your site.

Preventing Common Mistakes

When creating free or premium WordPress themes, you’re bound to make mistakes. Find out how you can avoid them in order to save yourself time and focus on actually creating themes people will enjoy using. Read more →

It’s ok, don’t feel bad. Most WordPress beginners have done this at one point or another. However, in this article, we want to show you a better way: local WordPress development.

What that means is setting up a copy of your website on your local hard drive. Doing so is incredibly useful. So, below we will talk about the benefits of building a local WordPress development environment, how to set one up and how to move your local site to the web when it’s ready.

This is important, so stay tuned!

The Benefits Of Local WordPress Development

Before diving into the how, let’s have a look at the why. Using a local development version of WordPress offers many benefits.

We already mentioned that you no longer have to make changes to your live site with all the risks involved with that. However, there is more:

  • Test themes and plugins
    With a local copy of your site, you can try out as many themes and plugin combinations as you want without risking taking your live site out due to incompatibilities.
  • Update safely
    Another time when things are prone to go wrong are updates. With a local environment, you can update WordPress core and components to see if there are any problems before applying the updates to your live site.
  • Independent of an online connection
    With your WordPress site on your computer, you can work on it without being connected to the Internet. Thus, you can get work done even if there is no wifi.
  • High performance/low cost
    Because site performance is not limited by an online connection, local sites usually run much faster. This makes for a better workflow. Also, as you will see, you can set it all up with free software, eliminating the need for a paid staging area.

Sounds good? Then let’s see how to make it happen.

How To Set Up A Local Development Environment For WordPress

In this next part, we will show you how to set up your own local WordPress environment. First, we will go over what you need to do and then how to get it right.

Tools You’ll Need

In order to run, WordPress needs a server. That’s true for an online site as well as a local installation. So, we need to find a way to set one up on our computer.

That server also needs some software WordPress requires to work. Namely, that’s PHP (the platform’s main programming language) and MySQL for the database. Plus, it’s nice to have a MySQL user interface like phpMyAdmin to make handling the database more convenient.

In addition to that, need your favorite code editor or IDE (integrated development environment) for the coding part. My choice is Notepad++ but you might have your own preferences.

Finally, it’s useful to have some developer tools to analyze and debug your site, for example, to look at HTML and CSS. The easiest way is to use Chrome or Firefox (read our article on Firefox’s DevTools), which have extensive functionality like that built in.

Available Software

We have several options at our disposal to set up local server environments. Some of the most well known are DesktopServer, Vagrant, and Local by Flywheel. All of these contain the necessary components to set up a local server that WordPress can run on.

For this tutorial we will use XAMPP. The name is an acronym and stands for “cross platform, Apache, MySQL, PHP, Perl”. If you have been paying attention, you will notice that we earlier noted MySQL and PHP as essential to running a WordPress website. In addition, Apache is an open source solution for creating servers. So, the software contains everything we need in one neat package. Plus, as “cross platform” suggests, XAMPP is available for both Windows, Mac and Linux computers.

To continue, if you haven’t done so already, head over to the official XAMPP website and download a copy.

How To Use XAMPP

Installing XAMPP pretty much works like every other piece of software.

On Windows:

  1. Run the installer (note that you might get a warning about running unknown software, allow to continue).
  2. When asked which components to install, make sure that Apache, MySQL, PHP, and phpMyAdmin are active. The rest is usually unnecessary, deactivate it unless you have good reason not to.
  3. Choose the location to install. Make sure it’s easy to reach as that’s where your sites will be saved and you will probably access them often.
  4. You can disregard the information about Bitnami.
  5. Choose to start the control panel right away at the end.

On Mac:

  1. Open the .dmg file
  2. Double click on the XAMPP icon or drag it to applications folder
  3. That’s it, well done!

After the installation is complete, the control panel starts. Should your operating system ask for Firewall permissions, make sure to allow XAMPP for private networks, otherwise, it won’t work.


Large preview

From the panel, you can start Apache and MySQL by clicking the Start buttons on the respective rows. If you run into problems with programs that use the same ports as XAMPP, quit those programs and try to restart the XAMPP processes. If the problem is with Skype, there is a permanent solution by disabling the ports under ToolsOptionsAdvancedConnections.


Large preview

Under Config, you can also enable automatic start for the components you need.


Large preview

After that, it’s time to test your local server. For that, open your browser, and go to http://localhost.

If you see the following screen, everything works as it should. Well done!


Large preview

Installing WordPress Locally

Now that you have a local server, you can install WordPress in the same way that you do on a web server. The only difference: everything is done on your hard drive, not an FTP server or inside a hosting provider’s admin panel.

That means, to create a database for WordPress, you can simply go to http://localhost/phpmyadmin. Here, you find the same options as in the online version and can create a database, user and password for WordPress.


Large preview

Once that is done and you want to install WordPress, you can do so via the htdocs folder inside your installation of XAMPP. There, simply create a new directory, download the latest version of WordPress, unpack the files and copy them into the new folder. After that, you can start the installation by going to http://localhost/newdirectoryname.


Large preview

That’s basically it. Now that you have a running copy of WordPress on your website, you can install themes and plugins, set up a child theme, change styles, create custom page templates and do whatever your heart desires.

When you are satisfied, you can then move the website from a local installation to live environment. That’s what we will talk about next.

How To Deploy Your Site With A Plugin

Alright, once your local site is up to your liking, it’s time to get it online. Just a quick note: if you want to get a copy of your existing live site to your hard drive, you can use the same process as described below only in reverse. The overall principles stay the same.

Either way, we can do this manually or via plugin and there are several solutions available. For this tutorial, we will use Duplicator. I found it to be one of the most convenient free solutions and, as you will see, it makes things really easy.

1. Install Duplicator

Like every other WordPress plugin, you first need to install Duplicator in order to use it. For that, simply go to PluginsAdd New. In the search box, input the plugin name and hit enter, it should be the first search result.


Large preview

Click Install Now and activate once it’s done.

2. Export Site

When Duplicator is active on your site, it adds a new menu item in the WordPress dashboard. Clicking it gets you to this screen.


Large preview

Here, you can create a so-called package. In Duplicator that means a zipped up version of your site, database, and an installation file. To get started, simply click on Create New.

In the next step, you can enter a name for your package. However, it’s not really necessary unless you have a specific reason.


Large preview

Under Storage, Archive, and Installer are options to determine where to save the archive (works for the Pro version only), exclude files or database tables from the migration and input the updated database credentials and new URL.

In most cases you can just leave everything as is, especially because Duplicator will attempt to fill in the new credentials automatically later. So, for now just hit Next.

After that, Duplicator will run a test to see if there are any problems.


Large preview

Unless something major pops up, just click on Build to begin building the package. This will start the backup process.

At the end of it, you get the option to download the zip file and installer with the click on the respective buttons or with the help of the One-Click Download.


Large preview

Do so and you are done with this part of the process.

3. Upload And Deploy Files On Your Server

If all of this has gone down without a hitch, it’s now time to upload the generated files to their new home. For that, log into your FTP server and browse to your new site’s home directory. Then, start uploading the files we generated in the last step.

Once done, you can start the installation process by inputting http://yoursite.com/installer.php into the browser bar.


Large preview

In the first step, the plugin checks the archive’s integrity and whether it can deploy the site in the current environment. You also get some advanced options that you are welcome to ignore at the moment. However, make sure to check the box where it says “I have read and accept all terms and notices,” before clicking Next.

Your site is now being unpacked. After that, you get to the screen where it’s time to input the database information.


Large preview

The plugin can either create a new database (if your host allows it) or use an existing one. For the latter option, you need to set up the database manually beforehand. Either way, you need to input the database name, username, and password to continue. Duplicator will also use this information to update the wp-config.php file of your site so that it can talk to the new database. Click Test Database to see if the connection works. Hit Next to start the installation of the database.

Once Duplicator is done with that, the final step is to confirm the details of your old and new site.


Large preview

That way, Duplicator is able to replace all mentions of your old URL in the database with the new one. If you don’t, your site won’t work properly. If everything is fine, click the button that says Next.

4. Finishing Up

Now, there are just a few more things to do before you are finished. The first one is to check the last page of the setup for any problems encountered in the deployment.


Large preview

The second is to log into your new site (you can do so via the button). Doing so will land you in the Duplicator menu.


Large preview

Here, be sure to click on Remove Installation Files Now! at the top. This is important for security reasons.

And that’s it, your site should now be successfully migrated. Well done! You have just mastered the basics of local WordPress development.

Quick Note: Updating Your Database Information Manually

Should the Duplicator plugin for some reason be unable to update wp-config.php with the new database information, your site won’t work and you will see a warning that says “unable to establish database connection”.

In that case, you need to change the information manually. Do this by finding wp-config.php in your WordPress installation’s main folder. You can access it via FTP or a hosting backend like cPanel. Ask your provider for help if you find yourself unable to locate it on your own.

Edit the file (this might mean downloading, editing and re-uploading it) and find the following lines:

/** The name of the database for WordPress */
define('DB_NAME', 'database_name_here');

/** MySQL database username */
define('DB_USER', 'username_here');

/** MySQL database password */
define('DB_PASSWORD', 'password_here');

/** MySQL hostname */
define('DB_HOST', 'localhost');

Update the information here with that of your new host (by replacing the info between the ‘ ‘), save the file and move it back to your site’s main directory. Now everything should be fine.

WordPress Local Development In A Nutshell

Learning how to install WordPress locally is super useful. It enables you to make site changes, run updates, test themes and plugins and more in a risk-free environment. In addition to that, it’s free thanks to open source software.

Above, you have learned how to build a local WordPress environment with XAMPP. We have led you through the installation process and explained how to use the local server with WordPress. We have also covered how to get your local site online once it’s ready to see the light of day.

Hopefully, your takeaway is that all of this is pretty easy. It might feel overwhelming as a beginner at first, however, using WordPress locally will become second nature quickly. Plus, the benefits clearly outweigh the learning process and will help you take your WordPress skills to the next level.

What are your thoughts on local WordPress development? Any comments, software or tips to share? Please do so in the comments section below!

Smashing Editorial
(mc, ra, yk, il)


Excerpt from – 

WordPress Local Development For Beginners: From Setup To Deployment

Thumbnail

What You Need to Know About Google Maps’ Promoted Pins

promoted-pins-featured-image-650
Image via Shutterstock.

According to the most recent numbers, about one billion people around the world have downloaded Google Maps and use it to reach 1.5 billion destinations each year.

That’s a lot of searches and web traffic. But of equal interest to Google and its customers is foot traffic. Shopping online is great, but forecasts indicate 90 percent of retail sales will happen in physical stores rather than online, and half of smartphone users who search for something locally will end up visiting a retail location within 24 hours.

The latest update to Google Maps is called promoted pins. Google hopes it will help bridge the gap between online traffic and foot traffic. It will give local businesses an opportunity to have their voices heard in a new way and take advantage of our glorious, mobile-first future.

So what are promoted pins and why should you care?

If you’re a Google Maps user, and you probably are, you’re likely already intimately familiar with the ordinary red “pins.” These indicate nearby landmarks, businesses or other places of interest.

Promoted pins will provide a handy contrast, as they now come in royal purple — allowing your business to very visibly stand out from the rest of the locations in your area.

But drawing the eye with fresh new colors is just the start of it.

When you perform a search for, say, children’s bicycles, you might see promoted pins from Toys ‘R Us or other local toy stores populating the top of your search results.

These will also be accompanied by promotions and coupons tailored precisely to your search history. Maybe it’ll be a $5 off coupon for that bike, or, in a different search, $1 off your Grande Mocha Whatever from Starbucks.

promoted-pins-phone

Sounds exciting, yes?

What do you need to get started?

Naturally, you’ll need to do a little bit of work before you can get your own promoted pins off the ground.

First and foremost, if you haven’t already, you’ll need to have your business officially verified by Google. This can take a week or two, and involves receiving a postcard at your physical location to verify the address you’ve provided actually exists, and matches up with existing USPS records.

But to enable promoted pins specifically, you’ll also need to meet Google’s advertiser eligibility requirements and enable “location extensions” in AdWords. This involves linking your Google My Business account to your Adwords account. You can do this by following these steps:

  1. Sign into your AdWords account and go to the “Ad Extensions” tab.
    ad-extensions
  2. Select the “View: Location Extensions” option from this dropdown menu:
    location-extensions
  3. Click “+ Extension” and you’ll be asked to link your Google My Business account.
    screen-shot-2016-09-20-at-2-43-50-pm

Want to learn about using landing pages for PPC?

Download this ebook and become an expert at designing high-converting landing pages for your PPC campaigns.
By entering your email you’ll receive weekly Unbounce Blog updates and other resources to help you become a marketing genius.

Planning your promoted pins strategy

Local businesses will be charged per click for their participation in promoted pins. But just what constitutes a “click”? Here’s the rundown:

  • “Click-to-call” actions on your smartphone
  • “Get directions” interactions
  • “Get location” clicks

Knowing this, how much of your PPC spend should be directed at promoted pins?

Like many other aspects of online marketing and digital advertising, some strategies are simply going to be more effective for certain industries than others. For example, I could see promoted pins working really well for drugstores, gas stations or restaurants – places that people tend to frequent often, even when traveling.

However, I don’t see promoted pins being overly beneficial for places like colleges or event venues. People do extensive research and planning when spending money with these organizations, and buying decisions are influenced by many, many other factors outside of location or even pricing.

To put it simply, there’s not going to be a magic percentage of PPC spend you can put towards promoted pins to get your ideal results.

You’ll need to play around with this new feature and gradually adjust how much money you want to allocate to it after a few months of testing. I will say that I don’t think a promoted pins budget should be a majority part of any organization’s PPC spend, but you can pick a starting budget based on your past successes with PPC and adjust said budget up or down as you start to see results.

In other words, budgeting for your local search campaign in Google Maps shouldn’t feel at all out of step with other forms of digital advertising that charge according to the traffic you generate.

Tracking your promoted pins campaign

All of this is pretty academic if you don’t have access to real-time data about your promoted pins, along with the traffic they’re generating and some key information about who’s interacting with them.

Here’s how to access the traffic data for your promoted pins campaign:

  1. Sign into your AdWords account and go to “Campaigns”:
    adwords-promoted-pins-campaigns
  2. Click “Segment,” then “Click type”:
    adwords-promoted-pins-segments-ad-types

That should bring you to the all-important data about the types of traffic your promoted pins are bringing in. This traffic might show up in a breakdown similar to your normal “Local” PPC ad analytics, with data for click-to-call, driving directions and location detail actions taken:

mobile-clicks-to-call-promotedpins

What you find there will be the key to tailoring your hyperlocal marketing approach in the months and years ahead.

Sales funnelling from Google Maps

How can you turn your promoted pins into real sales? How do prospective customers become, you know, customers?

The key is hyperlocal marketing, which is marketing tailored to a very small geographic area, such as a single zip code, neighborhood or city.

People are already shopping locally. Your job is merely to make sure they visit your establishment and not somebody else’s. Promoted pins should make this easier than ever, by letting you cater directly to the people who are most likely to visit your business in the first place.

Promoted pins also encourage — even require — you to stay up-to-date with what people in your area are actually searching for.

You’ll be able to optimize your business’ page within Google Maps to reflect the language people are using to find you. Just like you would do keyword analysis and competitor research for your main website, you can take the information you learn about how people find you on Google Maps and apply it to your Google My Business page or promoted pins ads.

This whole process is like a snowball that just needs one gentle push to get started.

One national brand that figured this out early is PetSmart. It learned how to tie together data from its search ads with data from Google’s Store Visits. It found that between 10 and 18 percent of folks who clicked on its ads ended up inside a PetSmart store within a month. PetSmart used this information to make more informed budgeting decisions for their online marketing strategies moving forward, and was able to provide data driven proof of the value in search ads for their merchandising partners.

It’s this ability to truly understand the customer “journey” that really speaks to the usefulness of promoted pins.

Quick bonus tip: Be transparent about inventory

Here’s one more key action you’ll need to take, if you haven’t already: Become super transparent about the products you have in stock. One in four mobile users avoids visiting brick-and-mortar stores because they fret over the product, or products, they’re searching for not being in stock.

Fortunately, Google’s already developed a way for companies to do this: local product inventory feeds. This is a list of all the products you sell in each of your stores, and you can choose to update your full product inventory or only the products whose inventories have changed that day. Inventory feeds help consumers feel more confident that they can find what they’re looking for at your store, and that they won’t arrive to find said item out of stock.

When done in conjunction with promoted pins, inventory feeds assure potential customers that a product is actually in stock and that it can be found at a location in their immediate area.

How promoted pins can help you

If you’ve read this far, you’re probably one of two types of people:

  1. You’re excited to dig into the nitty gritty of a new type of ad platform, and you’re ready to see what kind of return on investment this can bring to your local business
  2. You’re fretting over yet another skill set you need to learn to keep your business viable in an increasingly digital-minded world.

Though, the perfectly sane businessperson probably falls somewhere in between.

It’s true. There are a couple little tricks you’ll have to pick up before you have your promoted pins strategy up and running and actually delivering real-world results.

But for the most part, we think you’ll find the process actually dovetails pretty nicely with what you’re already familiar with. AdWords is an established platform, and promoted pins is an offshoot of that. You were always going to have to become savvy with local marketing to survive and thrive. It was inevitable. And, thankfully, Google has made it pretty easy to get started.

View original: 

What You Need to Know About Google Maps’ Promoted Pins

Web Development Reading List #152: On Not Shipping, Pure JS Functions, And SameSite Cookies

This week’s reading list consists of a lot of little, smart details that you can use on websites. From tweaking the user’s reading experience during page load to pure JavaScript functions and verifying the integrity of external assets. And finally, we see some articles on thinking differently about established working habits — be it working on AI without data or the virtue of not shipping a feature.
Please note that I’ll be on vacation for the next four weeks, so please don’t expect any new Web Development Reading List before October, 7th.

Read More: 

Web Development Reading List #152: On Not Shipping, Pure JS Functions, And SameSite Cookies

Thumbnail

The 16 Best Digital Marketing Conferences of 2016

A couple of weeks ago, I heard a barber say you’re only as good as your last haircut. In marketing, this couldn’t be more accurate — using last year’s tactics just won’t cut it.

Surely, you’re staying up to date on the latest marketing trends with blog posts, AMAs and webinars. But sometimes, in order to level up, you need to step away from your desk and get a front-row seat to the action.

people having fun at Unbounce’s CTA conference
Knowledge learned in the flesh will help you reach new heights in 2016. Image via Unbounce CTA Conference.

With so many digital marketing conferences to choose from, we’ve selected the top marketing events we think will inspire and educate you in 2016.

These marketing conferences cover a variety of topics: content marketing, conversion optimization, design, email marketing, entrepreneurship, innovation, mobile, performance marketing, search, social, growth marketing, video marketing and local marketing.

If you’re on a mission to get some real life knowledge and socializing under your belt, here’s an epic list of the 20 most thought-provoking, engaging digital marketing conferences 2016 has to offer.

Bonus: to help with you whittle down your conference wish list, we found out what people had to say about last year’s conferences.

1. MozCon: September 12–14, 2016 (Seattle, Washington)

MozCon Logo

MozCon promises three days of actionable sessions, speakers sharing first-hand advice and fun networking events that won’t disappoint. If you’re looking to get exposed to what’s new in SEO, CRO, content marketing and community building, don’t wait too long to sign up.

Bonus: Roger, the cutest and cuddliest robot, will be there to give you a hug.

What last year’s attendees said:

2. Unbounce Call to Action Conference: June 19–21, 2016 (Vancouver, Canada)

CTA digital marketing conference

Our very own Call to Action Conference brings together experts in conversion optimization, pay-per-click, email, copywriting and UX design. If your goal is to become a faster, better and stronger marketer, we have amazing hands-on workshops that will expand your skill set and help you get there. Vancouver is at its most charming in the month the June, not to mention the parties and the swag are pretty awesome! Come pay us a visit in Vancouver.

What last year’s attendees said:

3. ConversionXL Live: March 30–April 1, 2016 (Austin Area, Texas)

CXL image 2016

ConversionXL Live brings the top conversion optimization experts in the world together to teach you all their processes and methods. Unlike other conferences, networking is underlined and emphasized so you can further your learning while building relationships with your peers. If you’ve read Peep Laja’s ConversionXL blog, you know this is one of the most informative blogs on conversion optimization out there. And if this is an area you want to dominate, ConversionXL Live is one of the best marketing conferences out there.

What last year’s attendees said:

4. MARTech: March 21–22, 2016 (San Francisco, CA) and October 20–21, 2016 (London, UK)

Digital Marketing Conference Martech

As the name MARTech implies, this conference is for hybrid professionals that are both marketing experts and technology savvy. This event blurs the lines between marketing and IT and introduces conference goers to new technologies that will influence the data science, growth-hacking and digital marketing landscapes.

What last year’s attendees said:

5. Hero Conf: April 25–27, 2016 (Philadelphia, PA) and October 24–26, 2016 (London, UK)

Hero Conference

Hero Conf is one of the top marketing conferences for marketers who want to focus on improving their PPC skills. This PPC theme allows for actionable takeaways focused on improving your strategy around paid ads and data on LinkedIn, Bing, Google, Facebook and more. A low speaker-to-attendee ratio means that networking and nightly events are both fun and informative.

What last year’s attendees said:

6. WistiaFest: June 5–7, 2016 (Boston, MA)

Wistia image

WistiaFest delivers you three days of video marketing insights, data, analytics content and more from some of the industry’s top professionals from around the world. This is an important event for marketers who use video in their marketing efforts and want to see where the future of video lies, and who want to catch up with their peers at one of the best video marketing conferences.

What last year’s attendees said:

7. MozCon Local: February 18–19, 2016 (Seattle, Washington)

Mozcon local image

If you’re part of a local business and want to gain insights and knowledge on local SEO and other marketing tools, this is a great event that will feed your SEO and marketing hunger. MozCon Local will arm you with knowledge as well as tactical tips in the form of talks, workshops and cool networking events in lovely Seattle. What more could you want in a conference?

What last year’s attendees said:

8. ad:tech: November 2–3, 2016 (New York City, NY)

Adtech image

ad:tech is an event held in eight countries that covers the changing landscape of advertising technology. The event is for marketers, brand strategists, agencies and publishers. ad:tech helps you navigate the evolution of key technologies and keeps you ahead of the curve so that you can drive innovation within your brand or agency.

What last year’s attendees said:

9. Marketing United: April 18–20, 2016 (Nashville, TN)

United image

Marketing United is bringing some of the world’s top marketers to Nashville to share their tips, tricks and stories to help inspire you. Each session promises to be informative and exciting, not to mention the venue is steps away from great food and music à la Nashville.

What last year’s attendees said:

10. Advocamp: March 7–9, 2016 (San Francisco, CA)

Advocamp image

If you’ve got customer growth and development on the brain then Advocamp is one of the best marketing conferences for you. Advocamp is the only conference that focuses on customer delight all while providing you with the tools to build a viable business strategy. Not to mention they take the conference’s name seriously and pair attendees into smaller “camp” groups. This is Advocamp’s second year, and it’s sure not to disappoint.

What last year’s attendees said:

11. C2 Montreal: May 24–26, 2016 (Montreal, Canada)

C2 logo Marketing Conference

C2 focuses on creativity and commerce by bringing together some of the most innovative thought leaders across various disciplines. Not only does creativity take center stage, it also makes an appearance after hours. C2 has created some of the most engaging and entertaining networking events all with the help of Quebec’s own Cirque du Soleil. Get exposed to innovation and creativity from all facets of the business world.

What last year’s attendees said:

12. Searchlove: May 3–4, 2016 (Boston, MA) and October 17-18, 2016 (London, UK)

Searlove Logo

This two-day event attracts some of the world’s top online marketing talent and covers a variety of topics from search, analytics and paid to content strategy and optimization. With actionable advice, tips and processes, SearchLove is filled with the information you need to push your career forward.

What last year’s attendees said:

13. SXSW Interactive: March 11–15, 2016 (Austin, Texas)

SXSW logo

Considered one of the top marketing events out there, SXSW Interactive has historically been the place to launch your product and boost your career. With a guest list brimming with the who’s who in the industry, this event is usually packed with stars from the digital world as well as Hollywood. It’s also one of the best conferences work on your networking skills. SXSW Interactive puts an emphasis on innovation and the changing digital landscapes. If you’re a startup or looking to launch your product, SXSW Interactive may be the place for you.

What last year’s attendees said:

14. Intelligent Content Conference: March 7–9, 2016 (Las Vegas, NV)

ICC Best Marketing Conference 2016

If you’ve been looking to improve your content strategy skills, ICC is that best marketing conference to help you up your game. With topics covering how to scale content production, reusing and repurposing legacy content and diffusion of content on different platforms, ICC is one of the most on-point content marketing conferences out there.

What last year’s attendees said:

15. Inbound: November 8–11, 2016 (Boston, MA)

Inbound logo 2016

Inbound’s four-day event has over 170 training sessions, five keynotes and lots of entertaining and fun activities at night. Past entertainment has included the likes of Amy Schumer and Janelle Monáe. With 14,000 attendees, the event is a huge opportunity to network and see some of the best professionals in the marketing industry.

Pro tip: Inbound is a huge event with lots of great workshops and speakers happening at the same time. Make a list of the events that you’d like to attend in advance to get the most of out of your experience.

What last year’s attendees said:

16. Search Marketing Summit: May 30–June 3, 2016 (Sydney, Australia)

SMS logo 2016

If you’re living down under or you’ve always wanted to visit, Search Marketing Summit is the number one event of its kind in Australia. This five-day event is packed with advanced workshops that cover topics from mobile, search and email marketing. Search Marketing Summit is a great way to update your skills and advance your knowledge in just a few days.

What last year’s attendees said:

Time to step it up

Attending conferences is important because they push you out of your professional habits and routines and expose you to new technologies, trends and people.

We’ve armed you with the a list of the best digital marketing conferences of 2016 that will provide you with the right tools and knowledge to level up your marketing game. It’s up to you to make the next move.

Your personal growth and that of your agency or company depend on it.

Read More: 

The 16 Best Digital Marketing Conferences of 2016

Building The New Financial Times Web App (A Case Study)

Update (10.10.2013): Good news: according to recent tests, Flexbox layout isn’t slow any longer. Author’s comments about the performance of Flexbox refer to the original (legacy) flexbox that used display: box;. A head-to-head comparison of old vs. new syntax is available as well. — Ed.
When the mockups for the new Financial Times application hit our desks in mid-2012, we knew we had a real challenge on our hands. Many of us on the team (including me) swore that parts of interface would not be possible in HTML5.

Link – 

Building The New Financial Times Web App (A Case Study)

Thumbnail

WordPress Migration: How To Move A Site Without Hassle

Moving WordPress is a task that many people find daunting. The advice on the Codex, while comprehensive, gives you a myriad of options and doesn’t describe the process simply and in one place.
When I had to move a WordPress installation for the first time, I spent hours searching online for information on the various aspects of the process, and eventually wrote myself a checklist — which I still use.

Continued here:  

WordPress Migration: How To Move A Site Without Hassle

Useful JavaScript Libraries and jQuery Plugins

If you have a problem and need a solution for it, chances are high that a JavaScript library or jQuery plugin exists that was created to solve this very problem. Such libraries are always great to have in your bookmarks or in your local folders, especially if you aren’t a big fan of cross-browser debugging.
A JavaScript library isn’t always the best solution: it should never be a single point of failure for any website, and neither should a website rely on JavaScript making the content potentially inaccessible.

Link: 

Useful JavaScript Libraries and jQuery Plugins

Practical JavaScript Libraries and jQuery Plugins

If you have a problem and need a solution for it, chances are high that a JavaScript library or jQuery plugin exists that was created to solve this very problem. Such libraries are always great to have in your bookmarks or in your local folders, especially if you aren’t a big fan of cross-browser debugging.
A JavaScript library isn’t always the best solution: it should never be a single point of failure for any website, and neither should a website rely on JavaScript making the content potentially inaccessible.

Jump to original – 

Practical JavaScript Libraries and jQuery Plugins

WordPress Multisite: Practical Functions And Methods

Multisite is a powerful new feature that arrived with the release of WordPress 3.0. It allows website managers to host multiple independent websites with a single installation of WordPress. Although each “website” in a network is independent, there are many ways to share settings, code and content throughout the entire network.
Since the beginning of the year, I’ve been developing themes and plugins for a WordPress Multisite-powered content network. During that time I’ve learned many powerful tips and tricks unique to Multisite.

Link:

WordPress Multisite: Practical Functions And Methods