Free WordPress themes like Twenty Twelve, Twenty Thirteen and Twenty Fourteen, are great options if you want to create a functional website without spending much for the your web design. They are coded with the latest standards and so they are unlikely to encounter problems going forward. Unfortunately, these themes do not give you much choice when it comes to making your website reflect your personal brand, tastes and preferences. Of course, you can extend the functionality of your website using plugins but adding a plugin to fire up every feature will cause conflicts and inefficiency down the line. Indeed, it is advisable to use as few plugins as possible.
Among the plugins that I have tried, Visual Composer and Advanced Custom Fields are the ones that I use frequently both on my websites as well as that of my clients. They are highly versatile and you can use them to display not only one type of data, but a diverse range of web elements. Whether it is to display a text, a button, an image, or a slider, you can trust that these plugins can do the job either singly or in combination.
In this post, I will show you how to use Advanced Custom Fields WordPress plugin to display a dynamic logo on your website. This tutorial is intended for beginners and so it explains the procedure in the simplest terms possible without much technicalities. Also, this tutorial makes use of Twenty Twelve child theme but it also applicable to any theme.
Active Theme: Twenty Twelve Child (Or any child theme)
This tutorial, makes of use of a Twenty Twelve child theme leaving the parent theme free from any code alteration that we may initiate to get this done. Of course, we can directly edit the parent but we run the risk of losing what we have integrated when we update the theme going forward. Thus, it is presumed that you have your child theme running in accordance with the best practices of WordPress customization.
Active Plugin: Advanced Custom Fields
Be sure that you have installed and activated Advanced Custom Fields before proceeding to the rest of the steps.
Required Page: Home
This tutorial requires that you have a page named “Home” because this is where the custom field will appear.
Tools: FTP Client, Text Editor
To follow this tutorial, it is presumed that you have access to the files in your directory through FTP client like Filezilla and that you have a text editor like Notepad++.
Creating the Logo Custom Fields
1. Creating a Field Group and filling the parameters.
On the left portion of your WordPress dashboard, you will see, “Custom Fields” once the plugin is up and running. Click this up and create a custom field group. You can name it with any name but be sure to make it easy to understand for other users.
I have named my field group with “Homepage Custom Data” and I supplied the information fields in this wise:
Field Label: Website Logo
Field Name: website_logo (automatically generated by the plugin)
Field Type: Image
Field Instructions: Upload your logo
Return Value: Image ID
Preview Size: Full
Conditional Logic: No
(Rules) Show this field group if: Page is equal to Home (home is the name of the page)
Position: High (After Title) //set this so the custom field would appear on top.
Style: Standard (WP Metabox) //set this if you want custom field to be draggable.
After you have set the parameters, click publish and proceed to the next steps.
2. Downloading header.php from the parent theme.
After you have configured the custom fields, you can now customize your website’s header. You can do so by first opening your parent’s theme folder in this case, /wp-content/themes/twentytwelve and downloading its header.php file.
3. Editing header.php
Once you have downloaded header.php, open it with a text editor and find <?php bloginfo( ‘name’ ); ?>
5. Save header.php and upload it to your child theme’s directory.
Once you have uploaded header.php to your child theme, you should be able to see it.
6. Go to the page “home” and upload the logo image.
7. Update your page and see the results.
8. Change the image as you please.
Advanced Custom Fields WordPress plugin makes it easy for us to add a logo, image, texts or any element without much coding as demonstrated in this tutorial. However, this functionality is theme specific. If you change the theme, the features powered by custom fields as the logo in this tutorial, will also be gone. This solution is a quick and safe fix that can be implemented in a breeze.
Sonny is a freelance web developer who specializes in creating WordPress websites for clients. Aside from his passion for coding, he also writes interesting topics about graphic and web design, photography, social media and anything creative. He has also appreciates humor, eco-adventures, and anything along that line.