Create Your Own Home Screen Widgets in iOS 14 for an Even More Customized iPhone

Sep 23, 2020 07:39 PM
Sep 23, 2020 07:50 PM
637356895040886645.jpg

Possibly the most popular feature in iOS 14, home screen widgets are here to stay. Apple created a ton for its own apps, and third-party developers keep building ones for their own apps. But home screen widgets go beyond that since you can make a widget for practically anything you want, from a custom news feed to an inspirational picture of the day — and this is how you do it.

Thanks to the Shortcuts app, you can build your own widgets that show up in the widget gallery, only you do need a third-party app with its own set of widgets that will let you customize them. There is no simple "widget" action in Shortcuts, which we hope one day will be a thing, but you can take an app that centers around building widgets and use its Shortcuts integration.

Since iOS 14 came out, there has been a slew of iOS apps centered around building custom widgets. Widgetsmith is a popular choice, and there's also Widget Wizard and Color Widgets, but most cost money up front or require a subscription to use. The one we like is called WidgetPack, and while it does cost $4.99, there is a way to try it out for free to see if personalized widgets are right for you.

For other widget creation tools, check out our full list of apps with widgets. There are tools that focus just on pictures (like Photo Widget.) or provide various options (like My Widgets) or focus more on the design (like Color Widgets). While it's still early in the game, we expect a few widgets to eventually stand out above the rest, with hundreds of options, so be on the lookout for that.

Step 1: Install WidgetPack

As mentioned, there are a few ways to get WidgetPack; one that costs money, and one that doesn't. If you know you'll love playing around with your own custom-built home screen widgets (which also work in the Today View), just get the app from the App Store for $4.99. It's worth it, and it's a great introduction to the art of widgets in Shortcuts.

If you want to try it before you buy it, WidgetPack offers a beta via Apple's TestFlight app. So install that, log in with your Apple ID, then join the WidgetPack beta for free. Tap "Start Testing" on the beta page, and you'll jump to TestFlight, where you can install the WidgetPack app.

637363884415308587.jpg
637363884415308587.jpg

Step 2: Choose an Example Widget

Open WidgetPack, and you'll see several example widgets already created for you, some of which you can modify for a more personal touch. The widgets you can choose from include:

  • Year Progress: A progress bar for 2020, depicting how much time has passed over the year.
  • Shortcuts Grid: Showcases nine different shortcuts for you to open. The official Shortcuts widget maxes out at eight and takes up 16 app spots on the home screen, while this one is more compact, taking up half the space.
  • Apple Press Releases: Shows you the latest press releases from Apple Newsroom.
  • Astronomy Picture of the Day: Shuffles through NASA's photos of the day.
  • Home Screen Contact: Opens a contact of your choice, a decent replacement for the official "Favorites" widget that disappeared for the Phone app.
  • Other widget templates are available in the paid app.

To get a widget, tap on any of the examples. Once you do, you'll be redirected to the Shortcuts app, where you can review the shortcut's workflow and add it to your library. If you get an error in Shortcuts saying that you can't open it, visit Settings –> Shortcuts, then enable "Allow Untrusted Shortcuts" and try again. Then, scroll to the bottom of the shortcut preview and tap on "Add Untrusted Shortcut."

Step 3: Give the Shortcut Permissions

Now, in "My Shortcuts," tap on the shortcut you just added. Depending on the widget you chose, it may ask you to access a third-party website or app. Hit "OK" on those if any appear. Finally, it will ask for access to the WidgetPack app, which is needed for the shortcut to communicate with its host app, so tap "OK" here too.

637356287511833840.jpg
637356288519803174.jpg
637356287511833840.jpg
637356288519803174.jpg

Step 4: Add the Widget to Your Home Screen

Exit to your home screen, then move to the page where you'd like to place the widget. Long-press on the wallpaper until things start jiggling (there are other ways to enter the home screen editor too), then tap the plus (+) icon in the top left.

Look for the WidgetPack widget, which may show up as a preview right away. If not, scroll to the widget list, tap on "WidgetPack," choose a widget size, and add it to your home screen page. Some of the widgets only look good at a specific size. For example, the Apple Press Releases one should be the medium rectangle (that takes up eight icon spaces). However, you can make the larger widget size work if you adjust the shortcut (see Step 5).

After adding it, you'll notice that the widget is blank and says, "Please configure this widget." To configure it, long-press on the widget until the quick actions menu pops up. Now, tap on "Edit Widget," then on "Choose" next to Name. Finally, select the widget you want to display, then tap outside of the widget to return home and see everything working.

Step 5: Customize the Widget

Every shortcut you add from WidgetPack can be customized. For this example, we'll customize the Apple Press Releases widget, turning it into a Gadget Hacks Stories widget. To start, tap the ellipsis (•••) icon on the shortcut in "My Library." Next, paste one of the RSS feeds below over the Apple Newsroom RSS link in the "Web" action card.

Next, scroll to the last action and swap out "Apple Press Releases" for "Gadget Hacks Stories." This is what will show up when you're choosing a shortcut in the WidgetPack widget.

The widget also features some gray trim and an Apple logo at the top, but we can easily swap that out for something that looks more like Gadget Hacks.

First, find the "WidgetPack" action card that says "Hex color from #33333." That hex code is for Apple's typical gray color. For a red Gadget Hacks look, use #df222b instead. In the "Hex color from #d6d6d5" card, change that to #ffffff for white.

Next, go to the card that says "SF Symbol" and tap on "applelogo." Enter in "News" in the search bar, and choose the newspaper icon. Really, you can choose anything your heart desires here, from a smartphone glyph to a storm icon.

Finally, scroll to the top, then tap on the ellipsis (•••) icon in the top right. At the top, you can rename the shortcut to Gadget Hacks so that you can find it more easily in your Shortcuts library. You can also choose a new icon color and glyph if you want, but that's only really for if you add the shortcut to your home screen as an app icon.

637364575467507053.jpg
637364575312152873.jpg
637364575467507053.jpg
637364575312152873.jpg

Add a WidgetPack widget to your home screen, edit the widget, and choose "Gadget Hacks Stories" or whatever you ended up going with. Like the Apple Press Releases widget, this one will showcase various titles on the widget. If you tap on a title, you'll be taken to the website where you can read the article.

637364578244070516.jpg
637364582856569370.jpg
637364578244070516.jpg
637364582856569370.jpg

There are other edits you could make, but we just wanted to get the ball rolling for you. Explore all of the actions in the shortcut to see what you can and can't adjust, then try adding some of your own actions. If you want more examples to start from, check out some of the other widget-creation apps in the App Store.

Step 6: Create a Widget from Scratch

If you know a little about creating shortcuts, you can create a widget from scratch within the Shortcuts app. You still need the WidgetPack app (or another widget-creation app) to make one from the ground up since there is no way to get a widget in the widget gallery without it.

For this example, we'll be creating a simple text widget that opens up our website. Now, you could do the same thing more easily by creating an app icon on your home screen from Safari that opens a webpage versus having a big widget just for it, but this is just an easy demonstration to get you started.

In "My Shortcuts" in Shortcuts, tap on the plus (+) icon in the top right. Now, you can start adding actions to the workflow. First, tap on the "Add Action" button.

637356339016141784.jpg
637356339643483567.jpg
637356339016141784.jpg
637356339643483567.jpg

Search for "WidgetPack" in the search bar, then tap on the WidgetPack app when it appears. A list of actions compatible with WidgetPack will appear. Let's start with "Text." Enter something into the text box, which will appear on the widget, and then tap on "Show more" to adjust the text font and color and whether you want to bold, italicize, or underline it, and more.

Tap on the plus (+) button underneath the action window to add another action. This time, we'll be adding the "Update Widget" action, which will rename the widget and allow you to add a link. First, change the name of the shortcut (this is the name that will appear in the WidgetPack widget selector), then tap on "Show more" and enter the URL you want to open when you tap on the widget.

637356347739577914.jpg
637356355920358627.jpg
637356347739577914.jpg
637356355920358627.jpg

Hit "Next" in the top right when you're finished, then name the shortcut, which is the name that will appear in the Shortcuts app. You can also edit the avatar and color of the widget, as shown before.

Tap "Done," then tap on the widget to run it and add it to WidgetPack. When you're finished, go to the home page and add a WidgetPack widget. Edit the widget, and choose the shortcut you just created. Once you do, you'll see the text you added in the actions. Tap on the widget to open the link you included.

Step 7: Install Some User-Created Widgets

Don't stress if you don't know how to make your own widgets because there are many people out there that make them and post them online to install for free. Finding them might be more difficult (use keyword WidgetPack on Reddit and Twitter), but once you find one, it's easy to add it to your Shortcuts library and your home screen.

For instance, the Reddit widget, seen below, from Reddit user u/Sl0wly-edits, shows you the top three posts in any one subreddit. You can download the 4-by-2 widget shortcut with the link below or from their Reddit post, which also has other widget shortcuts to try.

Once you download the Subreddit/Multireddit Feed shortcut, scroll down and tap on "Add Untrusted Shortcut" to add it to your library. Now, tap on the ellipsis (•••) icon on the shortcut in "My Shortcuts" and give the shortcut access to WidgetPack. Tap on "Allow Access," and then hit "OK" in the pop-up that appears.

Now you must type in the subreddit or multireddit that you want to appear in the widget. You'll see a comment box about how to format it, and then a text box where you can enter the text. We added r/FrankOcean. Once you're finished, tap on "Done" on the top right. Run the Subreddit/Multireddit Feed shortcut, then grant it access to Reddit; hit "OK."

Now, add a 4-by-2 WidgetPack widget to your home screen, edit the widget, and select m/AllApple (which is the WidgetPack name for the Subreddit/Multireddit Feed shortcut). You'll see the top three posts in the subreddit or multireddit you chose, as well as how many upvotes each post has. Unfortunately, you can't tap on the post to view it on Reddit, so you'll have to do that manually unless you customize the shortcut to open the link.

637356381232458545.jpg
637356381727614902.jpg
637356381232458545.jpg
637356381727614902.jpg

Cover photo, screenshots, and GIFs by Nelson Aguilar/Gadget Hacks

Comments

No Comments Exist

Be the first, drop a comment!