Categories
Genesis Tutorials

Different Video For Desktop & Mobile

The code in this download folder enables you to change the front page 1 background video on mobile screens. It also includes code to add 2 video upload fields to your customizer. 1 for desktops and the other for mobiles as seen in the following screenshot and demo video.

In this example, the mobile video displays when the screen width is 800px.

Demo Video

Shows you how to use the customizer to add videos for display behind the front page 1 widget area on mobile and desktop screens using Infinity Pro.

Tested using the Infinity Pro child theme by StudioPress replacing the front page 1 widget background image with a MP4 video.

Installation Steps

There’s 3 steps :

  1. # Upload the front-page.php template to your Infinity Pro theme folder replacing your default front page file.
  2.  

  3. # Copy & paste the PHP code from the functions.php file to the end of your Infinity Pro theme functions file.
  4.  

  5. # Copy & paste the CSS from the style.css file to the end of your Infinity pro themes style sheet and clear caching.
  6.  

Once you have installed the code, you can go to Customize > Front Page Video and add your MP4 videos.

Download Folder

Categories
Genesis Tutorials

Add Image To Nav Menu Using Customizer

The code in this download folder enables you to add an image via your customizer to your nav menu. In this case, the primary menu however you can change the name of the location in the code to secondary or any other menu location.

Demo Video

Shows the image from the customizer added as the first primary menu item in the site header on desktops and before the menu items in the mobile responsive drop down menu.

Tested using the Genesis Sample child theme by StudioPress however will work in any WordPress theme however the CSS may need tweaking.

Installation Steps

There’s 2 steps.

  1. # Copy & paste the PHP code ( excluding the opening PHP tag ) from the functions.php file to the end of your child themes functions file.
  2.  

  3. # Copy & paste the CSS from the style.css file to the end of your style sheet and clear caching and minification.
  4.  

Once you’ve installed the code, you can then upload an image named logo.png to your child themes images folder which displays by default unless you change the image using the customize > Nav Menu Logo setting.

Download Folder

Hide Image In Responsive Menu

Add this CSS to your style sheet if you want to remove the image when the responsive mobile menu is active.

@media only screen and (max-width: 960px) {

.genesis-nav-menu .menu-logo {
display: none;
}

}

Related Tutorials

Categories
Genesis Tutorials

How To Replace Front Page 1 Image With a Video in The Atmosphere Pro Theme

The code in this download folder replaces the front page 1 background image with a self hosted MP4 video, if added, via the customizer.

Click to Enlarge Images

Shows the default background image on the left and the video background on the right once added via Customize > Front Page video.

Demo Video

Shows the default front page 1 background image replaced by a video added via the customizer, no plugins needed.

Tested using the Atmosphere Pro child theme by StudioPress using a self hosted MP4 video. Does not work with YouTube or any other externally hosted video.

Installation Steps

There’s 3 steps :

  1. # Upload the front-page.php file to your Atmosphere Pro theme folder replacing the default front page template.
  2.  

  3. # Copy & paste the PHP code from the functions.php file ( without the opening PHP tag ) to the end of your Infinity Pro themes functions file.
  4.  

  5. # Copy and paste the CSS code from the style.css file to the end of your style sheet and clear caching.
  6.  

Download Folder

Categories
Genesis Tutorials

Templates To Add Unique Hero Image After Header With Overlaying Content In Parallax Pro

The templates in this download folder add a unique hero image after the header on single posts and pages.

  • The title-overlay.php template named Entry Title Overlay enables you to overlay the entry title on a unique image on any single post or page.
  • The widget-overlay.php template named Widget Overlay enables you to overlay the content from a text or HTML widget added to the Hero widget.

Custom Fields

To add unique hero images to each page/post using the template, create a new custom field named hero_image and paste the URL to the image in the value field as seen in the demo video.

If no image URL is added, the default image added to customize > Hero Image will be displayed.

To overlay unique text on your image, create a custom field named hero_text and add your text/HTML to the value field as seen in the demo video.

Sample HTML

Demo Video

Shows you how to select the template for use on single pages ad posts as well as add a default hero image via customize > Hero Image and change the image on the single Edit screen using a custom field named hero_image and hero_text.

Tested using the Parallax Pro child theme by StudioPress.

Installation Steps

There’s only 2 steps

  1. # Upload the folder named parallax to your Parallax Pro theme folder like this :
  2.  

  3. # Copy & paste the PHP code from the functions.php file to the end of your Parallax Pro themes functions file
  4.  

You can then select which template you want to use on any single post/page edit screen.

Download Folder

Categories
Genesis Tutorials

Infinity Pro Front Page 1 Autoplay Video Loop Background

This tutorial extends this older tutorial which enables you to add a MP4 video, via the Customize > Front Page Video setting and display it behind the front page 1 widget on Infinity Pro.

Tested using Mac on Chrome, Firefox & Safari, this video mutes the sounds and autoplays in a continuous loop on page load.

Demo Video

Shows the MP4 video added via the customizer replacing the front page 1 widget background image.

Tested using the Infinity pro child theme for Genesis by StudioPress.

Installation Steps

There’s 3 steps :

  1. # Upload the front-page.php file replacing the default front page template.
  2.  

  3. # Copy & paste the PHP code from the functions.php file ( without the opening PHP tag ) to the end of your Infinity Pro themes functions file.
  4.  

  5. # Copy and paste the CSS code from the style.css file to the end of your style sheet and clear caching.
  6.  

Download Folder

Related Tutorials

Categories
Genesis Tutorials

Add Image Before Entry Titles On All Archive Page Types

This code adds a image before all archive page type entry titles like this :

You can add your image via Customize > Before Title Image and also add a default image named default.png in your child themes image folder.

Demo Video

Shows the image added via the customizer displaying before the entry title on all archive page types including category, tag and author archives.

Tested using the Infinity Pro child theme by StudioPress however will work in any Genesis child theme.

Installation Steps

There’s 3 steps :

  1. # Copy & paste the PHP code ( without the opening PHP tag ) from the functions.php file to the end of your child themes functions file.
  2.  

  3. # Upload your fallback image named default.png to your child themes images folder.
  4.  

  5. # Copy and paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.
  6.  

Download Folder

Note : If you’re already using the code to add the image before singular entry titles, only add the 2nd code snippet from the functions.php file.

Categories
Genesis Tutorials

Add Image Before Singular Entry Titles

This code adds a image before all single post and page entry titles like this :

You can add your image via Customize > Before Title Image and also add a default image named default.png in your child themes image folder.

Demo Video

Shows the image added via the customizer displaying before the entry title on single posts and pages.

Tested using the Infinity Pro child theme by StudioPress however will work in any Genesis child theme.

Installation Steps

There’s 3 steps :

  1. # Copy & paste the PHP code ( without the opening PHP tag ) from the functions.php file to the end of your child themes functions file.
  2.  

  3. # Upload your fallback image named default.png to your child themes images folder.
  4.  

  5. # Copy and paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.
  6.  

Download Folder

Related Tutorials

Categories
Genesis Tutorials

How To Replace Front Page 1 Image With Video In Altitude Pro 1.4 & 1.5

The code in this download folder enables you to add a MP4 video behind the front page 1 widget area in the Altitude Pro child theme for Genesis. No plugins required.

The code adds a video upload setting to the customizer ( as seen in the following demo video ) so you can upload or add a video to the front page one widget area in replace of the static image background. If none added, the default background image will be shown.

Demo Video

The demo shows a video added via the customizer replacing the default static background image behind the front page 1 widget area. Shows a transparent site header background changing to a dark color on scroll and when the mobile menu kicks in.

Tested using versions 1.4 and 1.5 of the Altitude Pro child theme for Genesis by StudioPress using a MP4 video file. Not tested using other video file types.

Installation Steps

  1. # Upload the file named front-page.php to your Altitude Pro child theme folder replacing the default front page template.
  2.  

  3. # Copy & paste the PHP code ( without the opening PHP tag ) to the end of your Altitude Pro themes functions file.
  4.  

  5. # Copy & paste the CSS from the style.css file to the end of your AP themes style sheet and clear caching.
  6.  

Note : Assumes the use of the following HTML in a text widget in the front page 1 widget area. Also assumes the use of the header menu location. CSS for media queries may need modification when using HTML other than the default.

Download Folder

# Change Video To Image On Smaller Screens

If you’re using a lot of custom HTML/Text in a widget displayed over your video on desktops, it’s not going to fit in on mobiles because the video height scales down very small, unlike the background image.

In this case, you can use the following front-page.php file template in replace of the one included in the above download folder and add some additional CSS to the end of your Altitude Pro themes style sheet to swap out the video to a image on mobile sized screens.

Download Folder 2

# Hide Some Widget Text On Mobiles Using CSS

Another option is to use CSS with media queries to hider some of your widget content displaying over your video on smaller screens without swapping out your video with a image :

Example :

@media only screen and (max-width: 600px) {

.front-page-1 .widget p {
 display: none;
}

}

This CSS will hide any text/HTML you have added to the front page 1 widget area which is wrapped in p tags.

# Mobile Testing

The solution in this download folder has been tested on a live domain using my own personal Samsung Galaxy mobile phone as seen in the above video. It’s also been tested using Chrome Inspector as seen in this demo video

# Auto Playing Videos On iPhone’s

Videos may not auto-play on iPhones because of your phone settings which disable videos auto playing in order to block annoying video advertisements with loud music. You can re-enable auto playing of videos using your iPhone settings.

Categories
Genesis Tutorials

Different Background Images At Any Screen Width Using jQuery With Backstretch

There’s different methods you can use to change the background image at any screen width. Either CSS or jQuery will work.

In this case, we’ll use jQuery with backstretch and display one image named default.jpg added via the customizer, at screen widths above 960px width and another named 960.jpg which we’ll use at screen widths of 960px width and smaller and upload to our child themes images folder.

You can use this code to display any number of images at any screen widths.

This enables you to use a custom size image if your default image gets cutoff or doesn’t display at the best quality at any screen width.

The images displays full width of screen behind all page elements including header, content and footer.

Demo Video

Shows the full screen background image change at different screen widths.

Tested using the Genesis Sample child theme by StudioPress however should work without modification in any Genesis child theme.

Installation Steps

This tutorial extends a previous tutorial so you can use the code from this download folder with these installation steps.

Download Folder

Change Text Color

If your other background image is darker or lighter, you can use CSS with media queries to change the text color and other elements if needed. Example :

@media only screen and (max-width: 960px) {

body.full-screen-background {
        color: #111;
}

}

Related Tutorials

Categories
Genesis Tutorials

Responsive Full Screen Background Image For Genesis

You can select this template to load on single pages or posts so it displays a unique background image full screen behind all page elements including the header, content area, sidebar and footer on all screen sizes.

If no image added, a default image added to your child themes images folder named default.jpg which can be changed using the Customize > Full Screen Image setting.

The template includes code which enables you to :

  • The a custom field named dark to display white text on a dark background image
  • The a custom field named light to display dark text on a light background image
  • Add a link for your own image to display a unique image on each page or post

Demo Video

Shows a full screen background image displaying behind all page elements in Genesis when the Full Screen Background template is selected. Custom fields enable you to change the default image and text color.

Tested using the Genesis Sample child theme by StudioPress however will work in any Genesis child theme.

Installation Steps

  1. # Upload the file named full-screen-background.php & the folder named js to your Genesis child theme folder like this :
  2.  

  3. # Copy & paste the PHP code from the functions.php file to the end of your child themes functions file.
  4.  

  5. # Copy & paste the CSS from the style.css file to the end of your child themes stylesheet and clear caching.
  6.  

  7. # Add your background image using custom fields as seen in the demo video and select the text color using the dark or light background. You can also upload a default background image using the Customize > Full Screen Image setting.
  8.  

Download Folder

Related Code Snippets

Categories
WordPress Tutorials

After Header Widget With Image Background in Any Theme

This custom tutorial request, written for a paid member, adds a widget area after the header with an image background.

The default image named after-header.jpg is uploaded to your child themes images folder. You can then change it using customize > Widget Background.

The tutorial also includes instructions, at the end of this post, on how to change the height of the image.

Demo Video

Shows the after header widget displaying text over the background image added via the customizer > Widget Background setting in the Ocean WP theme for WordPress.

Tested using the Ocean WP theme for WordPress, this tutorial can be used in any WordPress theme. If you’re using Genesis, use this version instead which contains Genesis hooks.

Installation Steps

  1. # Upload the lib & js folders to your child theme folder like this :
  2.  

  3. # Copy & paste the PHP code from the functions.php file to the end of your child themes functions file.
  4.  

  5. # Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.
  6.  

  7. # Copy & paste the PHP code between lines 43 – 49 in header.php to your child themes header.php file. To do this you may need to copy over your themes header.php file from your parent theme to your child theme. The PHP code should be pasted in the position you want to display the widget area. In this case, at the end of the header.php file so it displays after your header.
  8.  

  9. # Upload your background image named after-header.jpg to your child themes images folder.
  10.  

Download Folder

# Image Height

To reduce the height of the background image displaying behind your pages entry title, you can swap out the jQuery in after-header.js file located inside the after-header folder to this :


And change the 0.5 to adjust further. This will change the height by half.

Related Tutorials

Categories
Genesis Tutorials

Add Full Width Image Behind Page Title In Winning Agent Pro

The code in this download folder enables you to select the template named Hero After Header Image from any Edit Page screen and add a unique image behind your page title.

If none added, you can upload an image named hero.jpg to your Winning Agent Pro themes images folder and select that as the default image in customize > Default Hero Image.

Demo Video

Shows the Hero After Header Image template displaying a background image behind the single page entry title when added using ACF or WordPress custom fields or using the Default hero image added via the customizer.

Tested using the Winning Agent Pro child theme for Genesis.

Installation Steps

There’s 4 steps :

  1. # Upload the file named hero.php and the folder named after-header to your Winning Agent Pro theme folder like this :
  2. # Copy & paste the PHP code from the functions.php to the end of your Winning Agent Pro themes functions file.
  3.  

  4. # Copy & paste the CSS from the style.css file to the end of your Winning Agent Pro themes style.css file and clear caching.
  5.  

  6. # Optional : You can install the Advanced Custom Fields ( ACF ) plugin and go to your WordPress Dashboard > Custom Fields > Tools and import the acf-102103.json file or you can use WordPress custom fields as seen in the demo video which doesn’t require the installation of any plugins.
  7.  

Download Folder

# Image Height

To reduce the height of the background image displaying behind your pages entry title, you can swap out the jQuery in after-header.js file located inside the after-header folder to this :


And change the 0.5 to adjust further. This will change the height by half.

If you want to reduce the image height by 65%, change the 0.5 to 0.35.

Related Tutorials

Categories
Genesis Tutorials

Add Front Page Template With Video To New Versions Of Monochrome Pro Using Blocks

This tutorial provides the code which adds the front page template for widget areas back to the new versions of Monochrome Pro which are coded to use blocks.

The front-page.php file also includes code to add a video background behind the front page 1 widget area replacing the background image added via the customizer.

The video, added via the customizer, displays behind the front page 1 widget & site header on desktops then below the header on smaller screens once the responsive menu is activated.

Demo Video

Shows the front page 1 widget background image replaced with a video added via the customizer and the entire front page widget areas added from the old version of Monochrome Pro to the new block versions.

Installation Steps

There’s 4 steps :

  1. # Upload the customize.php file to the lib folder replacing the default customize.php file.
  2.  

  3. # Copy & paste the PHP code from the functions.php file to the end of your Monochrome Pro themes functions file.
  4.  

  5. # Upload the front-page.php file to your Monochrome Pro theme folder like this :
  6.  

  7. # Upload the style-front.css file to your Monochrome Pro theme folder like this :
  8.  

Download Folder

Related Tutorials

Categories
Genesis Tutorials

Video Behind 2 Div Elements – Site Header & Front Page 1 Widget In Agent Focused Pro

This tutorial enables you to replace the front page image with a video via the customizer in the Agent Focused Pro child theme for Genesis.

Your video will display behind both the site header and after header front page one widget area. Works with self hosted videos added to your WordPress media library.

Demo Video

Shows the video added via the new customizer setting replacing the front page image in the Agent Focused Pro child theme for Genesis.

Tested using the Agent Focused Pro child theme. May work in other Genesis child themes where the front page 1 widget is hooked using the genesis_after_header hook.

Installation Steps

There’s 3 steps :

  1. # Upload the front-page.php file to the Agent Focused Pro theme folder replacing the default front-page.php file.
  2.  

  3. # Upload the customize.php file to the lib folder replacing the default customize.php file.
  4.  

  5. # Copy & paste the CSS from the style-front.css file to the end of the style-front.css file and clear caching.
  6.  

You can then upload your video file using the customize > front page video upload setting.

Download Folder

Categories
Genesis Tutorials

Hero Image Behind Site Header & Menu With Text Overlay In Genesis Sample Theme

This download folder contains 3 files which enable you to add a full width hero image behind your site header which also contains your menu like this :

Genesis Sample Theme Hero Image Behind Site Header

The hero is only activated once the hero widget is populated.

By default, the same image displays across all page types however you can add a unique image to any single post/page using WordPress custom fields and/or ACF fields.

Any content you add to the Hero widget area floats over your hero image.

Demo Video #

Shows the default hero image displaying behind the site header and the unique hero image, added using a ACF image field displaying when added. Shows the site header background color changing from transparent to white on scroll.

You can change the default hero image using customize > Hero Image.

Installation Steps #

There’s 4 steps :

Step 1 – Upload the hero.js file to your Genesis Sample themes root directory.

Step 2 –
Copy & paste the PHP code to the end of the Genesis Sample themes functions.php file.

Step 3 – Copy & paste the CSS to the end of the Genesis Sample themes style.css file and clear caching.

Step 4 – Add a widget with your content to Appearance > Widgets > Hero Text. Without this widget area active, the code will NOT execute. Also, your image will not display unless you add it via customize > Hero Image.

Download Folder

Optional – Unique Hero Images

If you want to display unique images on single posts and pages, install the Advanced Custom Fields plugin and import the acf.json file using Custom Fields > Tools > Import File as seen in this screenshot :

ACF Import File

Related Tutorials

Categories
Genesis Tutorials

Add Audio or Video Shortcode Via Customizer To Essence Pro Themes Hero Section

This tutorial provides the code which enables you to add a video or audio player in the Hero section of the Essence Pro theme.

Add Audio or Video Shortcode Via Customizer

You can upload your video or audio file to your WordPress Media Library and use the file URL with the audio shortcode like this :

[audio src="http://example.com/wp-content/uploads/2019/09/audio.mp3"]

or the video shortcode like this :

[video src="http//example.com/wp-content/uploads/2019/09/video.mp4"]

Either shortcode can be added via Customize > Essence Pro Settings > Front Page Hero Section > Audio or Video Shortcode.

Watch the following demo video to see where to add the shortcode for your video or audio file.

Demo Video #

Shows the video and audio shortcodes added via the customizer displaying in the hero section on the front page pf the Essence Pro child theme by StudioPress.

Installation Steps #

There’s 3 steps :

Step 1 – Copy & paste the PHP code from the functions.php file to the end of your Essence Pro themes functions file.

Categories
Genesis Tutorials

Add Third Hero Button To Front Page Hero Section in Essence Pro

This tutorial provides the code which adds a third button to the front page hero section in the Essence Pro child theme by StudioPress.

Add Button Front Page Hero Section Essence Pro

Demo Video #

Shows a third button added to the hero section on the front page of the Essence Pro theme.

Enables you to change the button URL and button text using custom settings added to the default Customize > Essence Pro Settings > Front Page Hero Section settings.

Installation Steps #

There’s 3 steps :

Step 1 – Copy & paste the PHP code from the functions.php file to the end of your Essence Pro themes functions file.

Related Tutorials

Categories
Genesis Tutorials

Change Backstretch Background Image When Mobile – AgentPress Pro

This download contains the code which enables AgentPress Pro theme owners to use a special image on mobile screens.

The mobile image replaces the default image added via Customize > Background Image > Home Image Upload to the image you add using the custom settings via customize > Background Image > Mobile Image Upload.

AgentPress Pro Customize Background Image Upload

Watch the following demo video to see how the image changes at the same time the mobile menu is displayed :

Demo Video #

Shows a different image displaying at the same time the mobile menu kicks in for the AgentPress Pro child theme by StudioPress.

This solution will also work with any Genesis child theme that uses Backstretch to control the background image of any HTML element.

Code Installation #

There’s 3 steps :

Step 1 – Copy & paste the PHP code from the functions.php file to the end of the AgentPress Pro themes functions file or merge the code with the existing agentpress_customizer() function in the lib > customize.php file.

Related Tutorials

Categories
Genesis Tutorials

Full Height Vertical Side Push Widget For Left or Right

The code in this download does a number of things :

  • Adds a custom widget area named Side Menu which you can populate with the Nav Menu widget.
  • Adds a setting named Side Menu to the default Menus setting in the Customizer you can use to show the side menu on the left or right of your site.
  • Adds an animated hamburger/cross icon to the left or right side of your site header based on the selection you make in customize > menus > side menu > left or right.
  • Pushes the site container to the left or right when the hamburger ( open ) icon is clicked and closes when the cross is clicked.

The following 2 column gallery shows you how it works :

Watch the following video to learn more about how the code in this tutorial works.

Demo Video #

Shows the contents of the Side Menu widget area displaying in a full height section you can toggle open and close using the icon on the site header. Works on both the left or right side of your site container simply by selecting the radio buttons on the customizer.

Tested and coded for the Genesis Sample child theme by StudioPress which uses a fixed header. Should work fine in any other Genesis child theme however the CSS would most likely need to be modified.

Code Installation #

There’s 4 steps :

Step 1 – Copy the PHP code from the functions.php file to the end of the Genesis Sample themes functions file.

Step 2 – Copy & paste the CSS to the end of the Genesis Sample themes style.css file and clear caching.

Categories
Genesis Tutorials

Add Widget After Header With Background Image Using Customizer

This solution enables you to add a full width of screen image with text overlaying the image using the customizer.

  • The image can be added/changed using the Customize > Front Page Hero Image settings.
  • A default image named hero.jpg can be added to your child themes images folder.
  • The image is displayed after the header on the front page however this can be changed to any/all page(s)
  • The text is added using a HTML or text widget in the Front Page Hero widget area.

This code was written for people who don’t want to edit the code or use FTP to upload image files in order.

Demo Video #

The content is added using the Front Page Hero widget area and the image can be added/set or changed using the customizer. Includes responsive text.

Tested using the Genesis Sample child theme by StudioPress. Should work fine in most Genesis child themes without modification.

Code Installation Steps

There’s 4 steps relating to usage of the files in the download folder :

# Step 1 : Upload the file named front-page.php to the Genesis Sample themes root directory.

Step 1

# Step 2 : Upload the file named hero.php to the Genesis Sample themes root directory then add the following PHP code to the end of your child themes functions.php file.

require_once get_stylesheet_directory() . '/hero.php';

Like this :

Step 2

# Step 3 : Copy and paste the following CSS to the end of your child themes style.css file and clear caching.