Custom fields output in entry meta for WordPress theme

First of all I would like to thank the devs very much for making this beautiful theme, and for providing it for free :slight_smile:

So, as the title mentions, I would have a few questions about the slider and about the content I post, and I’ll try to be as brief as possible:

  1. Is it possible to resize the featured image automatically to 1018x460, so that I wouldn’t have to upload two versions of the same photo manually? (the larger resolution image for the post, and the cropped/resized one for the slider/featured image)
  2. Is it possible to chose random posts for the slider, instead of the sticked ones? Perhaps to change the showcased posts in the slider ever week or month or so.
  3. Is it possible to change the meta field under each post (the one where it shows the post date, the author and the category) to show other meta info that I can input from the post publisher (WP Admin -> Posts -> Add New / Edit Post) ?

I apologise in advance if any of the above were asked previously, I’ve searched on these boards but found nothing relevant. Also sorry of the last two questions are just a bunch of quack talk, I’m not that experienced with CSS/PHP, so I don’t know exactly what WordPress is capable of with a bit of tinkering :stuck_out_tongue:

  1. Featured images are defined like this via functions.php file:

add_image_size( 'featured', 670, 300, true );

Changing these values to your above mentioned ones will make your images bigger. However, these changes won’t take effect for images that are already on your website because WordPress doesn’t regenerate them automatically. For that you will need a plugin like this. But for all images that you will update after changes new image size will be used.

  1. Unfortunately, it is not possible with this theme. The easiest workaround here would be to replace default theme slider with some plugin that offers this kind of functionality.

  2. This is no functionality built in this theme that outputs Custom Fields but it is rather easy to implement. For more information about Custom Fields you can read on WordPress documentation.

Let me know if there is anything else.

Thank you for your reply :slight_smile:

1. Featured images are defined like this via functions.php file:

add_image_size( 'featured', 670, 300, true );

Does this also crop the images so they stay with the correct AR, or do they just resize the image to the specified size? I ask because I’ll likely attach images with varying aspect ratios, and I don’t want the images to look squashed or stretched.

2. Unfortunately, it is not possible with this theme. The easiest workaround here would be to replace default theme slider with some plugin that offers this kind of functionality.

I see. Are there any plugins you can suggest that would integrate neatly as this theme’s slider does? :slight_smile:

3. This is no functionality built in this theme that outputs Custom Fields but it is rather easy to implement. For more information about Custom Fields you can read on WordPress documentation.

Thanks for the suggestion but it’s not exactly what I had in mind. I probably did not express myself properly (or it does not work in my case, as I’ve tried now), so let me fix that:

What I meant is specifically that area under a post where typically you see the username who wrote the post, what category it is, on what date it was published, etc.
Basically what I want to do is to remove some things like the username and introduce other stuff in there that describes the post. And I mentioned that it would be nice if I could change the values of those extra fields when making the post.

  1. Images will be cropped just like before and not distorted. Aspect ratio will remain the same.

  2. I have seen several users using Meta Slider for this theme. but any other slider should work just as well.

  3. I did get your point and that’s the only solution to add some custom text there.
    If you login with different user and publish post then different content will be displayed. Change the post date and changed will reflect there. Add different category for this post and again different category will be displayed. No “manual” editing for meta is possible but it just displays post settings that you have added.

If you want to hide something like Author of the post from that bar you can add this code to Appearance >> Theme Options >> Other >> Custom CSS:

.entry-meta .author {
  display: none;
}
  1. Good :slight_smile:
  2. Will try that out, thanks.
  3. I didn’t fully understand what you mean here, you meant that I can’t add new “meta items” (like for example a price to be displayed in an e-shop site) to that meta bar, and can only remove some of the “meta items”?
  1. For eStore you are not using blog but WooCommerce plugin with its own templates like you can see here. Blog is for simple posts with tags and categories and not for selling products, so you can’t add price there without implementing Custom Fields like described here.

Let me know if this helps.

I have a concern and an idea to improve the use of the subject and I wonder if it is possible to make some modifications.
You can use the featured image for the slider to 1920x550 px and place an additional image in the article that is the picture of the publication 730x410px? if possible this, a major problem would be solved.
In case if possible … as I could program it in the CCS?

@Aigars: I don’t intend to run a e-commerce site, it was just an example :stuck_out_tongue:
What I intend do to is to remove the posting date, the author and comments indicator (although since I want to remove comments globally on the site, I’ll likely use a plugin for that, and that should solve the comments indicator too) and afterwards add size and type of painting (so in other words I’m trying to make a gallery site where I present my art).

Also I’ve tried what you linked in the article, but it does not do anything. I typed in Size under “Name” and the size of the painting for the specific post under “Value”, but nothing changed in the post.

@mtgonv: Not sure what you mean but I think that would work well for what I’m trying to achieve, but it wouldn’t be too difficult to do that by myself without extra coding :slight_smile:
Thanks for the offer though!

@mtgonv
Travelify theme doesn’t have that big slider, so changing image size to your mentioned values would only reflect in slower website performance and that’s it. I guess you have confused this thread with one for Dazzling or Sparkling theme that features full-width slider.

@andoru Adding custom values inside WordPress dashboard is one thing but you also need to print those values in website source and style those values properly to fit overall theme design. Now that you have created those custom fields you should proceed with Displaying. There is a whole section on that tutorial that I already mentioned above. Here is a direct link to that section.

Meta information related code for Travelify theme can be found on file called content-extensions.php that you can find in travelify folder >> library >> structure.

I see, but that means I can only put those infos in the post itself rather than in the “meta bar”. In that case I could add the values manually in each post, wrap them around divs, and style them in the theme’s main css (assuming that’s possible)

You can add these values in post content manually as well but Custom Fields will help to output this info in “meta bar” when used correctly.

Okay, I seem to have missed the last paragraph in the previous reply, my bad!
Will try it out and see if I succeed with it :slight_smile:

Got to try it out today, but it doesn’t work.
I made a child theme of Travelify, and I followed what you said here and copied the whole function (mind you, I’m not at all knowledgeable in php, so I might have done it wrong)
Here’s what content-extensions.php has in the child theme :

<div class="entry-meta-bar clearfix">
    <div class="entry-meta">
	    <span class="author"><a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>"><?php the_author(); ?></a></span>
	    <span class="date"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( get_the_time() ); ?>"><?php the_time( get_option( 'date_format' ) ); ?></a></span>
	    <?php if( has_category() ) { ?>
	    <span class="category"><?php the_category(', '); ?></span>
	       <?php } ?>
	    	 <?php if ( comments_open() ) { ?>
	             <span class="comments"><?php comments_popup_link( __( 'No Comments', 'travelify' ), __( '1 Comment', 'travelify' ), __( '% Comments', 'travelify' ), '', __( 'Comments Off', 'travelify' ) ); ?></span>
	             	<?php } ?>
	    <span class="size"><a href="<?php get_post_meta( get_the_ID(), $post_id, $single);?>"></a></span>
    </div><!-- .entry-meta -->
    <?php
    echo '<a class="readmore" href="' . get_permalink() . '" title="'.the_title( '', '', false ).'">'.__( 'Read more', 'travelify' ).'</a>';
	?>
</div>

Also that article you’ve linked isn’t clear in the case when you have multiple custom fields. How can you differentiate between them? For example, I want the painting size to be listed, and whether or not the paiting is in b&w or colour. How can I differentiate the two different custom fields between them? What I’m guessing the solution is what’s written on the “Implementation Details” section, but I can’t test that right now since it doesn’t work, so I’m asking you just in case :stuck_out_tongue:

Also, I suppose I could remove the author, date and comments classes, and remove the entries to hide those from css.

Got to try it out today, but it doesn’t work.
I made a child theme of Travelify, and I followed what you said here and copied the whole function (mind you, I’m not at all knowledgeable in php, so I might have done it wrong)
Here’s what content-extensions.php has in the child theme :

<div class="entry-meta-bar clearfix">
    <div class="entry-meta">
	    <span class="author"><a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>"><?php the_author(); ?></a></span>
	    <span class="date"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( get_the_time() ); ?>"><?php the_time( get_option( 'date_format' ) ); ?></a></span>
	    <?php if( has_category() ) { ?>
	    <span class="category"><?php the_category(', '); ?></span>
	       <?php } ?>
	    	 <?php if ( comments_open() ) { ?>
	             <span class="comments"><?php comments_popup_link( __( 'No Comments', 'travelify' ), __( '1 Comment', 'travelify' ), __( '% Comments', 'travelify' ), '', __( 'Comments Off', 'travelify' ) ); ?></span>
	             	<?php } ?>
	    <span class="size"><a href="<?php get_post_meta( get_the_ID(), $post_id, $single);?>"></a></span>
    </div><!-- .entry-meta -->
    <?php
    echo '<a class="readmore" href="' . get_permalink() . '" title="'.the_title( '', '', false ).'">'.__( 'Read more', 'travelify' ).'</a>';
	?>
</div>

Also that article you’ve linked isn’t clear in the case when you have multiple custom fields. How can you differentiate between them? For example, I want the painting size to be listed, and whether or not the paiting is in b&w or colour. How can I differentiate the two different custom fields between them? What I’m guessing the solution is what’s written on the “Implementation Details” section, but I can’t test that right now since it doesn’t work, so I’m asking you just in case :stuck_out_tongue:

Also, tried to remove the author, date and comments classes, and remove the entries to hide those items from the “meta bar”, from css, but it shown them again, so I’m guessing I did not do something right with content-extensions.php .

Tried to write a reply here a few times some days ago, but nothing seems to have happened, didn’t get any error messages, so I’ll assume it got stuck in some moderation queue or such. I’ll try to re-write my reply, in case it blocked my message for containing code or links:

Got the chance try it out, but it doesn’t work.
I made a child theme of Travelify, and I followed what you said in the “Child Theme” thread in this subforum and copied the whole function (mind you, I’m not at all knowledgeable in php, so I might have done it wrong)
Here’s what content-extensions.php has in the child theme : pastebin dot com/pGTRMFSF

Also that article you’ve linked isn’t clear in the case when you have multiple custom fields. How can you differentiate between them? For example, I want the painting size to be listed, and whether or not the paiting is in b&w or colour. How can I differentiate the two different custom fields between them? What I’m guessing the solution is what’s written on the “Implementation Details” section, but I can’t test that right now since it doesn’t work, so I’m asking you just in case :stuck_out_tongue:

Also, tried to remove the author, date and comments classes, and remove the entries to hide those items from the “meta bar”, from css, but it shown them again, so I’m guessing I did not do something right with content-extensions.php.

bump

@andoru

This is not the entire function.

Here is one example for function. That entire highlighted block is a function. A single function that does a lot of things but it is a same function.

That’s how much you need to copy and move from content-extensions.php to Child Theme functions.php file and not any other file unless you call for it separately from Child Theme functions.php. Moving content-extensions.php from Parent theme to Child Theme won’t do a thing and you need to copy specific functions.

You’re right, I did not read your instructions carefully, sorry! :slight_smile:

I now managed to remove the items in the “meta bar” that I did not need without any extra CSS code, and added the line for the post meta:
<span class=“size”><a href="<?php get_post_meta( get_the_ID(), $post_id, $single);?>"></a></span>

Unfortunately it still does not show up… I’ve also tried to style it, but it did not change anything:

.size .size:before {
	font-family: 'Genericons';
	font-size: 18px;
	vertical-align: bottom;
	padding-right: 3px;
	content: '\f474'
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	*overflow: auto;
	*zoom: 1;
	*display: inline;
}

Alternatively I’ve used the example in that article you linked:
<span class=“price”><a href="<?php get_post_meta($post_id, $key, $single);?>"></a></span>
but again, doesn’t change anything.

It’s clear that I’m doing something wrong, but I don’t know what, that article isn’t exactly explicit and I lack any knowledge in php…

Code you are using is completely random and is used as an example on WordPress.org. You need to modify it based on your specific needs. Here is another example to output custom_price Custom Field value.

<?php $key_1_value = get_post_meta( get_the_ID(), 'custom_price', true );
	// check if the custom field has a value
	if( ! empty( $key_1_value ) ) {
	  echo '<span class="price">';
	  echo $key_1_value;
	  echo '</span>';
	}
?>

Also your CSS code won’t do anything because there is no such icon with ID: f474. And on your given example there is no such CSS selector .size .size:before but you have .size:before or .price:before in the second example.

Please read documentation instead of just copying random code examples without understanding what they do.

You need to modify it based on your specific needs.

Forgive me if I sound entitled, but how does one modify php code to fit one’s needs, if one doesn’t know at all any php? That’s why I thought you might be able to help in guiding me with what I need to change in the code. If not that’s fine, I’ll take my question elsewhere, try again or give up and try an alternative solution.

The documentation you’re talking about (the one you linked) is vague in the sense that it doesn’t explain how these parameters work, or give some examples that are relevant to the custom fields they used at the beginning (currently reading, mood…).

Here is another example

I’m assuming you took the example from here: codex.wordpress dot org/Function_Reference/get_post_meta#show_the_first_value_of_the_specified_key_inside_a_loop and echoed the custom metadata name.

In that example how do I define which field I’m after? Here’s what fields I’m going to use:

“size” should be defined as $key_1_value and “type” as $key_3_value or should it be $key_size_value and $key_type_value? Or are those just like classes and spans in html?

Also your CSS code won’t do anything because there is no such icon with ID: f474

I took that ID from here: http://genericons.com, it’s the fullscreen icon. I chose it as it partly fits the details that would sit next to the icon.

And on your given example there is no such CSS selector [...]

It was in my case, I had previously made a mock custom field that had “price” as name to test things out, after which I decided to use proper values to what I was trying to achieve. I made a mistake and posted the old version of the php code. Unimportant details, just felt like clarifying :stuck_out_tongue: