In order to add more information to your WordPress posts and pages, you will need to call out custom fields. It becomes handy when you want to store metadata of your posts to facilitate WordPress site’s customization.
In some situations, there’s more than just text you wish to add to the custom field, an image to illustrate the main point, for example. The problem here’s uploading an image to a custom field is not an easy task. You need to have a good basic knowledge of CSS, PHP, and XHTML because it requires a lot of coding. One minor mistake can mess up your whole theme and your site’s front end.
In this article, we will show you the alternative solution to achieve that, which is so much simpler and easy to follow. You’ll also pick up a useful trick to protect your images or other file types, and make your WordPress site secure.
- What is Custom Field?
- Adding Custom Fields Using Advanced Custom Fields
- Display Your Custom Fields in WordPress Theme
- How to Protect Image Uploaded to Custom Fields
- Level Up Your Website with Advanced Custom Fields and Prevent Dierct Access
What is Custom Field?
Custom fields are metaboxes used to store the metadata of posts, pages, or custom post types. The custom field refers to a form, where it has all the necessary fields for you to view, input, delete, or change values.
By using the custom field, updating important data, and adding adjustments to general posts will no longer be complicated tasks.
Several WordPress web developers and agencies make use of the custom fields when providing advanced details for their customers. For instance, you can use the custom field to classify and categorize your posts.
Imagine you own a real-estate website. There are posts where you introduce and show the most featured characteristics of the houses or lots. In the custom field, you will list out the number of bedrooms, bathrooms, and other plus points such as garage and beach view. When having the custom field showing those elements, you can later filter, display, build custom HTML, and more.
Adding Custom Fields Using Advanced Custom Fields
WordPress by default has a built-in option for users to create a custom field, but displaying that custom field on your website is a little bit complicated. You must adjust and add a few lines of code in the theme files, then enter your custom fields code inside the WordPress loop.
Still, WordPress custom field feature has some limitations. If you want to add more advanced fields to your website, consider Advanced Custom Fields (ACF) plugin. This plugin is the most famous alternative choice for creating complex custom fields.
After installing and activating the Advanced Custom Fields plugin, navigate to Custom Fields in your admin dashboard.
The Field Groups is a set of custom fields enabling you to add various panels of custom fields. Inside the Field Groups settings, click the Add New button.
Provide a name for your field group and click on the “Add Field” button to start adding the necessary fields to your post.
Once you create a name for the Field label, the Field name will be automatically filled with the same name. In the Field Type, choose the type for that field. It can be an image, text, link, checkbox, Google map, or even Wysiwyg Editor.
Continue scrolling down, you’ll see other settings options for that field. Make any changes depending on your demands. Also, you can add as many fields as you need. Hit Publish to save all your changes.
Displaying Your Custom Fields in WordPress Theme
Before creating any post to add the custom fields in, don’t forget to copy the field name to put it in the shortcode later.
In order to simplify the process of displaying those custom fields, Advanced Custom Fields provides a shortcode to attach to your post.
[acf field="field_name"]
Change the field_name by the field name that you copied before, then paste it into your desired post
However, this method only works with simple text-based values.
In case your field values are other than text, you still need to add the code inside your theme files. First, make sure that you add the code inside the WordPress loop. Your code should look like this:
<h2 class="field_name"><?php the_field('field_name'); ?></h2>
|
Wrapping the code in the <h2> heading with a CCS class will facilitate you to style and format the custom field later if you want to add custom CSS into your theme.
How to Protect Image Uploaded to Custom Fields
There’s no need to emphasize the importance of protecting your WordPress files. Once you upload new files on the Internet, they will be exposed to millions of users. You’ll never know how many of them intend to steal your files and abuse them for different purposes without your permission. It’d be better if every single file is protected right in your WordPress media library no matter where and when it is uploaded on your website.
WordPress leaves all the crucial tasks for plugins, and Prevent Direct Access (PDA) Gold is the best one that most users rely on when mentioning file protection.
While Prevent Direct Access Gold helps you protect unlimited file types uploaded on the WordPress site, its extension-PDA Advanced Custom Fields Integration supports users in protecting files uploaded through the ACF repeater field.
After downloading and installing PDA Gold and PDA ACF integration, go to Plugins in your admin dashboard to activate them.
Navigate to the PDA Gold Settings page and switch to the Forms & ACF tab. Enable the Advanced Custom Fields – Repeater Files & Image Fields option then hit Save Changes.
Now back to the post or page that you add the custom field on and click on Add File/ Add Image button. You can select the existing files or upload the new ones. Once you add your files to the repeater custom field, they will be automatically protected.
Other than this option, PDA ACF integration also provides extra help to protect files in custom fields. For detailed and step by step instructions, see our guide on how to auto-protect new file uploads inside the ACF settings
Level Up your Website with Advanced Custom Fields and Prevent Direct Access
If you know how to take advantage of custom fields, you will have more space to style and customize your posts and pages and make them consistent. With the Advanced Custom Field plugin, it would be much easier for you to add complicated custom fields to your posts effortlessly. It also provides a useful shortcode to attach in the post so that you can display them conveniently.
When file sharing and file piracy become the epicenter that every website owner is trying to find a solution, Prevent Direct Access Gold comes as the best option to erase those worries with ease. In addition, its PDA Advanced Custom Fields integration can assist in shielding every single file that you upload through the repeater fields.
If you have any questions regarding uploading images to custom fields and how to protect them properly, leave your thoughts in the comment section below.
