Advanced Custom Fields (Official Site), this plugin is way too awesome not to mention. I’ve run into this WordPress Plugin (Plugin Page) over a dozen times in the course of my development work – I started realizing how powerful, flexible and stable this Plugin really is.
If you’re looking to add “Advanced”, “Custom”, “Fields” to your pages as the name suggests you’ll find a slick easy to use interface. Simply add the fields you want for your pages.
WordPress (backend) – Advanced Custom Fields Options
I myself thought I was all done – In this second step you’ll have to get your hands dirty with some PHP. Yeah this might be a little daunting if you aren’t tech savvy but you’ll be thankful you did, this all sounds cliche but for real practice makes perfect.
What you want to do is look for the PHP template file – something like page.php or even something custom like page_shop.php. This page is where you want your custom fields to appear.
Place the code in the desired section of the file and you have your custom field appearing on your page like you envisioned. I get a sigh of relief every time.
<?php
$custom_link_field = get_post_meta($post->ID, 'custom_link', true);
$custom_link_name_field = get_post_meta($post->ID, 'custom_link_name', true);
if (!empty($custom_link_field) && !empty($custom_link_name_field)) {
?>
<a id="custom_link_button" href="<?php echo get_post_meta( $post->ID, 'custom_link', true ); ?>"><?php echo get_post_meta( $post->ID, 'custom_link_name', true ); ?></a>
<?php } ?>
The important thing to note here which isn’t specific to Advanced Custom Fields but more of a “best practices to PHP” is first making sure the fields exist. Using the empty function below, we first check to see that the fields actually exist (that they were created in step 1).
if (!empty($custom_link_field) && !empty($custom_link_name_field)) {
// the code
}
What this is saying in plain simple terms is – “Hey let’s first check to see if the custom_link_field AND custom_link_name_field actually isn’t empty, if so then it’s safe to proceed with the following code block. Pretty awesome stuff.