Archive for Genesis

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.