Using ACF, you can create a custom UI that makes adding content a breeze. This makes for better efficiency and serves as a helping hand for non-technical users.

For example, you might dedicate a section of your website to staff member profiles. You could create custom fields for each person’s name, title, email address, photo, and biography.

From there, you add the custom fields to your theme’s template or as a custom block so that they display exactly the way you want. The result is that inputting content is quite simple, and you ensure that the data displays consistently on the front end. So yeah, that’s why I love using this plugin!

Even better is that several developers have created companion plugins that add even more cool features to ACF. Let’s have a look:

Advanced Custom Fields: Extended

Advanced Custom Fields: Extended provides a suite of enhancements for ACF Pro (yes, you need the Pro version). The plugin not only includes its own custom field types but also boosts some existing ones as well. And it works seamlessly with ACF, meaning there are no extra settings panels to configure.

Among the included fields: Button, Code Editor, Columns, Google reCAPTCHA, and more. But that’s just scratching the surface of what this plugin can do. A pro version adds even more goodies.

ACF Photo Gallery Field

ACF Photo Gallery Field offers an easy way to add WordPress photo galleries to your custom field setup. From there, theme authors can leverage PHP and CSS to create a custom look and layout for galleries in their templates. Thus, it’s aimed more at the DIY crowd than those who prefer an all-in-one solution.

ACF: Better Search

One drawback of custom fields is that their contents aren’t searchable by default. ACF: Better Search adds custom fields to the WordPress search function, ensuring users don’t miss out. An options panel allows you to choose which field types to include, along with a few other search-related tweaks.

ACF Quick Edit Fields

ACF Quick Edit Fields lets you view and edit custom field values right from the WordPress post listing. You can also take advantage of bulk edit functionality to change the values of several posts at once. This can be a huge time saver, as there’s no need to click into each post individually.

Advanced Custom Fields: Image Aspect Ratio Crop Field

ACF image fields are great because they allow content creators to easily swap out media files. However, ensuring that new images are sized correctly can be a challenge.

Image Aspect Ratio Crop Field provides a UI for users to crop their uploaded image to a specific size or aspect ratio. This helps to mitigate the risk of a client breaking your carefully-crafted look and layout.

ACF Theme Code

ACF Theme Code solves a very common issue when adding custom fields – you need to add code to your theme in order to render that data (although Shortcodes are also available for more simple implementations). This can get rather complicated even for seasoned developers.

Using this plugin, a code snippet for each field is displayed at the bottom of an ACF page that you can copy and paste into your theme. A pro version adds more features, including compatibility with several third party add-ons (some of which are in this roundup).

Advanced Custom Fields: Font Awesome Field

This plugin combines my passions for both ACF and Font Awesome icons. It adds a field that lets users choose an icon to go along with their content.

For example, I recently used this to add icons to text headings within a page. It makes for a nice way to separate content and provide context to visitors. Plus, people really like to pick out their own icons.

Advanced Custom Fields: Table Field

Here’s an easy way to add custom field data to HTML tables. What’s nice is that the non-technical user can enter data without having to worry about breaking anything. Simply drag rows or columns to reposition them. Tables can also have an optional header.

Advanced Custom Fields: Gravityforms Add-on

Both ACF and Gravity Forms are among the most flexible WordPress plugins. So it makes sense that there’s now a way to tie them together. This add-on creates a new “Forms” field type that will allow the user to select the form of their choice from a drop-down list.

Ajax Load More for Advanced Custom Fields

The Ajax Load More plugin adds infinite scrolling to various aspects of your WordPress Website. This add-on brings that same lazy loading functionality to ACF repeater, flexible content, gallery and relationship fields.

Build It Your Way

If you’re serious about developing with WordPress, then custom fields are a must-have tool. With Advanced Custom Fields, you have the ability to customize just about any content scenario imaginable. It’s one of the tools that help make WordPress a truly powerful platform.

But combining ACF with the add-ons above will bring even more convenience and flexibility to the party. It will allow you to transform a standard website into something much more dynamic.

The post 10 WordPress Plugins to Supercharge Advanced Custom Fields appeared first on Speckyboy Design Magazine.

Let’s explore one simple idea of how you can use WordPress custom fields to create an enhancement to the appearance of your site.

What You’ll Need

Before we start, make sure you install a copy of the Advanced Custom Fields plugin. While those proficient with PHP can create their own custom fields (or even use the more basic implementation that comes with WordPress), Advanced Custom Fields makes things a bit easier. It adds a familiar WYSIWYG interface and will even export the PHP for you under a separate Export entry in the plugin’s menu. If desired, you can then paste that code into your theme’s functions.php file. However, that isn’t completely necessary, as the custom fields you create will stay functional for as long as you keep the plugin active.

Let’s Create Some Fancy Page Titles

While there’s something to be said for simple text page titles, sometimes you might want something a little more interesting. For example, what if you wanted each page of your site to have its own page title background image, like this:

This has been designed to be a background image with a blue, semi-transparent box to hold the page’s title text. Here’s how to make it work:

Within Advanced Custom Fields

1. Create a new custom field set and give it a name such as Page Header. Take note of the field name that Advanced Custom Fields creates – page_header in this case.
2. Select Image as your Field Type.
3. Set the Return Value to Image URL. This will make it easier to display the image we upload on the front end of the site.
4. Set Rules in the Location box to Post Type is equal to Page. You may also set this to a specific page, post type or category if you wish (adjust your code accordingly).
5. In the Options box, set the position of your field to High (after title). This will ensure the custom field will be placed just below the title of your page inside WordPress.
6. Save your field.

Of course, there are a lot of other options and field types you could explore. Take a look at the Advanced Custom Fields documentation for more information.

Inside the WordPress Editor

1. After you have created your custom field, visit the page you wish to edit in the WordPress Dashboard.
2. You’ll notice that the custom field we created is now towards the top of your page, just under the title:
   
3. From there, click on the Add Image button to upload your custom image. This will be familiar to you as it’s exactly the same process as using the Add Media feature in your pages and posts.
4. Once your image is uploaded, you’ll see a preview of it. Make sure to save your page.
5. You can repeat these steps for each page on your site that you would like to use a custom page title image.

In Your WordPress Template

1. Find the page template you wish to edit in your theme/child theme. Since I’m going to add this field to every page in the site, I’m using page.php.
2. Add code similar to this in place of your current page title area (you may need to do some digging if using a pre-built theme):

In Your Theme’s Stylesheet

1. Paste the below CSS into your theme’s stylesheet:

 .custom-page-title {
 font-size:34px;
 line-height:40px;
 font-weight:normal;
 color:#FFF;
 height:150px;
 margin-top:10px;
 -moz-border-radius-topright: 75px;
 -webkit-border-top-right-radius: 75px;
 border-top-right-radius: 75px;
 -moz-border-radius-bottomright: 75px;
 -webkit-border-bottom-right-radius: 75px;
 border-bottom-right-radius: 75px;
}

 h1.custom-page-title span {
 position:absolute;
 background-image:url(images/page-title-background.png);
 width:240px;
 height:110px;
 padding:20px;
 }

Notice the use of in the style attribute of the H1 tag. This allows the custom page title images we uploaded to our pages to be used as a background image. Then, we created a box using a semi-transparent .png file which will hold the title’s text.

Of course, you can style this in any number of ways. Depending upon how you want to implement this custom field, you may also use conditional statements to create a default page title (fallback) image or even hide the field on specific pages.

So Many Possibilities

As with Custom Post Types, Custom Fields can help add some cool features to your site and even make it easier for your clients to update. Because there are so many different types of fields to use, you can customize virtually any type of content you want.

Take some time and play around with Advanced Custom Fields and see what you can create!

The post How to Use the WordPress Custom Fields Plugin appeared first on Speckyboy Design Magazine.

This opens a whole world of possibilities when it comes to form and function. The ability to create fully-custom themes and plugins offers a path to building virtually any type of website. But it doesn’t end there.

Features like custom post types and taxonomies, along with custom fields allow for highly-specialized content. It can be organized in a way that fits your needs like a glove.

In addition, there are an endless array of smaller customizations. Code snippets targeting hooks and filters let you tweak existing functionality even further. And we’re only scratching the surface of what’s possible.

However, with all of this power comes some responsibility. Customizing WordPress requires some planning. And there are several important factors to consider. So, before you fire up that code editor, here are some things you should know about the process.

A Staging Site is a Must-Have Feature for Testing

Creating some custom functionality for your WordPress website? Avoid building it directly on your production site if at all possible. There are simply too many things that can go wrong.

One false move can lead to usability/performance problems or even downtime. Perhaps it’s not as big of a deal on a small site with few visitors. But a busy eCommerce or membership website? That could cost you both sales and customer loyalty.

This underscores the importance of having a staging site. It provides a playground of sorts where customizations can be tested before being made public. The idea is to hopefully catch and repair any issues before they impact users.

What’s more, there are a number of ways to set up a staging environment. Some web hosts offer them as part of their services. But you can also create your own either online or on your local machine.

Testing this way is very much worth the extra effort.

The Method for Implementing Customizations Matters

Part of the beauty of WordPress is that you can implement custom code in a number of ways. But it also has the potential to become problematic.

For example, a custom code snippet can easily be placed into your theme’s functions.php file. That is fine for the short term. But what happens when you change themes down the road?

Launching a redesign with a new theme will result in a loss of those customizations. And while moving any snippets to the new theme is possible, they could well get lost in the shuffle. Depending on the nature of the custom code, some key functionality may end up missing. In this type of situation, creating a custom plugin would be the more future-friendly solution.

When it comes to making changes to a third-party theme, there are similar considerations. Adding or editing code directly within the theme means potentially overwriting changes during an update. The best way around that issue is by utilizing a child theme.

The universal point is that, regardless of what you’re trying to achieve, it’s important to implement customizations in a way that will stand the test of time. Keeping things well-organized is also recommended so that you won’t have to search around in several different places to find what you need.

There Will Be Future Maintenance Requirements

Neither WordPress nor its ecosystem of themes and plugins remain static. They evolve with the times. That means the code we write today will likely need to be maintained on a regular basis.

This follows the evolution of WordPress itself, but also of the variety of languages and libraries it depends on. PHP, JavaScript libraries such as jQuery and React, and CSS are prime examples. A change to these dependencies can impact performance and whether or not a particular feature still works.

Not only that, but plugins and themes also have their own agendas to implement. New features are added at a breakneck speed in this competitive environment. The ever-shifting Gutenberg block editor is also a moving target. This can lead to more compatibility issues as new versions continually roll out.

Therefore, you’ll want to pay close attention to what’s happening in these areas. Changes to WordPress core, themes, plugins, or dependencies could directly impact your existing customizations.

Customizing WordPress Is Serious Business

The mere act of customizing WordPress is one thing. But going about it the right way is another. It’s not something to dive into without some serious thought.

It’s important to consider what you want to accomplish, how it will be implemented, and how to keep it running smoothly into the future. The answers often come down to planning ahead and following best practices.

If you’re extending the functionality of WordPress itself or a plugin, read up on the documentation. There are likely some established methods built-in for getting the results you need.

The other side of the coin involves staying within coding standards. For example, eschewing any deprecated PHP or JavaScript and opting for the latest stable techniques. This will keep your code compliant and hopefully easier to maintain over time.

Keeping these things in mind will lead to more complete and sustainable results. That’s something that will benefit every WordPress developer.

The post Things You Should Know Before Customizing WordPress appeared first on Speckyboy Design Magazine.

The process of creating custom blocks is also quite flexible. You can build them natively with React or via  a companion plugin like Block Lab or Advanced Custom Fields. Whether your preferred language is JavaScript or PHP, there are methods available to suit.

However, just because we can create a custom block doesn’t mean it’s always necessary. There may be cases where hacking your theme could be an acceptable solution. Not to mention the possibility that a block you need already exists somewhere out on the interwebs.

So, how do you determine whether a custom Gutenberg block is the best answer? It’s all about asking the right questions.

Follow this handy guide for everything you need to consider!

What Is the End Goal?

It might sound counterintuitive, but the best place to start is at the very end. Whatever type of feature you need, think about its purpose and what it should achieve.

You might, for example, be looking for a way to create a complex layout. Or maybe you need a tool that helps you list a specific set of blog posts. Then there are niche features such as displaying editable user profiles and image galleries.

The good news is that a custom Gutenberg block could theoretically do any one of the above examples. This speaks to their versatility.

Yet, it is also worth asking if your end goal is unique enough to require something built from scratch. There is a growing library of readymade blocks that can easily be added to your site. They may provide exactly the functionality you’re looking for.

But readymade isn’t always better. If the existing options don’t give you the level of control you seek, then a custom block is the way to go.

Do You Need the Feature in Multiple Places?

One of the great aspects of the block editor is the ability to use the same features again and again. A block can be implemented in any position within a page. And a page can even house multiple instances of the same block.

Likewise, a block can be used across your website. Take, for example, a block that lists staff members. If your business has multiple locations, you could give each one its own page. From there, a custom block could be utilized to list staff at a particular location.

In this case, a custom block could help you maintain both a consistent look and streamline content management. Each location could be easily updated – and even automated to a degree. By pulling posts from a custom post type, new staffers can be added, edited, or removed as needed.

Keeping the look and layout you want is also possible. By pairing your blocks with a custom block pattern, you’ll have an extra measure of control. Blocks can also be moved around with minimal effort. Thus, adding content above, below, or beside your custom block won’t require any template hacking.

A one-off feature, however, may lessen the need for a custom block. In this case, it may be more efficient to use custom fields or add what you need directly to your theme’s template.

Should Clients Have Access to Make Changes?

WordPress Gutenberg blocks are built with ease-of-use in mind. They’re easy to move and edit to suit your needs. This enables anyone to make changes without too much trouble.

Of course, this can be a headache for web developers. You may not necessarily want your clients to go in and change things around. It could throw off the consistency of your design or lead to the wrong content being displayed.

The WordPress Block API allows for some protections in this area, such as allowing single instance usage and even locking templates. Still, there may be times when hiding functionality is the better option.

If you really don’t want anyone to view or have access to specific functionality, stash it in your template or a custom plugin. This will client-proof your site and ensure that it works the way you intended.

What Will the Future Bring?

Finally, it’s always worth considering what future needs may arise. This is particularly important for Gutenberg, as it is likely to be the default editor for the long haul.

That means blocks need to be built in a sustainable way. But this is made more difficult by the evolution of the editor itself and the tools we use to build for it. Some coding methods have changed since the early days, and they’ll likely do so again.

Then there’s also a debate about building blocks natively versus using a plugin. Before committing to a particular plugin, think about its long-term potential. It’s best to look for plugins with a solid track record and a likeliness to still exist years from now.

And if you do decide to go with an old school (non-block-based) approach to building features, it’s vital to consider how that will hold up. Themes may trend towards being fully editable within Gutenberg sooner rather than later. How does that affect what you’re doing now?

Finding the Best Fit for Gutenberg

Custom blocks offer an opportunity to create something that is both unique and reusable. Even better, they can be built in a way that meshes perfectly with the editor itself. The result is a seamless experience for users.

But before you jump in head-first, you’ll want to do a little thinking. Ask yourself the questions above and determine whether a custom block is the right fit.

The post When Do You Need a Custom WordPress Gutenberg Block? appeared first on Speckyboy Design Magazine.

This information is vital and needs to stand out from the rest of the site’s content. In addition, it should require as little effort as possible to add. This is especially the case if your client is the one updating the website. Ideally, they shouldn’t be making design decisions while trying to share an important message. Plus, time is of the essence.

Today, we’ll introduce you a handy solution that uses WordPress custom fields. It will enable you to:

• Create a custom emergency message;
• Select a Font Awesome icon to display alongside of it;
• Turn the message on or off with a single click;
• Add an attention-getting design to your WordPress theme;

Ready to start? Let’s get to it!

What You’ll Need

This one is fairly simple to put together. However, you will need a few ingredients:

• A WordPress website;
• Advanced Custom Fields (free version);
• Advanced Custom Fields: Font Awesome Field (free);

The two free plugins will need to be installed and activated. Beyond that, you’ll also need access to your WordPress theme.

If you’re using one of the default themes that come with WordPress or a commercial theme, be sure to set up a child theme. This will prevent any changes you make from being overwritten by an update later on.

Adding and Configuring Custom Fields

The first task is creating a custom field group within WordPress. To start, head on over to Custom Fields > Add New within the WordPress Dashboard.

You can create any fields you’d like to use. Here’s what our example looks like:

Alternatively, you can replicate this example exactly by grabbing the following JSON file:

Once you’ve downloaded the file, head on over to Custom Fields > Tools. You can then import the custom field group to your website.

After the import, go to Custom Fields > Field Groups. Click on the “Emergency Notices” entry to open up the edit screen.

Note that you may want to tweak a few settings here. Particularly focus on the Location rules for the field group. Make sure the fields are set to show up on the page or pages you want. In our case, we’re displaying the fields on the “Home” page.

Creating the Emergency Message

Now it’s time to navigate over to the “Home” page, where the emergency message fields are assigned.

How the fields look within the content editor will vary. If you’re using the Gutenberg block editor, the field set will be tucked away at the bottom of the editor – and below any existing content.

If you are using the Classic Editor, the fields in the JSON file we provided are set to appear just below the page title and above any existing content.

Either way, adding the message to our page is fairly simple. For the “Show the Emergency Notice” field, click on “Yes”. Then, select an icon (view a list of available Font Awesome icons). From there, enter your message in the WYSIWYG field.

Save the page and you’re done! Well, almost…

Adding and Styling Your Message on the Front End

Finally, let’s place our emergency message within our WordPress theme and add some CSS styling.

In this example, we’re going to place the message above the site’s header. Here, it will span the width of the screen and display at the very top of the page. Of course, you can feel free to add this snippet to whichever area you think is best.

As for styling, you have a lot of flexibility. Here, we’ll utilize a red background with large, white text. Our Font Awesome icon will stand out with a yellow color.

The final result will be hard to miss!

Keep Visitors Informed

An organization’s website is one of the first places people check for vital information. While it’s also important to post these types of messages on social media, it can easily get lost in a crowd of content.

This solution offers a simple way to add an emergency message anytime. When no longer needed, it can be removed with just a few clicks.

There are also ways to enhance the feature by adding other relevant custom fields. ACF has plenty of built-in options, and there are a number of add-on plugins that can do even more.

Just about every website can benefit from this type of feature. Set it up now so that you won’t have to scramble to do so later.

The post How to Create an Emergency Message UI in WordPress appeared first on Speckyboy Design Magazine.

Recently, I faced the challenge of setting up an HTML5 video inside a WordPress page. It’s in a static location and would need to be replaced every so often. While it’s fine to use the Video Shortcode, in this case I wanted to make things extra simple for the folks who would be updating the page. I didn’t want them to have to learn what a Shortcode was or how to use it.

So, the simplest solution (in my mind, anyway) was to create some custom fields where the related video files could be uploaded. From there, the theme’s template would automatically create the necessary code to display the video. Here’s how I did it:

Project Requirements

You’ll of course need a WordPress site and access to edit your theme (please use a child theme if you aren’t already doing so). Some familiarity with PHP and HTML will also be a big help. Beyond that, you should have:

• A way to create custom fields. The free version of Advanced Custom Fields (ACF) will do the job quite well. Install and activate it on your WordPress website.
• A video – ideally in multiple formats. Although MP4 files are now supported across every major browser, it might not be a bad idea to provide a WEBM version for extra coverage. And, while you’re at it, a FLV fallback for those using really ancient browsers couldn’t hurt. You’ll want to make sure that each version of your video is set to the same resolution.
• A ‘poster’ image. Either a screen capture or custom graphic made to the highest resolution your video will be played at.

Step 1: Create the Custom Fields

Once you’ve installed and activated the free version of ACF, go to the Custom Fields menu inside WordPress and then click Add New.

Inside your new set of fields (ours are called ‘Video Fields’), you’ll need to create an ACF File field for each video format you plan to upload, plus another for the poster image. In our setup, we have fields for MP4, WEBM, FLV and a Poster. For each file field, make sure to select the radio button in Return Value that says “File URL”. Also, be sure to make note of the Field Names – we’ll need those later on.

Next, inside the ACF ‘Location’ setting, assign your new fields to whatever page or post you’d like and save your work. When you go to edit that assigned page, you should see the fields (you may have to scroll down a bit to find them).

Step 2: Upload Video Files

Navigate over to edit the page or post where you assigned your new custom fields. From there, it’s a matter of uploading the correct files. Once you’ve uploaded the requisite files, save your page/post.

Step 3: Edit the Template

Now comes the fun part – adding some PHP magic to your theme’s template. If you’re not familiar with the WordPress template hierarchy, now may be a good time to study up on it.

Find the correct template file and location where you’d like to place the video. Then, copy and paste the following code snippet and customize to match your needs:

<?php
// Get the Video Fields
$video_mp4 =  get_field('mp4_video'); // MP4 Field Name
$video_webm  = get_field('webm_video'); // WEBM Field Name
$video_flv =  get_field('flv_video'); // FLV Field Name
$video_poster  = get_field('poster_image'); // Poster Image Field Name
                

// Build the  Shortcode
$attr =  array(
'mp4'      => $video_mp4,
'webm'     => $video_webm,
'flv'      => $video_flv,
'poster'   => $video_poster,
'preload'  => 'auto'
);

// Display the Shortcode
echo wp_video_shortcode(  $attr );
?>

The first section of code references the names of the custom fields we created in Step 1. We’re creating a PHP variable for each field (they will output the URL of their respective file), which we’ll need to use in the middle section of code.

Down in that middle section, we have an array of attributes for the wp_video_shortcode function. Notice that there is an attribute for each file type. We’re also choosing to preload the video, but that’s completely optional. Here you can also set width, height, loop and even (gasp) auto-play the video if you like.

The bottom section of code is outputting the result of our work into our template.

Once you have everything set up satisfactorily, you will want to save your template and upload it to your website (or just save if you’re using the built in WordPress theme editor). Then, check your page on the front end to make sure the video is properly displayed.

WordPress has a HTML5 video player built right into the CMS and the default player looks and functions quite well. But you can style various options if you want to give it a more personal touch. Inspect the output code with your browser’s developer tools and make note of the various CSS classes. For example, the container element has a class of .wp-video. You may also want to take a look at a tutorial for a more in-depth look at possibilities.

Custom Fields Simplify the Process

Using custom fields can bring a wealth of new functionality and design possibilities to WordPress. But a core element of their awesomeness is that they can make managing content easier. Regardless of who will be adding and editing content, custom fields can streamline the entire process. That benefits us all, but it’s especially nice for users who aren’t expert developers.

Adding some simple functionality like the HTML5 video fields above can greatly reduce the learning curve a new user faces. Instead of having to think about what they’re supposed to do, it’s now become a matter of uploading a few files.

In the end, that little bit of extra work up front can save everyone some time and headaches for the life of the website.

The post How to Add HTML5 Video to WordPress Using Custom Fields appeared first on Speckyboy Design Magazine.