WP SITES

Log in

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

—

by

Brad Dalton

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

Comments

5 responses to “15 Ways To Display Custom Fields Using Custom Functions – Code Examples”

  1. Adrian Hoppel Avatar
    Adrian Hoppel

    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?

    1. Brad Dalton Avatar
      Brad Dalton

      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.

      [code]
      .before-content {
      padding: 20px;
      background: #f1f1f1;
      }
      [/code]

      You might need to clear caching.

      1. Adrian Hoppel Avatar
        Adrian Hoppel

        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.

        1. Brad Dalton Avatar
          Brad Dalton

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

          1. Adrian Hoppel Avatar
            Adrian Hoppel

            YES! Success. THANK YOU!!

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.