Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1246957

    I am trying to display a custom field of “Subtitle” on my posts, but I can’t get them to display. I’ve tried using the ACF plugin as well as the built in custom field in the block editor as detailed < https://themeisle.com/blog/custom-fields-in-wordpress/ >, but I can’t get the single post or the archive loop to display the custom field.

    I need to edit the loop-index.php file to add a subtitle after the title and before the categories, correct? If so, where in that file should I be adding the custom field call?

    #1247200

    Hey leviticus,
    Sorry for the late reply, I took a look at the article for the custom field, which also linked to this article which seemed more helpful.
    So to add a subtitle after the title and before the categories with a WordPress custom field, first add the custom field:
    2020-09-20_180029.jpg
    Then edit \wp-content\themes\enfold\includes\loop-index.php lines 321-335 should look like this:

    echo '<div class="av-heading-wrapper">';
    
    if( strpos( $blog_global_style, 'modern-blog' ) === false )
    {
        echo $cat_output . $title;
    }
    else 
    {
        
        echo $title . $cat_output;
    }
    
    
    echo '</div>';
    }

    change to this:

    echo '<div class="av-heading-wrapper">';
    $meta = get_post_meta( get_the_ID(), 'subtitle' );
            if( !empty($meta) ) {
            
        if( strpos( $blog_global_style, 'modern-blog' ) === false )
        {
            echo $cat_output . $title;
        }
        else 
        {
            
            echo $title . '<span class="subtitle">' . $meta[0] . '<span>' . $cat_output;
        }
    }
    
        echo '</div>';
    }

    this wraps your “subtitle” in a span with the class “subtitle”, should you want to style it.
    The category below the title has a negative “top” placement so you will also want to use this css:

    .html_modern-blog #top .post-entry .blog-categories {
        top: 0 !important;
    }
    

    Depending on your page layout you may need more css, but this worked for me on my localhost, here is the before:
    2020-09-20_181055.jpg
    and the after with the subtitle:
    2020-09-20_181222.jpg
    But, after going though these steps and finding the right place to edit the PHP file and getting it to work, I would prefer doing this with jQuery, here’s how.
    First add this code to the end of your functions.php file in Appearance > Editor:

    function my_jquery_var() {
        global $post;
        if ( $my_custom_field_name = get_post_meta( $post->ID, 'subtitle', 1 ) ) { 
            echo '<script type="text/javascript">var my_custom_field_name = "' . $my_custom_field_name . '";</script>' . "\n";
        }
    }
    add_action( 'wp_head', 'my_jquery_var' );

    Note that the custom field name is ‘subtitle’ in my example, you can rename this to your custom field name.
    So now every post and page checks for the ‘subtitle’ and if found it is added as a “var” that can be used by jQuery.
    To display it as a subtitle on posts you only need to add the script to your functions.php

    function custom_field_script(){
      ?>
      <script>
    (function($) {
      $(document).ready(function(){
         $('<span class="subtitle">' + my_custom_field_name + '<span>').insertBefore('.blog-categories.minor-meta');
      });
     })(jQuery);
     </script>
    <?php
    }
    add_action('wp_footer', 'custom_field_script');

    Note how the script allows us to place the subtitle exactly were we want without editing the PHP files:
    2020-09-20_190303.jpg
    You can easily change the placement for pages or archives like this:

     function custom_script_for_page(){
      ?>
      <script>
     (function($) {
      $(document).ready(function(){
         $('<span class="subtitle">' + my_custom_field_name + '<span>').insertAfter('.av-special-heading-tag');
      });
     })(jQuery);
     </script>
    <?php
    }
    add_action('wp_footer', 'custom_script_for_page');

    2020-09-20_190754.jpg
    These examples are a little simple and I would be more exact in the placement for a live site to ensure there are no conflicts, but I hope this gives you some ideas on how to proceed.

    Best regards,
    Mike

    #1249751

    Thanks for pointing me to the correct line in the file. I ended up modifying it like so and it seems to work alright:

    echo '<div class="av-heading-wrapper">';
    						
    if( strpos( $blog_global_style, 'modern-blog' ) === false )
    	{
    		echo $cat_output . $title;
    	}
    		else 
    	{
    		echo $title;
    
    		if ( $my_custom_subtitle = get_post_meta( $post->ID, 'subtitle', 1 ) ) { 
            echo '<h4 class="subtitle">' . $my_custom_subtitle . '</h4>' . "\n";}
    							
    		echo $cat_output;
    	}
    echo '</div>';
    }

    Which file controls the output of the Post Slider block? I’d like to add the subtitle there as well.

    • This reply was modified 4 years, 2 months ago by leviticus.
    #1249861

    Hi,
    The elements are in the \wp-content\themes\enfold\config-templatebuilder\avia-shortcodes\ directory, for the post slider you would be looking for the \postslider\postslider.php

    Best regards,
    Mike

    #1250229

    Thank you Mike. Do you know what line I should add that in? Tried putting it after “slide-entry-title entry-title ” as well as before “slide-entry-excerpt entry-content” but the slider did not change on the site.

    • This reply was modified 4 years, 2 months ago by leviticus.
    #1250307

    Hi,
    Please include an admin login in the Private Content area so we can take a closer look.

    Best regards,
    Mike

    #1250452

    Thanks! Here you go:

    #1250590

    Hi,
    Thank you.
    Please note, to override elements with custom elements in your child theme, please create a directory /shortcodes/ within your child theme and add your /postslider/ directory there.
    Then add this code to your child theme functions.php

    add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
    function avia_include_shortcode_template($paths)
    {
    	$template_url = get_stylesheet_directory();
        	array_unshift($paths, $template_url.'/shortcodes/');
    
    	return $paths;
    }

    Best regards,
    Mike

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.