WP SITES

2787

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

15 Ways To Display Custom Fields Using Custom Functions – Code Examples

There’s different code you can use to display the value of your custom field keys depending on different situations.

The code may vary depending on which theme you’re using and can also be different if you’re using a custom fields plugin like Advanced Custom Fields which is commonly referred to as ACF.

In this post i’ll provide 6 different code snippets where some work with:

  1. The ACF plugin
  2. The Genesis theme framework
  3. Any theme

Notes:

  • All code should be pasted at the end of your child themes functions.php file using a code editor like Notepad++
  • All code snippets include the loop_start hook which works with any theme as its a WordPress core hook. You can change this to any theme specific hook if needed.
  • All snippets also include the is_single() or is_singular(‘post’) conditional tag for testing purposes which only display your custom fields content (value) on single posts. These 2 conditional tags can also be changed.
  • All examples also use the custom_field_name (key) which you replace with the name of your custom field.

Register for full access

Related Tutorials

Reader Interactions

Comments

  1. Hi I used the ACF Plugin Custom Fields method and it worked great for displaying the ACF field.

    However, I am having trouble styling it. When I view the text with inspector there are no CSS properties found on the displayed ACF field. I thought I could use .before-content in my CSS to style, but that did not work.

    What am I doing wrong?

    • Hey Adrian

      This is the PHP code i used in functions.php

      And this is the CSS added to the end of the child themes style.css file.

      .before-content {
    padding: 20px;
    background: #f1f1f1;
}

      You might need to clear caching.

      • Hi Brad, thanks for the fast reply. I want to add this field to the top of every page above the page title. Here is the PHP Code I used:

        add_action( ‘loop_start’, ‘before_single_post_content’ );
        function before_single_post_content() {
        if ( is_single && the_field( ‘tagline’ ) ) :
        echo ”. the_field( ‘tagline’ ) .”;
        endif;
        }

        And then I added the CSS you have above to the end of my CSS, but no effect.

Leave a Reply