How to Show a Custom Field’s Value at the Top of Every Post or Page in Genesis

A user on Genesis forum wanted to know a way to have a video whose embed code has been entered in a meta box of a Post/Page to show above that Post/Page’s content.

1) Install Advanced Custom Fields plugin.

2) Set up a Custom Field that you wish to show in Post/Page edit screen.

2013-02-21 14-16-47

Ensure that Formatting of the field is set to “HTML”.

3) Add/edit a Post/Page and enter the embed code of video that you wish to show above the content of that Post/Page.

2013-02-21 14-18-47

4) Install Genesis Simple Hooks plugin.

5) Paste the following in “genesis_before_content_sidebar_wrap” Hook:

<?php if( is_single() || is_page() ) {
if(get_field('vimeo_video')) {
	echo '<div class="video-container my-vimeo-video">' . get_field('vimeo_video') . '</div>';
}
} ?>

Tick “Execute PHP on this hook?”

6) Check the Post/Page on the front-end and add any CSS that’s required to space out the video depending on active child theme.

Ex. in Modern Portfolio theme:

.my-vimeo-video {
	margin-bottom: 2em;
}

#inner {
	padding-top: 1rem;
}

to get

2013-02-21 14-27-45

To make the video stretch fully, we can use

.my-vimeo-video iframe {
	width: 100%;
}

2013-02-21 14-29-59

Resize the browser to see if it is behaving in a responsive manner or not. If it is not, use this CSS or FitVids jQuery script.

Comments

  1. Thank you. I was able to follow this but ran into a few problems getting it to work with PHP if/then statements. I spent the majority of the day working on it and finally came up with a way that works using a mixture of your settings above and my own finagling.

    I attempted to send you a donation via your PayPal button in the footer but it was rejected with “Currently PayPal accounts in India are only able to send payments. This recipient is not eligible to receive funds.” Email me with the email I provided in this comment to supply another method if you want the $25 donation. Thanks man, I appreciate it.

Leave a Reply