Tag: Enterprise Pro Theme

Categories
Genesis Tutorials

Equal Height Logo & Header Right Widget Content On Desktops

The code in this download folder enables you to display your header image & a image in the header right widget area at equal heights on desktops.

On mobiles, the images will scale down to fit the size of the site header without leaving any space.

Desktop site header images

This way your images won’t be cut off on smaller mobile screens as seen in the following demo video.

Demo Video #

Shows the header image ( logo ) & image in the header right widget area displaying with equal height on desktops and scaling down to fit mobile screens without cutting off any part of the image.

This solution has been written to work with the Enterprise Pro child theme by StudioPress however the method used will work in any theme.

Installation Steps #

There’s 2 steps :

Step 1 – You’ll find the following code between lines 39 – 44 in functions.php. In this example, the values for the height & width have been set at 150px by 300px as seen in the following code example :

Step 2 – Paste the CSS from style.css to the end of your Enterprise Pro child themes style sheet and clear caching.

Download Folder

Categories
Genesis Tutorials

Enterprise Pro Home Top Widget On All Pages

The code in this download folder for logged in members enables you to display the home top widget on every page of your site when using the Enterprise Pro child theme by StudioPress.

This tutorial has been written based on the following question from a registered user :

How do I go about making the Enterprise Pro theme – “Home Top Widget” available for all pages?

Demo Video #

Shows the home top widget displaying on all archive pages and single posts.

You can also use the code to create a checkbox enabling you to remove the widget on any single or archive page type.

Code Installation #

There’s only 1 step :

Register for full access

Categories
Genesis Tutorials

Drop Down Search Toggle in Header Nav Menu With Magnifying Glass Icon

This code adds the Magnifying Glass Icon for the drop down search form to the header menu.

In this case, the secondary menu is repositioned to the site header like this :

Tested using the Enterprise Pro child theme by StudioPress however should work fine in most genesis child themes without modification.

This code has been taken from this tutorial and extended to work with the Enterprise Pro theme.

Demo Video #

Shows the search form tested using the Enterprise Pro child theme on Genesis. Tested on desktop and mobile screens.

There’s 3 steps relating to usage of the code in the download folder for logged in users :

Step 1 : Upload the search.js file to the Enterprise Pro themes js folder.

Step 2 : Copy & paste the PHP code from the functions.php file to the end of the Enterprise Pro themes functions file.

Step 3 : Copy & Paste the CSS from the style.css file to the end of the Enterprise Pro themes style sheet and clear caching. This CSS may need tweaking for use in other Genesis child themes.

Register or login to access the download folder :

Register for full access

Categories
Genesis Tutorials

Responsive After Header Image Text & Button

This tutorial adds a after header widget area to the front page of the Genesis Sample child theme by StudioPress. You can add this featured to any other Genesis child theme however the CSS may need a little tweaking.

If you want to do the work yourself, you can take the code from the Enterprise Pro theme like i have done and add it to any child theme yourself which will require some time ( approx. 1 – 2 hours ) as well as modification and addition of code.

Demo Video

Here’s the demo video showing how the CSS for Media Queries works at different screen widths:

Here’s the Genesis – Featured Page width settings you need to configure:

Code Installation

After downloading and unzipping the folder below for logged in members, follow these instructions:

Step 1 : Upload the front-page.php file to the Genesis Sample themes folder. If you’re wanting to use this solution with a theme that already includes a front-page.php or home.php file, you’ll need to take the code out of the front-page.php file and add it to your themes front-page.php or home.php file.

Step 2 : Copy and paste the PHP code from the functions.php file to the end of your child themes functions.php file.

Step 3 : Copy & paste the CSS & CSS for Media Queries from the style.css file to the end of your child themes style.css file.

You’ll also need to configure the Genesis Featured Page widget in the Home Top widget area and choose a page to use for the content.

Here’s the download for logged in members:

Register for full access

Related Tutorials

Categories
Genesis Tutorials

Enterprise Pro – Replace Home Top Featured Image With Responsive Video

This tutorial enables you to remove the featured image from the home top featured page widget in the Enterprise Pro child theme by StudioPress and replace it with a responsive video.

Here’s a video showing how the video resizes on different sized screens:

And here’s the home top widget area setup showing the Genesis featured page widget settings:

Here’s the HTML for the video which you simply paste into a text widget in the home top widget area as seen in the above screenshot:

Here’s the code for logged in members:

Register for full access

Categories
Free Tutorials Genesis Tutorials

Add New Widget Area Before Footer Widgets In Genesis

This code has been written in response to a support request from a member:

I’m using the Enterprise Pro theme and I’m trying to add a widget area directly above the 3 footer widgets so that it’s visible on all pages. I tried adding a widget area using the “genesis_before_footer” hook, but that broke the site – not sure if there’s a conflict with the code I currently have for the “before content widget”. I also tried adding the widget using the “genesis_after_content_sidebar_wrap” hook, but that did not display anything.

The code adds a new widget area before the footer widgets in most Genesis child themes. Here’s an example showing the widget area added before the footer using the Genesis Sample child theme :

New Widget Area Before Footer

Installation Steps

# Step 1 – Using a code editor, copy and paste the following PHP code to the end of your child themes functions file.

Here’s what the PHP code looks like once added to the end of the Genesis child themes functions file :

Step 1 - Add PHP code to functions file

Tested using the Enterprise Pro & Genesis Sample child theme by StudioPress.

Change the genesis_before_footer hook in the above code to change the position of the widget area.

Note : Step 2 is only required if you want to exclude the widgets from showing on specific page(s).

# Step 2 – If you only want the widget on the front page, you can add a conditional tag to the code like this :

if ( ! is_front_page() ) return;

The code would now look like this :

Here’s what this code snippet looks like once added to the end of the Genesis Sample themes functions file :

Step 2 - Add conditional tag tp PHP cocde

Categories
Free Tutorials Genesis Tutorials

Increase Logo Size for Enterprise Pro Theme

This tutorial ( which includes a video ) shows you how to change the header image size for the logo in the Enterprise Pro child theme by StudioPress.

By default, the theme includes code for a header image which is 320px width by 80px height.

If you go to the Customize link in your wp admin bar and click on Header Image, you’ll find the suggested size which needs changing to match your logo size:

header-image

Step 1: In your child themes folder, open your functions.php file and change the values for the width & height on lines 42 and 43 as seen in the following PHP code:

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'header-selector' => '.site-title a',
	'header-text'     => false,
	'height'          => 80,
	'width'           => 320,
) );

Step 2: in your child themes folder, open your style.css file and change the values for the width on line 1035 and the min-height on line 1057 as seen in the following CSS:

.title-area {
	float: left;
	padding: 0 0 4px;
	width: 320px;
}

.header-image .site-title > a {
	background-position: top !important;
	float: left;
	min-height: 80px;
	width: 100%;
}

Now you can use Customize > Header Image to add your new image which matches the new width and height.

Demo Video #

The following video walks you through the above code modifications: