Tagged: acf, custom fields
-
AuthorPosts
-
September 19, 2020 at 3:40 am #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?
September 21, 2020 at 1:12 am #1247200Hey 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:
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:
and the after with the subtitle:
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.phpfunction 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:
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');
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,
MikeOctober 1, 2020 at 12:52 am #1249751Thanks 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, 1 month ago by leviticus.
October 1, 2020 at 12:34 pm #1249861Hi,
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,
MikeOctober 3, 2020 at 4:44 am #1250229Thank 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, 1 month ago by leviticus.
October 3, 2020 at 12:38 pm #1250307Hi,
Please include an admin login in the Private Content area so we can take a closer look.Best regards,
MikeOctober 4, 2020 at 6:36 pm #1250452Thanks! Here you go:
October 5, 2020 at 1:29 pm #1250590Hi,
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.phpadd_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 -
AuthorPosts
- You must be logged in to reply to this topic.