• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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

  • 7 Ways To Code a PDF File Used in a Custom Field
  • Adding Custom Fields in a Page Template Using Genesis

Custom Fields

Reader Interactions

Comments

  1. Adrian Hoppel says

    July 7, 2018 at 6:52 am

    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?

    Log in to Reply
    • Brad Dalton says

      July 7, 2018 at 7:00 am

      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.

      Log in to Reply
      • Adrian Hoppel says

        July 7, 2018 at 7:09 am

        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.

        Log in to Reply
        • Brad Dalton says

          July 7, 2018 at 7:31 am

          Please use my code which includes the before-content div class

          Log in to Reply
          • Adrian Hoppel says

            July 7, 2018 at 7:34 am

            YES! Success. THANK YOU!!

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags