Tag: Authority Pro Theme

Categories
Genesis Tutorials

Reposition Image Before Title When Mobile Responsive

This coded solution for the Authority Pro child theme by StudioPress, enables you to move the home page image before the title and text on mobile screens rather than the default which shows the image after the content.

CSS image before title text mobiles

The code enables you to change the position of any element when in different columns in any container using CSS.

Demo Video

Shows the home page image in the first section moved to display before the intro text on mobiles.

Tested using the Authority Pro child theme by StudioPress however will work in any theme by changing the selector classes to match for the container and columns 1 and 2.

Installation

There’s only 1 step :

Copy and paste the CSS to the end of your Authority Pro child themes style.css file and clear caching.

Download Folder

Categories
Genesis Tutorials

Use Custom Featured Image On Single Posts Different To Archives In Authority Pro

The code in this download folder enables you to use a different featured image on single posts to the image displayed on archive pages.

You can choose from 2 options to add your custom image using WordPress custom fields or ACF.

Demo Video

Shows you how to add a unique featured image for display on single posts which is different to the image shown on archive pages.

Tested using the Authority Pro child theme by StudioPress.

Installation Steps

There’s 1 – 2 steps :

  1. # Upload the file named featured-images.php to the Authority Pro themes lib folder overriding the default file of the same name.

    2.  

  2. # Add your single post image on the Edit Post screen using custom fields native to WordPress or ACF. See instructions below under the Add Image sub heading.

    3.  

Download Folder

Add Image

Create a custom field named single_image and add the link for your image to the value field like this :

If you want to use ACF to add your image, import the file named 72894-acf.json using the ACF plugins > Custom Fields > Tools > Import field.

You’ll also need to remove or comment out the code on line 29 of image-functions.php and uncomment the code on line 41. This option allows you to use the Customize > Theme Settings > Content Archive > Featured Image Size settings to select the single-featured-image size like you see in this screenshot :

Categories
Genesis Tutorials

Copy Genesis Front Page Template Using Gutenberg

This tutorial shows you how to copy the front page template using the Gutenberg editor.

In this download, you’ll get a copy of the Gutenberg template for Genesis which you can use in any Genesis child theme to copy the front page template of the same child theme.

This way you can use the front page template on unlimited pages with unique content for each page.

Demo Video #

Shows the Authority Pro front page template used as a page template any number of times.

Works in any Genesis child theme.

Installation Steps #

There’s 4 steps :

Register for full access

Related Tutorials

Categories
Genesis Tutorials

Authority Pro Single Page Template With Hero Section

This page template can be used to display the hero section with unique elements on unlimited amount of single pages.

authority-pro-hero-page-template

The template enables you to use unique content for every element of the hero section including the :

  • Title
  • Description
  • Caption
  • Image
  • Logos

Demo Video #

Shows the hero section with unique content for each element displayed on a single page.

Code Installation #

There’s 4 steps :

Register for full access

Categories
Genesis Tutorials

Authority Pro Landing Page Template With Hero Section

This template adds the hero section to the landing page template in Authority Pro like this :

The template enables you to use unique content for every element including the title, description, eNews widget, image and caption.

The template also includes the featured logos and down arrow from the front page.

Demo Video #

Shows the hero section displaying with a unique title and description on the landing page template in Authority Pro.

Code Installation #

There’s 3 steps relating to usage of the files inside the download folder :

Register for full access

Related Templates

Categories
Genesis Tutorials

Copyblogger Style Front Page Grid

A member of the Genesis community recently sent this message :

I am reading your posts and they are great, here you have a new member on January 1st, if I subscribe now I forget about Christmas 🙂 I’m trying to create the post on the front page as copyblogger.com does. I love it, do you think you can do a tutorial of those? If you tell me if I subscribe tomorrow. Thank you

Here’s what you can do using the Genesis Sample child theme to replicate how Copyblogger.com display posts on their front page :

The download package includes CSS for media queries so each entry displays in a single column on smaller screens, as seen in the following demo video :

Demo Video #

Shows a similar layout to the front page of the Copyblogger website which you can use in any Genesis child theme. Note : The code may need modification for usage in other Genesis child themes.

Tested using the Genesis Sample & Authority Pro child themes ( works without any modification ).

Code Installation #

There’s 3 steps relating to usage of the files inside the download folder :

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

Register for full access

Related Templates

Categories
Free Tutorials Genesis Tutorials

Authority Pro – Enable Shortcodes In Top Banner

To use shortcodes in Authority Pro > Customize > Authority Pro Settings > Top Banner Section, you’ll need to modify the PHP code.

Go to line 497 in the Authority Pro themes functions.php file and modify the following line of PHP code from this :

Click here to access free tutorials


You can then add a shortcode in the Customize > Authority Pro Settings > Top Banner Section.

Categories
Free Tutorials Genesis Tutorials

Authority Pro – Remove Social Menu From Specific Pages

This tutorial provides the steps to modify the code so you can conditionally remove the social menu from specific pages in Authority Pro.

Based on this question from a member of the Genesis community :

I need to conditionally remove / hide the Social Menu (along left hand side of page) for a specific page. The conditional argument is no problem, however I cannot find the hook for the social menu and the do_action argument for the social menu.

Demo Video #

Shows how to add a conditional tag to the existing function authority_do_social_menu in order to remove the social menu from displaying on specific pages.

Code Modification #

In the Authority Pro themes functions file, you’ll find the PHP code for the social menu between lines 276 – 293 which adds the third menu on all pages of the Authority Pro theme.

add_action( 'genesis_before_header', 'authority_do_social_menu', 9 );

function authority_do_social_menu() {

	echo '<h2 id="additional-menu-label" class="screen-reader-text">' . __( 'Additional menu', 'authority-pro' ) . '</h2>';

	genesis_nav_menu(
		array(
			'theme_location' => 'social',
			'depth'          => 1,
		)
	);

}

There’s only 1 step. Add your conditional tag after the function name like you see in the following modified code :

add_action( 'genesis_before_header', 'authority_do_social_menu', 9 );

function authority_do_social_menu() {

    if ( is_front_page() ) 
    return;

	echo '<h2 id="additional-menu-label" class="screen-reader-text">' . __( 'Additional menu', 'authority-pro' ) . '</h2>';

	genesis_nav_menu(
		array(
			'theme_location' => 'social',
			'depth'          => 1,
		)
	);

}

In this case, we’ve added the following conditional check to remove the social menu from the front page :

if ( is_front_page() ) 
    return;

You can swap out the is_front_page conditional tag and use any other conditional tag to remove the social menu from any page or post.

Categories
Genesis Tutorials

Authority Pro – Replace Hero Portrait Image With Video

This tutorial removes the hero portrait Image setting from the Authority Pro settings in the customizer and adds a hero video setting enabling you to upload a video, select a video from the media library or add a externally hosted video link.

You can also add a thumbnail image which is displayed like a video poster with a play button overlaying the image as seen in the following demo video.

#Demo Video

Shows how you can add a video and/or overlaying thumbnail image to the right half of the hero section using the customizer in Authority Pro.

#Installation

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

Step 1 : Upload the customize.php file to the authority-pro > lib > customize folder replacing the default customize.php file.

Step 2 : Copy & paste the PHP code from the helper-functions.php file to the end of the authority-pro > lib > helper-functions.php file.

Step 3 : Upload the hero-section.php to authority-pro > lib > templates folder replacing the default hero-section.php file.

Step 4 : Upload the hero-style.css file to the authority-pro > css folder replacing the default hero-style.css file.

You can then upload your video and/or video thumbnail image using the customize > Authority Pro Settings > Hero Video Settings as seen in the demo video.

And set a default thumbnail image named hero-video-thumb.jpg in your child themes images folder.

Register or login to access the download folder :

Register for full access

Categories
Genesis Tutorials

Authority Pro Front Page Template As Page Template – Easy Setup Version

This template produces exactly the same result as this older template however is far easier to setup.

This version requires the use of the ACF plugin unlike the previous version which uses WordPress custom fields.

Once you install the template, you can import the json file from the download folder into ACF and your fields and demo content for each field is setup automatically.

In your WordPress Dashboard go to Custom Fields > Tools > Import Field Groups and you’ll find the box to select the json file for import.

Here’s 1 example of what the template produces after importing the ACF json file :

The template also includes a unique widget area for the eNews subscribe widget in the hero section and a unique footer widget area independent of the front page.

Watch the demo video to see unique content displays on a single page using the template.

Video Demo

Shows a single using the template which shows unique content in the same way the front page template works.

Register or login to access the download folder :

Register for full access

Categories
Genesis Tutorials

Add Slider To Authority Pro Themes Front Page

This tutorial helps you add a slider to the front page template in the Authority Pro theme by StudioPress.

In this case we replace the front page hero section with the slider and reposition it using the genesis_after_header hook from the genesis_before_content_sidebar_wrap hook.

Use any of these hooks.

Here’s the modified front-page.php template for registered users :

Register for full access

Categories
Genesis Tutorials

Use Authority Pro Front Page Template As Page Template

This template enables you to display unique content for each single page which uses the the template.

Update : This new version enables you to setup all the fields and demo content in 1 click.

This includes :

  • Hero title
  • Hero description
  • Hero portrait image
  • Hero portrait caption
  • All elements of the 5 main template sections
  • The blog title
  • The blog description
  • The bog button text & link
  • All elements of the featured posts

The template also includes a unique widget area for the eNews subscribe widget in the hero section and a unique footer widget area independent of the front page.

Watch the demo video to see unique content displays on a single page using the template.

Video Demo

Shows a single using the template which shows unique content in the same way the front page template works.

Template Installation

There’s 4 steps once you have access to the download folder :

Step 1 : Upload the file named replicant.php to the Authority Pro themes root directory and select the template named Front Page Replicant from the templates drop down menu i n the Page Attributes box on any Edit Page screen.

Step 2 : Upload the file named heros.php to the Authority Pro themes root directory.

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

Step 4 : Copy & paste the CSS from the style-front.css file inside the css folder to the Authority Pro themes style-front.css file and clear caching.

You’ll then need to add content for the template using the instructions below for registered users.

Register or login to access the download folder :

Register for full access

Related Tutorials

Categories
Free Tutorials Genesis Tutorials

Authority Pro Full Width Featured Image On Single Posts

A member of the Genesis community asked, “How do i make the featured image on single posts full width?”

There’s 2 steps :

Step 1 : Go to the function on line 24 in authority-pro > lib > featured-image.php and change the code to this :

Step 2 : Add the following CSS to the end of the Authority Pro themes style.css file and clear caching.

.featured-image img {
    max-height: 300px;
}

Here’s another way to do it.

Categories
Genesis Tutorials

Add Authority Pro Hero Section With Unique Content To Single Posts & Pages

This tutorial extends the code in this tutorial and enables you to display unique content on each & every hero section displayed on any number & type of inside pages.

Each element in each hero section can be customized so its unique on every page or post the hero is shown.

If no unique content is added, the default content used in the front page hero section is displayed as you can see in the following demo video :

Demo Video

The demo shows how unique content has been added to the hero section elements displaying on a single page and the default elements are displayed on a single post.

Unique content which can be added in each hero includes :

  • Title
  • Description
  • Image
  • Caption
  • Logo Images

Code Installation

There’s 3 steps :

Step 1 : From the download folder, upload the file named heros to your child themes root directory.

Step 2 : From the download folder, copy & paste the PHP code from the functions.php file to the end of the Authority Pro themes functions.php file.

Step 3 : From the download folder, copy & paste the CSS from the file named style-hero.css to the end of the css > style-hero.css file inside the Authority Pro theme folder.

Register or login to access the download folder for members :

Register for full access

Categories
Free Tutorials Genesis Tutorials

Add Authority Pro Featured Images on Single Pages

This tutorial provides the code which enables you to display featured images on single pages exactly the same as they’re displayed on single posts when using the Authority Pro child theme by StudioPress.

There’s 3 steps :

Step 1 : Go to authority-pro > lib > featured-images.php and modify line 44 like this :

if ( $add_single_image && $image && is_singular(array( 'post','page' ) ) ) {

Step 2 : Go to authority-pro > lib > featured-images.php and modify line 62 like this :

if ( $add_single_image && is_singular(array( 'post','page' ) ) && genesis_get_image() ) {

Step 3 : Add the following CSS to the end of the Authority Pro themes style.css file and clear caching :

.page.has-featured-image .site-inner {
	padding-top: 20px;
}

.page.has-featured-image .authority-featured-image::before,
.single .authority-featured-image::before {
	height: calc(100% + 45px);
}

.sidebar-content.page.has-featured-image .authority-featured-image::before,
.sidebar-content.single .authority-featured-image::before {
	left: auto;
	right: 0;
}

.page.has-featured-image .sidebar .widget:first-of-type {
	margin-top: -60px;
}


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

    .page.has-featured-image .sidebar  .widget:first-of-type {
	    margin-top: 0;
    }

}

That’s it!

Categories
Genesis Tutorials

Authority Pro Add Images To Front Page Widget Backgrounds

The code in this tutorial enables you to add background images to the front page widgets in the Authority Pro child theme by StudioPress.

This tutorial extends the solution in this post which enables you to make the front page widget areas in Authority Pro full width.

You can add default images in the Authority Pro themes images folder for each widget area and name them front-page-1.jpg, front-page-3.jpg & front-page-5.jpg like this :

You can also change the default images via the customizer.

Note : The code in this tutorial should work in any Genesis child theme enabling you to add background images to existing front page widget areas.

Code Installation #

There’s 3 steps once you have access to the download folder :

Step 1 : From the download folder, copy & paste the PHP code from the functions.php file to the end of the Authority Pro themes functions file.

Step 2 : From the download folder, upload the folder named custom-js to the Authority pro themes root directory.

Step 3 : From the download folder, upload the modified version of the front-page.php file to the Authority Pro themes root directory replacing the default front-page.php file. This file is commented showing exactly where the custom code has been added.

You can then add default images to the Authority Pro themes images folder and replace them via the customizer.

Register or login to access the download folder for members :

Register for full access

Categories
Free Tutorials Genesis Tutorials

Authority Pro Full Width Widget Areas

This code enables you to make the front page widget areas full width.

Based on this question from a member :

Do you know if there’s an easy way to make the front page widget areas on the new Authority Pro theme full-width. Currently they’re limited to 1280px. I’d like to have full-width backgrounds on each of those front page widget area.

And here’s the result showing a background color added to the front page 1 widget area which displays full width of the screen at all screen widths :

Here’s the CSS you simply paste at the end of the Authority Pro themes style.css file.

.front-page .site-inner {
    margin: 0 auto;
    max-width: none;
}

.front-page-1 {
    background-color: #f1f1f1;
}

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

	.site-inner {
		padding: 5% 0 0;
	}
	
}

Once you add the CSS to make the widget area backgrounds full width, you can then add background images.

Categories
Genesis Tutorials

Add Authority Pro Hero Section To Inside Pages

This code enables you to display the hero section from the front page of the Authority Pro theme to any inside pages or posts. Simply use a conditional tag in the code to control exactly where it displays.

The Authority Pro theme is the latest in a range of nearly 100 themes included in the Pro Plus package by StudioPress themes.

Register or login to access members only code :

Register for full access

Related Tutorials