Posts and pages in WordPress can have custom fields. Let’s take a look at how we can use custom fields to choose which colors are used for displaying the content. We’ll first do it with standard custom fields and then with Advanced custom fields plugin.
(if you’re not familiar with Custom Fields check the WordPress Documentation.)
One question, before we start: when do we use Customizer theme options and when Custom fields?
Customizer options are global – tied to the theme – while custom fields are set for individual posts. So, we use Customizer options for global theme settings like logo image, color for headings and text for the footer. And we use Custom fields for settings related to individual posts, for example the icon for each of the Services items, link for a portfolio item…
For this tutorial, you will need
- Pinegrow with WordPress Theme Builder
- A local WordPress site (see our useful WordPress recommendations)
- A Pinegrow WordPress theme installed and activated (We use a theme made from Blocks in this tutorial. In that case you can also import the sample content.)
- Advanced Custom Fields plugin
Although in this tutorial we use Blocks for WordPress to quickly build a theme, everything you’ll learn here applies to any WordPress theme created with Pinegrow.
Introduction
First, in Pinegrow, let’s add the Content block 1-3 to your theme. This particular block will serve in our examples but you can use the following techniques in many other situations.
If you examine the WordPress settings (the blue text), you’ll see that the WordPress loop repeats the first column.
That means that all loop items will use the HTML code of the first column – including the color class on the icon. As a result, in your WordPress themes, all icon backgrounds will have the same color unlike in the source HTML template where each column has a different icon background color.
If you want to be able to easily customize the background color for each icon in your WordPress theme, there is more than one way. For this tutorial, we will focus on two solutions, both using WordPress Custom Fields but with a different approach.
Standard Custom Fields
Our first solution is immediately available in WordPress and consists of the use of the standard custom fields which are available in the posts interface.
This custom field will let us specify a color value (for example, #447788) for the icon background.
1. In Pinegrow WP, select the first icon (DIV).
2. From the WP panel, add Display meta value on the icon (DIV) and set:
- key: circle_bkg_color (It is the name of our Custom Field)
- Replace: Set style property
- Style property: background-color
This action will take the value of the circle_bkg_color custom field and use it for the background-color property of the element’s style attribute:
3. If you’re using Blocks theme for this tutorial, we have to deal with a slight CSS conflict:
In our HTML template, the background-color of the circle is defined in a CSS class with the name .bg-crete. If you check the content of the class, you will notice that the background-color property value is followed by the !important declaration.
This particular declaration provides a way to give a CSS value more weight than it naturally has. In our situation it forces the background-color to remain the one from the original blocks CSS.
So because we do not want to alter the blocks-specific CSS, we add Remove classes action (located in Misc actions), with bg-crete in the classes setting, to get rid of it during the Theme export:
Now check the generated PHP code – bg-crete class is removed from the element in the exported theme:
And that’s it for Pinegrow ! You can now save and export your theme and go to the WordPress administration interface for the next steps.
It is now time to activate your theme. From the WordPress administration, go to Appearance menu, locate your Theme and activate it.
From the theme Customizer (Appearance>Customize), select Content 1-3 section and set Services as the Content Source for your section.
While you are in the customizer, you can see that all the circles backgrounds currently have the same green color. Our goal is to customize each of them to reflect the colors from our HTML template.
From the Blocks content menu, select the post Web Development (its a child of Services).
We locate Add New Custom Field section
Sometimes, depending on your WordPress settings, custom fields are not visible by default on the posts interface. To activate the visibility, open the Screen Options menu located on top of the post page and check Custom Fields.
Let’s add and setup a new custom field:
- Name: circle_bkg_color (this is the name whe have chosen in Pinegrow settings)
- Value:#723147 (this is the same color as in the HTML template)
As you can see, there is one custom field already there. It comes from our imported content from the sample content and it serve to configure the icon with a Font awesome element .
When its done click the Add Custom Field button and Update your post (same as save your modifications).
Repeat the same operation for the posts Creative direction (#F1C40F) and Digital design (#7D8A2E) and preview your theme.
Your Icons now have different background colors just like in the original HTML template.
ACF Custom Fields
Our second solution uses Advanced Custom Fields free plugin. (lets call it ACF)
ACF offers you a way to display and setup Custom Fields in your pages with a nicer interface (in our situation it will be a color picker) and allows you to target specific posts based on criteria like categories or tags.
In Pinegrow WP, select the first icon (DIV).
Do steps 1 to 3 as described above when we used a Standard custom field (or just continue if you already did those steps)
In a few seconds, we will create ACF field for setting the icon background color. But we also need a way to tell ACF for which content blocks this field should be shown. To do that we’ll add a new taxonomy to our theme and use it to instruct ACF to show appropriate fields for various blocks of content.
The following being a global setting for the Theme, its location can be anywhere in your document, it could be on the Body element for example. For this tutorial, we have decided to assign it to the related section (Content 1-3 ).
Select the top level of Content 1-3 section in the tree.
In the WP panel, from Site section, add Register taxonomy on the section and proceed to the setup of the component:
- Taxonomy: blocks_features
- Object types: blocks_content
- Name: Blocks Features
- Singular name: Blocks Feature
- Public: checked
- Hierarchical: checked
And that’s it for Pinegrow ! You can save and export your theme.
In WordPress administration, from Blocks content menu, select the post Web Development (its is a child of Services).
Locate Blocks Features metabox – this is the taxonomy we have just added in Pinegrow settings – and add a new category that you name Has icon.
Repeat the operation for Creative direction and Digital design posts.
From the Pugins menu, select Add new, enter Advanced Custom Fields in the Search Plugins form, install the plugin and activate it.
From the Custom Fields menu, select Add New, enter Services as the name.
Click on Services, and add the first field by selecting Add Field.
- Field Label: Icon background color
- Field Name: circle_bkg_color
- Field Type: Color Picker
- Field Instructions: Select the color for the icon background color
- Required: no
- Default Value: no value
- Conditional Logic: no
- Click Close field
Another approach could be to define our color classes in CSS and use a dropdown menu with the classes in a form made with ACF. This is a topic we will cover later, in an advanced tutorial.
Now, you have to set the rules to determine which edit screens will use these advanced custom fields.
Set Post Type > is equal to > blocks_content AND Post Taxonomy > is equal to > Blocks content: blocks_features > Has icon.
Our color picker will be available only on Posts in Blocks Content section and with the category Has icon.
And finally, you have to decide of the metabox position (use Normal) and style (use Standard).
From Blocks content menu, select the post Web Development (its a child of Services).
A new metabox with the name Services – this is the name you have chosen when creating your fields group – is now visible and you can select the background color for your service icon from a nice color picker!
You can now repeat the last step for Digital Design and Creative Direction posts. You can even decide to pick some very flashy colors if your want! 🙂
Conclusion
As you can see, its very easy to add customization settings in posts and pages through the use of Meta Values and Custom fields.
When using ACF, all values are saved as native post_meta (when saved to a post) and although you can use the native get_post_meta() function from Pinegrow with Display meta value, it is better practice to use the relevant ACF function such as get_field() because ACF will format the value depending on the field type and make development quicker and easier! This is an advanced topic we will cover very soon in another tutorial.
We hope to see your great customizations very soon!
Last updated on December 1, 2015 at 1:40 pm