• Skip to primary navigation
  • Skip to main content

WP SITES

2754

Original WordPress Tutorials & 6000+ Guaranteed Code

Snippets

  • Premium Access
  • Log in
Academy Pro Theme   Accordion & Toggle   Action Hooks   After Header Image   Agency Pro Theme   Agent Focused Pro   AgentPress Pro Theme   Altitude Pro   Ambiance Pro Theme   Animation   Aspire Pro Theme   Atmosphere Pro Theme   Author Box   Author Pro   Authority Pro Theme   Background Image   Beautiful Pro Theme   Blog Page   Breadcrumbs   Breakthrough Pro Theme   Brunch Pro Theme   BuddyPress   Business Pro Theme   Cafe Pro Theme   Centric Pro Theme   Child / Sub Categories   Child Theme   Comments   Cook'd Pro Theme   Custom Fields   Custom Logo   Custom Sidebar   Customizer   Daily Dish Theme   Digital Pro Theme   Divi Theme   Eleven40 Pro Theme   Enterprise Pro Theme   Entry Meta   Essence Pro Theme   Executive Pro Theme   Expose Pro Theme   Featured Image   Filter & Sort   Foodie Pro Theme   Footer Widgets   Gallery Pro Theme   Generate Pro Theme   Genesis Blocks   Genesis Featured Page Widget   Genesis Featured Posts   Genesis Markup   Going Green Pro Theme   Grid Columns   Gutenberg   Header Image   Infinite Scroll   Infinity Pro Theme   Interior Pro Theme   Jetpack   jQuery Scroll   Kreativ Pro Theme   Layout   Lifestyle Pro Theme   Magazine Pro Theme   Maker Pro Theme   Masonry   Meta Box   Metro Pro Theme   Minimum Pro Theme   Modern Portfolio Pro Theme   Modern Studio Pro Theme   Monochrome Pro   Nav Menu   Navigation Pro Theme   News Pro Theme   No Sidebar Pro Theme   Outfitter Pro Theme   Outreach Pro Theme   Pagination   Parallax Pro Theme   Patterns   PHP Functions   Post Categories   post_class   pre_get_posts   Product Image   Read More   Refined Pro Theme   Reusable Blocks   Revolution Pro Theme   Roles & Capabilities   Search   Showcase Pro Theme   Simple Social Icons   Site Description   Slider   Smart Passive Income Pro Theme   Tabs   Taxonomy Terms   The Content   Translate Language   Twenty Fourteen Theme   Twenty Nineteen Theme   Twenty Twelve Theme   Twenty Twenty One   Twenty Twenty Theme   Twenty Twenty Two   Video   Wellness Pro Theme   Winning Agent Pro   WooCommerce   WordPress Gallery   Workstation Pro Theme  

Academy Pro Theme Tutorials

Tutorials in this archive contain solutions related to the modification & customization of the Academy Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Add Academy Pro Hero Section To Archives With Unique Content For Each Category

This tutorial provides the code which enables you to add the hero section from the front page to each category page. You can also : Add a unique…

Open Academy Pro Hero Buttons In New Window By Adding Target Attribute target=”_blank”

This tutorial shows you how to add the target="_blank" to the HTML for the hero section buttons in Academy Pro so they open in a new window. Demo…

Academy Pro Single Page Template With Featured Image Before Page Title

This single page template for Academy Pro adds adds a featured image before the entry title in the same way as the image is added on single posts…

Academy Pro Single Page Template With Featured Image

This template for use with the Academy Pro theme enables you to customize any single page. In this case, the template displays, in the following order, the breadcrumbs,…

3 Ways To Add Search To Academy Pros Nav Menu

This tutorial contains a download folder which includes 3 different code snippets providing 3 different ways to add a search form in the primary nav menu of the…

Academy Pro Checkbox To Remove Hero Section On Inner Pages

This tutorial extends the code in this tutorial and enables you to add a checkbox on single posts and pages to remove the hero section without the need…

Academy Pro Show Hero Section On Inner Pages

This solution adds a checkbox which you can use to show or hide the hero section from the front page on any inner page/post type. It uses ACF…

Academy Pro Front Page Template For Single Pages – Easy Setup Version

This version of the Academy Pro themes front page enables you to use the front page template on unlimited pages and add the demo content in 1 click.…

Add Top Banner With Typewriter Text In Genesis

This code enables you to add a top banner to any Genesis child theme. In this case its hooked before the header in the latest version of the…

Academy Pro Remove Close Link From Top Banner

This solution enables you to remove the close X from the top banner modify the jQuery to customize the top banner text & add jQuery effects. In this…

Remove Featured Images From Archives in Academy Pro

The academy Pro child theme by StudioPress includes 2 lines of code on lines 393 & 394 in functions.php which reposition the featured image on all archive page…

Academy Pro Slider Before Header

This code enables you to add the Soliloquy slider before the header to any Genesis child theme. Tested using the Academy Pro & Genesis Sample child themes by…

Academy Pro Change All Flexible Widget Layouts To Front Page 4 Style

This tutorial is based on the following question from a member of the Genesis community : What do I need to change if I want all the sections…

Change Academy Pro Category Grid To 4 Columns

This CSS will change the columns on the journal category archive page from 3 to 4 columns : Add the following CSS to the end of the Academy…

Change Academy Pro Home Page To 3 or 4 Columns

This tutorial shows you how to modify the Academy Pro themes home page columns so entries display in 3 or 4 columns rather than the default which is…

Academy Pro Front Page As Page Template

This template for use with the Academy Pro theme by StudioPress, can be used on unlimited pages with unique content for each element on each page the template…

Accordion Tutorials

The tutorials in this archive relate to usage and modification of jQuery accordions in Genesis child themes. You'll find code which helps you add/modify and customize the code used to create and display a accordion. You'll also find more tutorials relating to accordions ( like toggle ) which aren't tagged with accordion by using the search widget in the sidebar. All code as well as support for PHP code is guaranteed for members.

Modify HTML Tags In Genesis Blocks

This code enables you to change the HTML tags ( opening & closing ) in the Genesis accordion block or any other Genesis or WordPress block. In this…

Hide Genesis Responsive Menu On Menu Item Click

This solution enables you to hide the Genesis responsive menu when any menu item in the drop down toggle menu is clicked. Once the menu item is clicked,…

Toggle Search Bar Over Site Header Menu In Genesis Child Themes

The code in this download folder enables you to add the search bar from the Monochrome Pro child theme to any other Genesis child theme. However, this code…

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.…

Slide In Vertical Nav Menu Widget For Genesis Themes With Fixed Header

This full height vertical widget area pushes the entire site container when opened. The code is an updated version of this tutorial to work with the latest Genesis…

Infinity Pro Vertical Menu

This tutorial shows you how to change the offscreen content feature to a vertical menu using the Infinity Pro child theme by StudioPress. Also includes code to push…

Add Offscreen Slide In Widget To Infinity Pro Theme

This solution enables you to add a widget area which toggles open using the ion android menu icon in the header. You can modify the code to :…

jQuery Accordion Template With Link To Close Long Items

This accordion includes a HTML link you can add to close any long items like you see in the following screenshot : When the button is clicked, the…

Modify Genesis FAQ Plugin Shortcode Functionality via Child Theme

The code in this download file enables you to modify the entire default shortcode functionality included in the Genesis Simple FAQ plugin. By default, the shortcode attributes generated…

Modify Genesis FAQ Widget

The code in this tutorial enables you to modify all FAQ Widget functionality included in the plugin via any Genesis child theme. The Genesis F.A.Q plugin includes a…

Off Canvas Push Widget For Side Menu

The code in this tutorial pushes the site container to the right when the side widget is toggled open. The solution includes an animated hamburger menu icon enabling…

Toggle Side Widget Overlay For Slide In & Out Menu

This code adds a custom widget area named Side Menu which can be toggled open/close by clicking the animated menu icon. Here's the demo video showing you exactly…

Toggle Full Content On Archives Only When Content Contains More Than 1 Paragraph

The code in this tutorial extends the code in this tutorial which enables you to dynamically add a read more / read less button to archive pages. The…

Toggle Read More Excerpts To Show Full Content On Genesis Archives

This solution enables you to dynamically add a button after the first paragraph on archive pages which slides down to reveal the full content of the article. On…

Toggle Read More Button To Show Full Content On Single Posts

This code enables you to add a Read More button which toggles the full content when clicked. When expanded the button text changes to Read Less and enables…

Accordion F.A.Q’s In Columns

You can wrap the HTML for your accordion in column classes if you want to display your F.A.Q questions & answers in 2, 3, 4 & 6 columns…

Genesis Accordion Javascript Template

Most of the accordion solutions already published here for members, use jQuery which is easier to use with WordPress as opposed to Javascript. In this tutorial, i'll provide…

Change Logo On Mobiles When Genesis Responsive Menu Toggled

The code in this tutorial enables you to display a different header image when the responsive hamburger menu icon is toggled open. Here's the demo : How It…

Add Accordion F.A.Q’s To After Entry Widget in Genesis

This solution is based on a question from a registered member who wanted to use a tutorial containing code for a f.a.q template, in a widget area. The…

Slide In Side Menu In Genesis

This code enables you to achieve the slide in menu effect in any theme. Update : Here's a newer/different method which you may find easier to work with…

Action Hooks

The tutorials in this archive contain code which enables you to hook in new content, function calls and other code using action hooks which are the 1st parameter when using add_action in a custom function.

Genesis Hook Template Tag or Function Call After Widget

This code enables you to hook a function after the last widget in any widget area. Your function or content will output within the widget area. This enables…

Genesis Hook Before Widget Title

The genesis_before_{$id}_widget_area hook enables you to hook content before the widget title, within the widgets div. All you need to do is swap out the {$id} in the…

add_action

add_action is a function which you'll see in WordPress, Genesis & other theme files. You've probably seen code in a file which looks something like this: [code] add_action(…

New Genesis 2.0 HTML 5 Loop Hooks & How To Use Them

You will need to add HTML 5 support to your Genesis child theme in order to make these new hooks work. On top of this, the old XHTML…

Using The 3rd Parameter With Action Hooks – Priority For Positioning

Once you've got your head around basic custom functions, you'll probably run into code that uses the same hook and need to add a third parameter to your…

After Header Image Tutorials

The tutorials in this archive contain code which enables you to add a image after the header in different Genesis child themes using different methods. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Use single.php Template On All Post Types In Monochrome Pro

The code in this download folder enables you to use the single.php template file with the full width after header featured image, on all post types including single…

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…

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…

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…

Essence Pro Fixed Header

The solution in this download folder enables you to make the site header in your Essence Pro theme sticky. To do this, the color of the header elements…

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

This tutorial provides the code which enables you to display a unique hero image with unique overlaying text on any page/post using the Genesis Sample child theme by…

Hero Image Behind Site Header & Menu On Front Page In Genesis Sample Theme

This tutorial enables you to add a hero image with overlaying content behind your site header and nav menu like this : Tested using the latest version of…

Show Hide Featured Image After Header On Single Posts in Monochrome Pro

This tutorial provides the instructions on how to remove the featured image after header on single posts without removing the featured image from archives in the Monochrome Pro…

Full Width Featured Image After Header On Any Screen

This download folder the code which displays your featured image, or a default.jpg image when none added, after the header in the Genesis Sample child theme by StudioPress.…

Imagely – Overlay Entry Title On Full Width After Header Featured Image At Any Screen Width

This download contains a template you select to display your featured image or default.jpg image after the header on single pages and single posts using the Imagely child…

Full Width Image After Header With Overlaying Title

This template enables you to display an image after the header on single posts and single pages like this : In this case, the featured image is displayed…

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 :…

Full Width Image Block Revolution Pro Front Page

This tutorial shows you how to make the windows image block ( first image ) added using Gutenberg in the Revolution Pro themes front page extend to the…

Refined Pro – Replace After Header Desktop Image With Different Image For Mobile Screens

This tutorial extends this tutorial by enabling you to replace the default after header image with a different image for mobiles. Here's the before ( desktop ) &…

Custom Archive Page Template With Different Hero Images in Genesis Sample Theme

This template enables you to display each archive page using a unique image behind the archive title and site header elements like this : In this example, the…

Monochrome Pro – Add Featured or Hero Image After Header On 404 Error Pages Using ACF

This download folder includes the files which enable you to show a featured or custom image added using ACF, after the header in the same style as displayed…

Monochrome Pro – Add Featured or Hero Image After Header On Single Pages Using ACF

This download folder includes the files which enable you to show a featured or custom image added using ACF, after the header on single pages in the same…

Monochrome Pro – Archive Templates For After Header Hero Image

The templates in this download enable you to add a unique image after the header in the same style as the featured image is displayed on single posts…

Gallery Pro – Add Featured Hero Image To Single Pages

This tutorial provides 2 different solutions which enable you to add the full width after header featured image to single pages in the same way they are added…

Refined Pro – Replace Slider With Image

This tutorial provides a simple solution to replace the after header slider with a static image on the front page of the Refined Pro theme by Restored 316…

Agency Pro Theme Tutorials

Tutorials in this archive relate to the modification of code and/or addition of custom functionality to the Agency Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Different Background Image On Mobiles – Agency Pro

This solution provides code which enables you to use a different background image at any screen width. [gallery columns="2" size="full" ids="71613,71614"] This way you can add a different…

How To Change The Backstretch Background Image On Specific Pages

Agency Pro and other Genesis child themes which include Backstretch, load the same background image on every page. If you want to use a different background image on…

Agency Pro – Add Unique Backstretch Image For Front Page Only

By default, the Agency Pro child theme by StudioPress includes a default image which is displayed for the background of the entire site. The image is pulled from…

Reposition Agency Pro Themes Nav Menu Before Header & Make Sticky

A member of WP Sites asked me how to reposition either the primary or secondary nav menu before the header in the Agency Pro theme. Firstly, here's the…

Make Agency Pro Themes Home Bottom Widgets Display Like Home Middle

The Agency Pro theme by StudioPress includes a widgetized front-page.php file which includes home middle and home bottom widgets display in 3 columns. The home middle and home…

Increase Agency Pro Themes Home Middle Widgets From 3 To 4 Columns

By default the Agency Pro theme by StudioPress displays 3 home middle widgets inline. In this tutorial, i'll show you how to change that to 4 columns. Code…

Display Header Right Widget Custom Menu & Social Icons In-Line

In this tutorial, i'll provide the CSS code which enables you to display both a custom menu widget and simple social icons widget inline when populated in the…

Add Agency Pro Themes Front Page To Genesis Sample Theme

The Agency Pro theme by StudioPress includes a really nice looking front page with widget areas and hover effects. In this tutorial, i'll show you how you can…

Display Agency Pro Background Image Only On Front Page

Marc from the StudioPress Community Forums asked this question recently: Does any one have a technique or advice on how best to have the background image display on…

StudioPress Agent Focused Pro Theme Tutorials

Tutorials in this archive relate to modification & customization of the Agent Focused Pro child theme by Winning Agent. The tutorials also enable you to add custom functionality and styling to this genesis child theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

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…

Custom Listings Template For Themes Using AgentPress Listings Plugin

This template enables you to display listings for any specific taxonomy term in a grid. Assumes you're using the AgentPress Listings plugin with the AgentPress Pro, Agent Focused…

Archive Templates To Display Featured Image Caption For Each Property Listing

This download folder contains 2 templates which enable you to display the featured image caption on the archive listings page. The 1st template displays the caption under the…

AgentPress Pro Theme Tutorials

Posts in this archive relate to modification & customization of the AgentPress Pro child theme by StudioPress as well as the AgentPress Listings plugin. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

How To Translate the Property Details Additional Features Text In AgentPress Pro

This code modifies the Additional Features text which displays on single listings pages when using the AgentPress Listings plugin with the AgentPress Pro theme or any other theme…

Add Icons To The AgentPress Featured Listings Widget For Beds, Baths & Property Size

This file contains the code which enables you to fully customize the AgentPress Pro featured listings widget and add custom fields with icons like this : The file…

Genesis Review & Star Rating System For Single Post Types

In this case, the template named single-listing.php enables comment authors to add a review and star rating from 1 to 5 simply by clicking the stars. This template…

Custom Fields On AgentPress Search Results Page

This search results template for AgentPress Pro enables you to display custom fields on your search results page like this : The code in this download folder (…

Add Custom Field Support To AgentPress Listings CPT

This code adds support for custom fields to any posts type enabling you to use custom fields to add content on any CPT single edit screen. You can…

Modify AgentPress Listings Plugin Property Details Class Shortcode Function

This file enables you to modify the AgentPress listings plugins property details shortcode function included in the plugins class-agentpress-listings.php file. This file is modified in your AgentPress Pro…

Add Extra Field To AgentPress Featured Listings Widget

The code in side this download folder enables you to add extra custom fields to the AgentPress Listings widget via the safety of your child theme. Here's a…

Custom Listings Template For Themes Using AgentPress Listings Plugin

This template enables you to display listings for any specific taxonomy term in a grid. Assumes you're using the AgentPress Listings plugin with the AgentPress Pro, Agent Focused…

Archive Templates To Display Featured Image Caption For Each Property Listing

This download folder contains 2 templates which enable you to display the featured image caption on the archive listings page. The 1st template displays the caption under the…

Order Property Listings by For Sale & Sold In Each State

This custom template for AgentPress Pro theme users enables you to display listings by state or any other taxonomy term. It also enables you to display the listings…

Custom Listings Template For AgentPress Pro

This template enables you to display listings by taxonomy and/or term in any order. Basically, you can sort your listings displaying them in the order you like on…

Slider Behind Site Header & Home Featured Widget In AgentPress Pro

This solution replaces the background image which that displays behind the site header and home featured widget area with a slider. The code in this tutorial produces a…

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…

Modify AgentPress Listings Property Details Meta Box

This solution creates a child class to override the parent class from a plugin via your child theme. In this case, we'll copy over the listings-detail-metabox.php file from…

Remove Send To Text Editor Buttons From AgentPress Listings Property Details Meta Box

This tutorial provides a simple solution which enables you to use CSS to remove the Send To Text Editor buttons located on the single listings admin screen. This…

Allow Users To Submit Property Listings For Review With AgentPress Listings

This code adds a custom role named User Listing which enables any user with this role to submit property listings for review by admin. The code only works…

Add Terms With Count To Menu In Genesis

The code in this tutorial enables you to hook in a list of terms and display them as menu items in a custom nav menu. You can dynamically…

Add Website Link To AgentPress Pro Featured Property Listings Widget

The code in this tutorial enables you to add custom fields to the AgentPress featured listings widget. The widget is used in the featured listings widget area on…

Add Custom Fields With Clickable Links To AgentPress Property Listings

This solution enables you to do 2 things on the single listings pages of the AgentPress Pro themes single listings pages: Add 1 or more custom fields for…

Search Filter For Genesis

This tutorial provides the solution which enables you to display your authors, staff or any type of users, in a responsive grid. It also adds a search widget…

Altitude Pro Theme Tutorials

Tutorials for customizing & modifying the Altitude Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

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.…

Overlay Text on Half of Background Image

This solution positions your widget content over half of your background image with a semi transparent background text on desktops like this : On smaller hand held screens,…

Eliminate The Altitude Pro Header Shrink On Scroll

This tutorial shows you how to remove the shrink effect on scroll in the Altitude Pro child theme by StudioPress. In this case, the shrink effect is removed…

Add Background Color To Width of Text

This tutorial provides the steps you can take to add a background color to the width of text rather than the width of the content area. There's 2…

Full Width Image After Header With Overlaying Title

This template enables you to display an image after the header on single posts and single pages like this : In this case, the featured image is displayed…

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

This version enables you to use the Altitude Pro themes front page template on unlimited pages. Unlike the older version of the template, you can import the content…

Add Smooth Scrolling To Front Page Widget Areas In Altitude Pro

This code adds smooth scrolling from your nav menu links to each widget area in the front page template of Altitude Pro. You can also use it in…

Altitude Pro Front Page Template In New Genesis Sample Theme

This post provides a update to this tutorial which includes the Altitude Pro themes front page template installed in the older version of the Genesis Sample child theme.…

Load Parent Category Template On Sub or Child Category Archive Pages In Genesis

The code in this tutorial provides a custom category template for Genesis as well as the code enabling you to load the template on any parent and child…

Load Custom Single Post Template For Specific Category & Child Categories

The template and code in the download folder enable you to customize all single posts for 1 or more categories as well as all posts assigned to child/sub…

Use Altitude Pro Themes Front Page Template On Unlimited Single Pages

This is a new version of the Altitude Pro themes front page template which you can use on unlimited pages without adding any CSS or other code. Update…

Altitude Pro Change Front Page 1 Widget To Display 3 Widgets Inline

This tutorial helps you change the Altitude Pro themes front page 1 widget area display 3 widgets inline like this : You can also use this solution to…

Add MP4 Video Background To Front Page 1 Widget In Altitude Pro Versions 1.1.3

This solution enables you to add a fullscreen responsive WordPress hosted MP4 video to the front page 1 widget background in Altitude Pro version 1.1.3 & newer. Note…

Image Section Height Changes In Altitude Pro Front Page

A member asked me today how to change the height of the background images in the Altitude Pro themes front page widgets. Here's the question from a member…

Altitude Pro Full Width Front Page Widget Areas In Genesis Sample Theme

This post provides a fresh copy of the Genesis Sample child theme by StudioPress which includes the front page widget areas from the Altitude Pro theme pre installed.…

Unique After Header Images On Any Page In Altitude Pro

The code addition and modification in this tutorial enables you to show a replica of the front page 1 widget on any page or post with a unique…

Add Widget 8 & 9 To Altitude Pro

This is an alternative method to adding new solid section & image section widgets to the Altitude Pro theme for front page 8 & 9. Firstly, lets take…

Altitude Pro Front Page Template On Other Pages

This new & improved template version of the Altitude Pro themes front page can be used on unlimited single pages of the Altitude Pro theme. Update : This…

Altitude Pro – 2 Ways To Add Simple Social Icons To Nav Menu In Site Header

This tutorial provides the code for solutions which enable you to add the Simple Social Icons next to the primary or secondary nav menu in the header of…

Altitude Pro – Make Front Page Site Header Background Static

By default, the front page site header background is transparent and changes to black on scroll unlike all other pages where the site header background is black by…

Ambiance Pro Theme Tutorials

Tutorials in this archive contain solutions related to the modification & customization of the Ambiance Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Add Avatar Profile Picture To Single Pages In Ambiance Pro

This tutorial provides the code modification which adds your avatar image to single pages just like single posts which is coded by default. Based on this unanswered forum…

Ambiance Pro Front Page Like Single Post

This front page template displays exactly the same as a single post without the author box, single post navigation and comments. It does include pagination to the next…

Add Image After Header Using Customizer

This tutorial for a client and members is a more complicated version of the previous post about how to add a image after the header in the Ambiance…

Full Width Image After Header on Ambiance Pro Themes Index Page

This tutorial for a client and members, enables you to add a full width image below the header on the index or front page of the Ambiance Pro…

Animation

The tutorials in this archive enable you to use PHP code and/or CSS to animate elements in Genesis child themes. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided/included for members.

Countdown Timer For Genesis

This jQuery countdown timer can be added anywhere in any Genesis or WordPress child theme. It generates a live countdown in days, hours, minutes & seconds. Demo Video…

Blinking Dot Animation

This code adds a blinking dot before the title in a responsive text box like you see in this animated gif. The blinking dot, displays perfectly inline with…

Animate Elements In Grid Columns

This tutorial contains the code which enables you to display images and text in a 3 columns grid and animate the images. The images on page load, rotate…

Typewriter Text Effect In Genesis

This solution uses pure CSS to add a typewriter effect to your text. The code enables you to set the speed and number of steps for typing the…

How To Install Animate CSS Animations Using jQuery

This tutorial provides the code which enables you to install and use Animate CSS using jQuery. You can use animate simply by adding the CSS to your style…

jQuery Number Animation – Counter To Count Up To A Target Number

This code enables you to display exactly what you see in the following image: It creates a fun counter or in this example, a row of 4 counters.…

Aspire Pro Theme Tutorials

The tutorials in this archive relate to the modification, customization and addition of custom functionality for the Aspire Pro child theme for Genesis. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Add MP4 Video Background To Front Page 1 Widget Area in Aspire Pro

Aspire Pro includes a background image behind the front page 1 widget area by default. This tutorial provides the solution which removes that background image and replaces it…

Replace Image With Video Background in Aspire Pro Front Page Widget 1

This solution shows you how to replace the background image behind the front page 1 widget area of the Aspire Pro theme. Update: Try this solution 1st as…

Atmosphere Pro Theme Tutorials

The tutorials in this archive relate to the modification of default functionality and features included in the Atmosphere Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

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…

Checkerboard Style Featured Content in Genesis

This template includes a widget area which you can use to add any number of Genesis Featured widgets which display page or post content in a mobile responsive…

Responsive Image After Header On Single Pages in Genesis

This post contains 2 code snippets which enable you to add a unique image after the header on any single page. Here's how the 2 solutions work :…

Using jQuery To Change Height At Any Screen Width

These jQuery code snippets enable you to control the height of a div or the height of a background image at any screen width. The following video shows…

Atmosphere Pro Set Height of Front Page 1 Image

The front page 1 background image size is set in the atmosphere-pro > js > front-page.js file using the following jQuery located between lines 12 - 22 :…

Unique After Header Images On All Pages In Atmosphere Pro

This tutorial provides the code which enables you to add a unique image after the header on all page types using the Atmosphere Pro child theme by StudioPress.…

Add Slider To Front Page of Atmosphere Pro

This tutorial provides the code you can use to add a slider to the front page of the Atmosphere Pro child theme by StudioPress. The code is dependant…

Genesis Author Box Tutorials

Tutorials in this archive contain code which enables you to modify & customize the author box functions in Genesis. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Only Show Profile Box On Author Archive If User Has Valid Gravatar In Genesis

This code checks if the author has a Gravatar image and displays the author box before the loop on the author archive page of any Genesis powered website.…

Add User Profile Details To Author Archive Page in Divi

The code in this download folder adds the users profile details before the loop of posts on the author archive only if the user has a valid Gravatar.…

Custom Avatars In Any WordPress Theme

The unique code in this download folder enables you to change the user profile picture for their avatar if desired, otherwise, a Gravatar is shown using their email…

Custom Avatar In Genesis Author Box

The code in this download folder provides a unique way of changing the default Gravatar hosted avatar with a custom image added via the Edit Profile admin page…

Code To Show Multiple Author Boxes In Genesis – No Plugin Required

You can display multiple author boxes in any Genesis child theme using a plugin like Co Author Plus. However, what if you don't want to install another plugin?…

Multiple Author Boxes In Genesis Using Co Authors Plus

The code in this download folder enables you to add multiple author boxes on single posts and pages in any Genesis child theme. The code is dependent on…

Exclude or Include Genesis Author Box On Specific Single Pages

By default, the author box in Genesis doesn't display on single pages. However, you can add the following PHP code to your child themes functions file to add…

Remove Genesis Author Box From Single Post

Copy & paste this code to the end of your child themes functions file and swap out the post id in the conditional tag. [code] add_action( 'get_header', 'remove_authorbox_single_post'…

Remove Author Box In Genesis If ( Bio ) Description Empty

The code in this tutorial enables you to remove the author box from single posts when the users bio is empty. Based on this question from a member…

Genesis Author Box Shortcode

This shortcode enables you to add the Genesis author box within the content area of a post or page or anywhere else outside your wp editor. Here's a…

Display Genesis Author Box Only If ACF Checkbox Ticked

There's at least 2 ways you can show the author box on single posts depending on whether a checkbox you have added to all single posts generated by…

Add or Remove Author Box Only When Custom Field Has Value

These code snippets enable you to add the author box only when a custom field has been added as well. The author box is added in the default…

Custom Author Box Code for Genesis

This code enables you to build your own author box independant of the author box included in Genesis. Here's an example of what it can look like: The…

How To Add Social Buttons Inline With Author Box Title In Genesis

Here's the code i used to display AddThis social follow buttons inline with my author box title. The code assumes you have already loaded AddThis Javascript using one…

Remove Genesis Author Box From All Posts In One or More Categories

This code enables you to remove the author box after single posts in one or more categories. Please copy ALL the code from the view raw link in…

Change Position Of Author Box in StudioPress Themes

Need to move your author box to a different position in Genesis? This code enables you to reposition your author box from the default position to any other…

Re-Positioning Shareaholic Sharing Buttons After Author Box

In this tutorial, i'll provide the PHP code i tested which enables you to control the position you want both your sharing buttons and related posts to display.…

Style Author Box In Genesis – Beginners Guide

In this beginners guide for Genesis users, i'll show you how easy it is to style your author box. First step is to enable your author box. Go…

StudioPress Author Pro Theme Tutorials

Tutorials for customizing & modifying the Author Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

How To Reposition Author Pro Plugins Book Details In Sidebar

The code in this download folder enables you to display your book cover and details in the sidebar rather than the content area in Author Pro without modifying…

Add Sidebar To Genesis Author Pro Single Books Template

This template enables you to change the layout on the single book page when using the Author Pro child theme by StudioPress. [gallery columns="2" size="full" ids="102378,102379"] You can…

Modify Author Pro Plugins Single Book Details

The code in this download folder enables you to modify the entire default output for the single book details & description for both the front end output and…

Author Pro Featured Books Widget In Unlimited Rows

This solution enables you to add unlimited rows of featured books widgets to the Author Pro front page 2 widget area as seen in the following screenshot :…

Change Genesis Author Pro Archive Columns

This tutorial shows you how to change the Genesis Author Pro archive featured image size and display your books in 2, 4 or any number of columns rather…

Change Author Pro Featured Image Size For Single Books

This solution enables you to change the featured image size used to display the book covers in the Author Pro child theme by StudioPress. Once you do that,…

Different Book Cover Image on Author Pro Book Archives

The templates in this download folder enable you to use a 2nd image on any archive page types used in Author Pro. If none added, the default featured…

How To Modify The Genesis Author Pro Plugin CPT Labels & Args

This download contains 3 code snippets which enable you to modify the code in the Genesis Author Pro plugin via the safety of your child theme thereby avoiding…

Custom Link Featured Image For Book Cover In Author Pro Theme

The code in this download enables you to change the book cover link for the featured image. If no custom link added, the image will be linked to…

Remove Links From Genesis Author Pro Featured Books Widget Featured Image, Title & Button Links

This solution enables you to remove the link from the featured image, title and button output by the Genesis Author Pro Featured Book widget. Once you install the…

Add Buttons To Author Pro Book Archives

This code, added to your child theme, enables you to add buttons to each book on any of the taxonomy archive pages used in Author Pro. When the…

Resize Header Image Area in Author Pro Theme

I was asked by a member to add a header image to the Author Pro theme by StudioPress which is why i wrote this post. ( Copy of…

Add Taxonomy to Author Pro

This code enables you to add one or more custom taxonomies to the Author Pro child theme by StudioPress. Once you add the code to your child themes…

Authority Pro Theme Tutorials

Tutorials in this archive contain solutions related to the modification & customization of the Authority Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

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. [gallery columns="2" size="full" link="file"…

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…

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. The template enables you to use unique content…

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…

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…

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…

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…

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,…

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…

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…

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…

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…

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…

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…

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…

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…

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…

Background Image Tutorials

The tutorials in this archive relate to usage and modification of background images in Genesis child themes. You'll find code which helps you add/modify and customize default & custom background images. You'll also find more tutorials relating to background images which aren't tagged with layout by using the search widget in the sidebar. All code as well as support for PHP code is guaranteed for members.

Image Behind Header In Twenty Twenty One Theme

This code adds your background image behind the site header in Twenty Twenty Two like this : Your background image will always cover the site header container at…

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…

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,…

Replace Genesis Block Background Image With Video On Monochrome Pro Front Page

For use with the Monochrome Pro child theme for Genesis, this tutorial provides the code which enables you to replace the background image in the first block on…

Overlay Text on Half of Background Image

This solution positions your widget content over half of your background image with a semi transparent background text on desktops like this : On smaller hand held screens,…

Full Width Featured Image After Header On Any Screen

This download folder the code which displays your featured image, or a default.jpg image when none added, after the header in the Genesis Sample child theme by StudioPress.…

Imagely – Overlay Entry Title On Full Width After Header Featured Image At Any Screen Width

This download contains a template you select to display your featured image or default.jpg image after the header on single pages and single posts using the Imagely child…

Different Background Image On Mobiles – Agency Pro

This solution provides code which enables you to use a different background image at any screen width. [gallery columns="2" size="full" ids="71613,71614"] This way you can add a different…

Add Existing Background Image To Existing Widget Area – Workstation Pro Front Page

This tutorial enables you to use existing background images as the background to existing widget areas. In this case, we'll use the Featured Section 1 Image as the…

Slider Behind Site Header & Home Featured Widget In AgentPress Pro

This solution replaces the background image which that displays behind the site header and home featured widget area with a slider. The code in this tutorial produces a…

Different Image On Mobile Orientation Change

The solution in this download folder enables you to remove the default desktop background image and replace it with a different image for mobile screens. Not only can…

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…

Infinity Pro – Code To Change Front Page 1 Image On Mobiles

This solution provides a similar solution to the code in this tutorial however uses a different method to replace the background image on mobiles. [gallery columns="2" size="full" ids="70785,70786"]…

Infinity Pro – Different Front Page 1 Background Image For Mobiles

This solution enables you to change the Front Page 1 background image on mobiles. [gallery columns="2" size="full" ids="70780,70779"] In this case, the code executes at 600px width removing…

Infinity Pro – Add Image Overlay To Front Page 1 Widget Background

This solution enables you to add a color overlay to the front page 1 background image in the Infinity Pro child theme by StudioPress. Here's an example of…

Float Gravity Forms Over Front Page 1 Background Image In Infinity Pro

This tutorial floats the Gravity Forms widget to the right of the hero text in the Infinity Pro themes front page 1 background image. Requires the use of…

Overlay Gravity Forms On Backstretch Widget Background Image

This solution overlays a gravity forms widget on the front page 1 widget area in Digital Pro like this : The code produces a responsive solution for all…

Add Background Image To Widget Area Using CSS

This CSS enables you to add a background image to any widget area in any theme. In this case the image has been uploaded to the WordPress Media…

Essence Pro – Add Background Image To Footer CTA Widget

This code adds a full width background image to the Essence Pro themes Footer CTA widget area like this : [gallery columns="2" size="medium" ids="68517,68516"] The image is added…

Essence Pro – 2 Ways To Change The Category Background Image For The Hero Section On Specific Archives

Both solutions in this tutorial enable you to change the background image for the hero section on any category archive page. [gallery columns="2" size="medium" ids="68482,68481"] As seen in…

Beautiful Pro Theme Tutorials

The tutorials in this archive include code which enables you to add to, change or modify the default features and functionality included in the Beautiful Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Change Logo Size In Customize Header Image

This tutorial shows you how to change the image size in the Beautiful Pro child theme by StudioPress. This is the standard method used in most Genesis child…

After Header Feature Box With Subscribe Form & Background Image

This tutorial enables you to add a widget area after the header which you can use for a featured box. You can add a text widget with some…

Beautiful Pro Theme: Display Site Header Banner Image On Home Page Only

In this very short and simple tutorial, i'll provide one line of code you can add to your Beautiful Pro theme by StudioPress which answers this question asked…

Add Beautiful Pro Themes After Header Banner Image To Genesis Sample Theme

If you like the after header banner image on the new Beautiful Pro theme by StudioPress, i'll show you how to put it on your own site? On…

3 Ways To Display Different After Header Images In Beautiful Pro Theme

In this tutorial, i'll show you 3 ways to conditionally display different banner images after the header of the Beautiful Pro theme by StudioPress. Here's the question on…

Genesis Blog Page Template Tutorials

The tutorials in this archive enable you to modify the default functionality & add custom functionality when using the blog page template in Genesis. You'll also find more tutorials related to customization of the Genesis blog page template by using the search form on the primary sidebar. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Add Blog To Yoast Breadcrumbs On Single Posts In Genesis

This code enables you to add your blog page title to the breadcrumbs in any Genesis child theme when using yoast breadcrumbs. Yoast SEO also enables you to…

Add Blog To Breadcrumbs On Single Posts In Genesis

This code adds the blog name to your single post breadcrumbs when using the Genesis Blog Page Template. We go from this : To this : Note :…

WPEngine Style Blog Page With 2 Columns & Sidebar Then 3 Columns

This download folder includes a custom blog page template like the WPEngine blog page : The template includes code to : Display the first 3 posts in 2…

Magazine Pro Templates To Display Different Archive Page Types In Equal Height Columns

The templates in this download folder enable you to display your entries in equal height columns for any page type including : Your front page Your posts page…

Full Width Blog Page Template In Maker Pro

This template enables you to create a full width blog page in Maker Pro. Here's the default archive width on the left and the full width layout on…

Remove Blog Page Title From Essence Pro

This code removes the entry title from the blog page in the Essence Pro child theme. [gallery columns="2" size="full" ids="71991,71992"] Demo Video # Shows the page title on…

Genesis Blog Page Template Grid With Equal Height Entries – Wellness Pro

This template displays your posts in columns with equal height for each entry regardless of : Title length Content length Featured image size The template code is written…

Genesis Blog Page Template With Equal Height Posts In Grid – Essence Pro

The template in this download folder enables you to customize the blog page in any Genesis child theme. In this case, the template is coded to - Full…

Genesis Blog Page Template In Columns – Essence Pro

This blog page template, tested using the latest version of Genesis which has removed the default blog template, enables you to : Display posts in 1,2,3,4 & 6…

How To Use The Old Blog Page Template In Genesis

Genesis developers have changed the blog page template logic in Genesis meaning the old Blog page template no longer works. Because of this change, there's no Blog option…

Blog Page Templates Like StudioPress

The templates in this download folder produce exactly what you see in the following screenshot and demo video : Based on this question from a member. A grid-layout…

Display Entry Meta Below Featured Image On Blog Page

This code displays the post info and entry meta from the entry footer underneath the featured image thumbnail on the blog page in Genesis. In this case, the…

Blog Page Template Showing Entry Title, Featured Image & Excerpt In Columns

This custom blog page template shows what you see in the following screenshot : Tested using the Infinity pro child theme by StudioPress, this template will work in…

Monochrome Pro – Archive Templates For After Header Hero Image

The templates in this download enable you to add a unique image after the header in the same style as the featured image is displayed on single posts…

Blog Template To Show Latest Post On Top of Entries In 2 Columns

This custom blog page template show the latest post full width ( 2 columns ) and then all other post underneath in 2 columns like this : Note…

Remove Blog Page Title In Genesis

Add the following PHP code to the end of your child themes functions file: [code] remove_action( 'genesis_before_loop', 'genesis_do_blog_template_heading' ); [/code] You can also add the code directly to…

Show Blog Page Title On 1st Page Only

This code removes the title from the Genesis blog page template on all paginated pages except the first page. Based on this question : Is there a way…

Remove Post Info & Entry Meta From Blog Page Template

This tutorial provides 2 solutions which remove the entry meta in the entry header ( Post Info ) & the entry meta in the entry footer from the…

Image After Header On Genesis Blog Page Template

This template enables you to display a responsive image after the header. You can add the image named default.jpg to your child themes images folder or via the…

Lifestyle Pro Blog Page Template Like Home

This template displays your posts exactly the same as the front page template in the Lifestyle Pro child theme by StudioPress. Here's the blog page template with the…

Breadcrumbs

The tutorials in this archive provide code which enables you to modify & customize the default breadcrumbs in any Genesis child theme.

Add Blog To Yoast Breadcrumbs On Single Posts In Genesis

This code enables you to add your blog page title to the breadcrumbs in any Genesis child theme when using yoast breadcrumbs. Yoast SEO also enables you to…

Add Blog To Breadcrumbs On Single Posts In Genesis

This code adds the blog name to your single post breadcrumbs when using the Genesis Blog Page Template. We go from this : To this : Note :…

Remove Category From Breadcrumbs In Single Posts Using Genesis

This PHP code, once added to the end of your child themes functions file, will remove the category crumb from all single posts in any Genesis child theme.…

Reposition Breadcrumbs On Single Posts In Genesis

This template enables you to remove the default position of the breadcrumbs and add them back in any Genesis hook position. In this case, we use the genesis_after_entry_content…

Remove Genesis Breadcrumbs Conditionally

This code enables you to use conditional tags to remove the Genesis Breadcrumbs from any page or post. Once set in Genesis > Theme Settings > Breadcrumbs: Here's…

Shortcode For Breadcrumbs

This PHP code creates a very basic shortcode for displaying breadcrumbs in Genesis. The reason i coded this is because a member wanted to float the breadcrumbs over…

How To Add Breadcrumbs Using Yoasts SEO Plugin in Any Theme

Yoast's WordPress SEO plugin includes breadcrumbs which require manual installation of a template tag. After installing the plugin, go to Internal Links and enable Breadcrumbs: Once you've enabled…

Change Breadcrumbs In Genesis

You can easily enable or disable breadcrumbs from displaying on posts, pages, archives and your home page using the Genesis > Theme Settings > Breadcrumbs: You can also…

Breakthrough Pro Theme Tutorials

Tutorials in this archive contain solutions related to the modification & customization of the Breakthrough Pro child theme by StudioPress. The tutorials also enable you to add custom functionality to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Change The Height Of The Hero Section In Breakthrough Pro

This solution enables you to change the height of the hero section and size of the hero title in Breakthrough Pro like this : [gallery columns="2" size="full" ids="72125,72126"]…

Remove The Hero Title From The Front Page Hero Section In Breakthrough Pro

This solution enables you to remove the hero title from the hero section on the front page of the Breakthrough Pro child theme by StudioPress. If you go…

Breakthrough Pro – Change Size of Featured Image On Single Posts

This tutorial enables you to change the width of the featured image displayed on single posts from the default size of full width to any other size. In…

Breakthrough Pro Front Page Template As Page Template

This template enables you to create unlimited pages exactly like the front page of the Breakthrough Pro child theme by StudioPress. Watch the following demo video to see…

Breakthrough Pro Custom Footer CTA Images

This solution enables you to replace the default above footer CTA image with a custom image on any post or page type. If no unique image added, the…

Brunch Pro Theme Tutorials

Tutorials in this archive contain solutions related to the modification & customization of the Brunch Pro child theme by Feast Design Co. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Overlay Title Description OR Caption On Featured Image Hover With Grayscale In Brunch Pro

The code in this tutorial adds a hover overlay to all featured images displayed using the Brunch Pro themes custom Featured Posts widget. The code also changes the…

Display Genesis Featured Posts In Horizontal Grid With Overlay Title On Hover

This tutorial shows you one way to use the Genesis Featured Posts widget to display posts in horizontal columns like you see in the Brunch Pro child theme…

Brunch Pro Front Page As Page Template

This template is an exact copy of the Brunch Pro themes front page template and can be used on any single page. The template is coded with unique…

Multiple Featured Images Per Post

This tutorial provides the code which enables you to add a 2nd featured image to any post. You can then display the image side by side, inline with…

BuddyPress

Posts in this archive relate to the use of the BuddyPress plugin with the Genesis theme framework.

Link Post Author Name to BuddyPress Profile Page

Both solutions enable you to modify the post author link in the entry meta inside the entry header to link to your BuddyPress profile page. In the 1st…

Link Author Avatar To BuddyPress Members Profile Page

This code adds the author avatar in the entry header and links the avatar image to the members profile page. You can change the hook to change the…

Business Pro Child Theme Tutorials

Posts in this archive relate to modification & customization of the Business Pro child theme for Genesis. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Featured Posts With Pagination In Widget Area Using Business Pro

This coded solution produces a responsive grid of posts in equal height with pagination displayed in the front page 2 section on the front page of the Business…

Cafe Pro Theme Tutorials

Tutorials for customising & modifying the Cafe Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

How To Use a Different Background Image On Each Page Header In Cafe Pro

This tutorial shows you how to modify the Cafe Pro child theme by StudioPress so you can use unique background images on different page & post headers. Based…

Cafe Pro Slide Show Behind Site Header

This tutorial provides the code which enables you to replace the site header image with a slide show on the front page. The slideshow displays full width of…

Add More Widget Areas for Solid & Image Sections To Cafe Pro Front Page

This tutorial shows you how to replicate widget areas for both solid and image sections in the Cafe Pro themes front page template. Demo Video The 2 new…

Add Slider in Header of Cafe Pro Theme

This tutorial provides a solution which enables you to add a responsive slider in replace of the header image in the Cafe Pro child theme by StudioPress. This…

Centric Pro Theme Tutorials

Tutorials for customizing & modifying the Centric Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Add Centric Pro Scroll Down Arrow To Parallax Pro

This tutorial shows you how to add the down arrow from the Centric Pro child theme to the Home Section 1 widget area in the Parallax Pro child…

Add Full Screen Slider To Home Widget 1 In Centric Pro

This solution enables you to use a slider like Soliloquy or any other slider as the background to the home-widgets-1 widget area in Centric Pro. Unlike this solution,…

Add Soliloquy Background Slider Using Backstretch In Centric Pro

The code in this tutorial enables you to use Backstretch to display the Soliloquy slider behind the 1st widget and header in Centric Pro like this : Demo…

Add Image Slider To Centric Pro Home Widget 1 Background

The code addition and modification in this tutorial enables you to replace the background to the home widget 1 with a slider like this : Based on this…

Typed Text Widget Content Using jQuery

Typed.js enables you to use Javascript or jQuery to display typed text. You can also hard code the text within your script which you can do using this…

Animated Typed Text

Typed.js is a Javascript library you can install in any WordPress theme. It enables you to generate typed text/html within any existing div or simply by hooking in…

How To Remove jQuery Script On A Mobile Device Or Specific Screen Width?

This tutorial shows you 2 ways to prevent jQuery from working at a specific screen width. The tutorial is written in response to this question from a member.…

Custom Page Template Exactly The Same As The Centric Pro Themes Front Page

I was asked by a member of WP Sites this question which i'll provide the solution for in this post: Hi Brad, I would like to create in…

Child / Sub Categories

The tutorials in this archive include PHP code which enables you to modify and customize the use of child categories and sub categories in Genesis child themes. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Child Categories Grid For Themes Using Get Template Part

This template for themes using get_template_part() like Twenty Twenty and most other parent themes, generates a responsive grid containing a image & child taxonomy title as seen in…

Load Parent Category Template On Sub or Child Category Archive Pages In Genesis

The code in this tutorial provides a custom category template for Genesis as well as the code enabling you to load the template on any parent and child…

Load Custom Single Post Template For Specific Category & Child Categories

The template and code in the download folder enable you to customize all single posts for 1 or more categories as well as all posts assigned to child/sub…

Add Image Upload To Edit Category Page

This code enables you to add a image upload field to all Edit Category pages which also includes Edit category pages for child categories. You can also use…

List Child Categories of Parent Category With Image

This template enables you to display a grid of all child categories for 1 parent category. By default, the template displays the child category name and a image…

Category Gallery Template With Links To Subcategories

This tutorial provides the template and CSS which enables you to display posts from each sub category in a 2,3,4 or 6 column grid like you see in…

Remove Sub Categories From Genesis Loop Archives

The 1st code snippet in this tutorial enables you to modify the Genesis loop while maintaining the default markup used to display all archives. You can use this…

Template To Display Posts From Specific Sub or Child Categories

This template enables you to display a list of sub categories with the name of the sub category followed immediately by all posts attached to the sub category…

Show Child Categories On Parent Category Page

This code displays a list of all child or sub categories of the parent category like this in the sidebar: You can change the hook to any other…

Template To List All Child or Sub Categories of One Parent Category in Genesis

This template enables you to display a list of all child categories for the one parent category and updates dynamically after you add more child categories to any…

Child Theme

Tutorials in this archive generally include access to download free child themes that work with different parent themes. You'll find child themes for genesis, iThemes, Elegant Themes ( including Divi ) and for each default WordPress theme starting with Twenty Eleven right through to the latest default theme included in every WordPress installation.

How To Make a Divi Child Theme

You can download and install the zip file at the end of this post once you have installed the Divi parent theme. The download contains 2 files :…

Child Theme For Twenty Twenty

This free child theme for Twenty Twenty enables you to store your custom code like CSS, PHP & jQuery so it's easy to find and doesn't get lost…

Child Theme For iThemes

iThemes already includes a setting which enables you to generate a new child theme simply by clicking a button. See the following screenshot which shows you the setting:…

Child Theme for Genesis – Free Download

Most new child theme Developers simply download the free Genesis default theme rather than create their own. Its easier to modify an existing child theme than create your…

Child Theme for Twenty Fifteen

This child theme should be installed like any other theme after the Twenty Fifteen parent theme is installed. The child theme doesn't include any custom code and is…

Child Theme For Elegant Themes

Simply click this button to download the free Divi child theme. The Divi child theme has been created for use with the Divi parent theme by Elegant Themes.…

Free Child Theme for Twenty Thirteen (2013 Custom)

2013 Custom is a free child theme for Twenty Thirteen, the latest default theme for WordPress. Its mobile responsive and highly regarded as the best coded default theme…

Free Twenty Twelve Child Theme 2012C

If you plan on customizing a free theme, Twenty Twelve would have to be one of the best to go with. That's the reason i've decided to spend…

Twenty Eleven Child Theme for WordPress – Free Download

The default theme for WordPress, Twenty Eleven is one of the most popular free themes as its already included in every new WordPress installation & update. The only…

How To Make A Child Theme

Making a basic child theme is a lot easier than you think. But why would you need your own child theme? If you have made any design changes…

Comments

Tutorials in this archive contain code which enables you to create your own list of comments or modify existing comments functions. The code uses get_comments and WP_Comment_Query. Other functions included in these tutorials include get_comment_date, get_comment_link and get_comment_author_link.

Show Videos in WordPress Post Comments

By default, adding the embed code or a link to a YouTube video in a comment form, won't display your video because the oEmbed discovery for video tags…

Using get_comment_date & get_comment_time In A Custom Comments Loop

When using get_comments or WP_Comment_Query to code your custom comments loop, you can add the date and time using any format strings WordPress. In this case, we're using…

Open Comments On All or Any WordPress Post Type Globally

Add this code at the end of your functions file or template to open comments. Works in any theme. [restrict subscription="3" message='Click here to access free tutorials'] Download…

2 Ways To Modify The Leave a Comment Text in Genesis Post Info

Both code snippets in this download folder enable you to modify the "Leave a Comment" text which displays in the post info entry header when no comments have…

Redirect Comment Authors Based On Date

The 1st code snippet in the download folder redirects your comment authors to a specific page on weekends only. The 2nd snippet in the download redirects your comment…

Load Comments On Click In Genesis

This code enables you to pre load any number of comments and then load more comments by any number on button click. In this example, 2 comments load…

Customize The Post Authors Comments

This tutorial provides several methods which enable you to style or modify the default comment author if they are also the post author. The methods include using CSS…

Conditionally Remove Leave a Comment Link In Genesis

This code enables you to remove the leave a comment link based on the comment count. In this example, the comment link is removed from the blog page…

Remove All HTML Tags From Comment Content Text In WordPress

A premium user asked how to remove links from comments which is the reason for publishing this code. Add the following PHP code to your child themes functions…

Remove No Follow From Comment Author Link & Comment Content Text Area Links

The code snippets in this tutorial remove the default rel="nofollow" from links added in the comment content area as well as the comment author link. You can use…

Unlink Comments Link On Archives In Genesis

The code in this tutorial unlinks the comment count which uses the get_comments_link() function inside the post_comments shortcode so it doesn't link to single posts from archives. The…

Hide Comments For Unregistered Users

This code enables you to remove the comments form and comments list for logged out users. Based on this question from a member of the Genesis community: I…

Template With Pagination To Get Comments From All Posts

This page template for Genesis displays all comments from all posts. You can also control which comments are displayed if needed and paginate the comments list using any…

Page Template For All Comments in Genesis

This template adds a new option to the Template drop down menu in the Page Attributes meta box located on all Edit Page screens. The template displays: The…

How To Modify The Output of Recent Comments Widget Default Parameters

This tutorial enables you to copy and paste code into your functions.php file to change the value(s) for any of the parameters used in the Recent Comments widget…

How To Display A Custom Comments Loop

This tutorial provides the code you simply copy and paste into your functions file to display any comments anywhere in any theme. One example would be to display…

Remove Comments Form & Comments List For Logged Out Users – Plugin

This plugin removes both the comments form and all the comments for logged out users. To view the comments and submit comments, you must be logged in. [restrict…

Modify Comment Form Default Fields

Recently i was hired by a web designer to provide custom coding for their clients comment form. The client wanted to change the order of the input fields,…

Add Comments Form On Single Custom Post Type Pages

Generally, single pages assigned to a custom post type don't normally include a comment form. Update : This solution is no longer needed as Genesis now includes support…

How To Remove Allowed HTML Tags Text After Comment Form Fields

One of the first things I noticed when converting my Genesis child theme from XHTML to HTML 5 was the changes to the comment form. By default, WordPress…

Cook'd Pro Theme Tutorials

Tutorials in this archive contain solutions related to the modification & customization of the Cook'd Pro child theme by Shay Bocks. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Cook’d Pro – Show 2 Featured Images Inline For 1st Post In Home Top Widget Area

This tutorial includes the code which enables you to display 2 images inline in the home top widget area of the Cook'd Pro child theme by Shay Bocks.…

Custom Fields

This archive includes tutorials which include different ways to code and use custom fields in any WordPress theme as well as Genesis only child themes. Includes templates which enable you to display different ACF & ACF Pro field types in Genesis. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Add Custom Field Content Before & After Products – WooCommerce

This PHP code enables you to add custom content before and/or after your WooCommerce products. You can use this code to add any type of content including custom…

Custom WC Product Title On Orders for Checkout, PayPal, Credit Card & Email Order Receipts

The code in this download folder adds a custom field to the WooCommerce Product Data meta box on the Single Product edit screen. This field enables you to…

How to add text to the bottom of category and tag archive pages

This code enables you to add content to the end of your archive pages like this. The content is added using the Advanced Custom Fields plugin. If none…

Custom Avatars In Any WordPress Theme

The unique code in this download folder enables you to change the user profile picture for their avatar if desired, otherwise, a Gravatar is shown using their email…

Custom Avatar In Genesis Author Box

The code in this download folder provides a unique way of changing the default Gravatar hosted avatar with a custom image added via the Edit Profile admin page…

Code Star Rating In WordPress

The download folder in this tutorial contains code which enables you to add a star rating system to your WordPress theme without the need to install more plugins.…

Dynamic Rating System With Stars & Bar Graph

This WordPress code enables you to add your own hand coded star rating system to your child theme without relying on any plugins. The system dynamically generates :…

Style Each Post With A Different Background Color

This code adds a color picker to the Edit Post screen enabling you to set the background color for each post ( Not the front page archive page…

Inline Style Nav Menu Items For Each Category Using walker_nav_menu_start_el

The code in this download folder adds a color picker to your Edit Category Pages which you can set to style each category nav menu item a different…

Color Picker To Style Post Meta

The code in this download folder produces exactly the same result as this tutorial without the need to use a plugin like ACF or add CSS. You can…

Inline Style Post Category Links Differently Using Color Picker

The code in this download folder enables you use the color picker on the Edit Category page to style your post category links different colors. Once you install…

Open Specific Button Links In a New Window Or Same Window

The PHP code in this download folder enables you to add one or 2 buttons on all single posts & pages without modifying the HTML for each button…

Custom Block To Select Individual Entries Unique On Each Single Post

The code in this download folder adds a custom block which enables you to select individual entries from posts, pages & custom post types displayed in any number…

Select Individual Featured Posts In Genesis

This code enables you to choose individual posts from a drop down menu on any Edit Post screen for display in any Genesis hook position. In this case,…

How to Remove Header Background Image for Essence Pro

This download Folder contains the code which enables you to remove the Essence Pro themes header hero image on any single post, page or custom post type. [gallery…

How To Add A Genesis Meta Box For Custom URLS

This download folder contains code which adds a text field on your single post/page/cpt edit screen for internal or external links. Genesis includes several functions to make it…

Add Buttons With Custom Text & URLs After Essence Pro Entry Header On Single Pages

This code enables you to add 1 or 2 buttons after the entry title on any single page using different text & button links for each buttons like…

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…

Display The Same Featured Image On Genesis Archive Pages Overriding Single Post Thumbnails For Each Taxonomy

This code snippet enables you to add a default featured image on each Edit Category admin page which is displayed on category archives even when a featured image…

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…

Custom Logo

The tutorials in this archive relate to the use of the custom-logo function add_theme_support( 'custom-logo' ); which is added via functions.php and uses the Site Identity setting in the customizer as opposed to the add_theme_support( 'custom-header' ); function which uses the Site Header setting in the customizer. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Logo Inline With Mobile Menu In Genesis Child Themes

You can add this CSS to the end of your Genesis child themes style.css file to move your mobile menu inline with your custom logo or site title…

Vertical Align Title Area & Menu On Desktops & Mobiles

The solution in this download folder enables you to add a logo of any size and vertically align it with your nav menu like this : This vertically…

Center Site Header Elements On The Same Line

The code in this download folder perfectly centre's your site title or logo next to your nav menu as well as vertically aligned on desktops like this example…

How To Add Your Site Title In Your Nav Menu

This code enables you to add your site title within your nav menu like this : In this screenshot, the site title displays within the primary nav menu…

Change Custom Header Image On Mobiles In Gallery Pro

The solution in this download folder enables you to display a custom header image on smaller screens. As seen in the demo video, your header image will resize…

Menu Logo Menu Using CSS Grid In Newer Versions of Genesis Sample Theme

This tutorial adds a custom left and right menu that work with your custom logo and display inline using CSS grid. If you're using a new version of…

3 Ways To Change Logo On Scroll Using jQuery In Genesis Sample Theme

The code in this download folder contains 3 different methods which enable you to use jQuery with PHP to change your image on scroll or using any other…

Essence Pro Logo Menu Search Perfectly Inline

This CSS enables you to display your logo, menu & search form inline like this : You can also display the header elements in any order like logo…

Menu Logo Menu In Essence Pro

This solution enables you to modify the default Essence Pro site header elements to display a menu logo menu like this : Centers either the site title or…

Align Logo Left With Menu Right In Essence Pro

This tutorial shows you how to reposition the primary nav menu to the right inline with the custom logo on the left using the Essence Pro child theme…

Different Logo For Posts In Each Category – No Plugin Required

This code snippet enables you to use a different logo for posts in each category as well as the category archive page, no plugin required. If you prefer…

Custom Logo For Single Posts In Each Category & Category Page

This code snippet enables you to display a unique logo on both single posts in each category as well as the category archive page itself. The plugin is…

Custom Logo For Each Category Archive Page

This code snippet enables you to add a different custom logo for each category archive page in any Genesis child theme. The code is dependent on the use…

Change Logo Size On Scroll

This solution enables you to change your logo size on scroll on desktops only. When mobile ( less than 960px width ), a smaller version of your logo…

Menu Logo Menu In Genesis Sample Themes Header

This solution adds left and right menus inline with your custom logo like this : Tested using version 2.10 of the Genesis Sample child theme by StudioPress which…

Scroll Remove Utility Bar Before Header In Genesis Sample Theme

This code in this download folder adds a utility bar before the default site header in the Genesis Sample theme. In this case, it adds a logo, widget…

Add Utility Bar Before Site Header Removed On Scroll – Eleven40 Pro

This code adds a 2nd header before the default header. The 2nd header includes a clickable logo, smaller than the default header image as well as a search…

Change Logo To Site Title When Responsive Menu Displays & Add Logo To Mobile Menu

This solution replaces your custom logo with the site title at the same time the Genesis responsive menu is displayed. Your logo will then display within the responsive…

Add Site Title After & Inline With Logo In Genesis Sample Child Theme

This solution displays your site title after your custom logo like this : Watch the following demo video to see how it works on desktops & mobiles :…

Menu Bar Before Header Which Displays Smaller Logo On Scroll

The code in this download folder creates a 2nd site header with custom links before the default site header in the Genesis Sample child theme by StudioPress. The…

Custom Sidebar

The tutorials in this archive include code which enables you to remove both the primary and secondary default sidebars in Genesis and add a custom sidebar. The custom sidebar can be hand coded or created using the Genesis Simple Sidebars plugin. The custom sidebar can be loaded via the child themes functions file or called directly in a template.

Show Different Content Aware Sidebars On Paginated Archive Pages

The code in the download folder enables you to use PHP code to display unique sidebars on different paginated archive pages. Only works with the Content Aware Sidebars…

Different Sidebars On Paginated Archive Pages

This code enables you to display a unique primary sidebar on all paginated archive pages. You can use the Genesis Simple Sidebars plugin to create different primary sidebars…

Load Different Primary Sidebar On Single Post Paginated Pages

This tutorial provides the code which enables you to load a different custom primary sidebar widget area when using the next page quick tag to break up long…

Genesis Custom Secondary Sidebar

This tutorial provides 3 different methods which enable you to: Remove the default secondary sidebar Replace the secondary sidebar with a custom 2nd sidebar using code Replace the…

Custom Sidebar for Custom Layout in Genesis

This tutorial provides the code which adds a custom sidebar widget area to this existing tutorial which shows you how to create a custom layout setting in any…

Add Custom Genesis Sidebar To WooCommerce Archive Product Page Template

This PHP code enables you to add a hand coded custom sidebar to a custom WooCommerce archive product page template in any Genesis child theme. Installation simply requires…

3 Ways To Add Custom Sidebars To Single Custom Post Type Pages

In Genesis child themes, there are at least 3 ways you can add your own custom sidebar. In this post, i'll provide 3 solutions which enable you to…

Genesis Front Page Template With Custom Sidebar

This front-page.php file includes a custom primary sidebar which only displays on the front page. Your primary sidebar will display on all other pages and posts. Put this…

Add Custom Genesis Sidebar To WooCommerce Single Product Page Template

This PHP code enables you to add a hand coded custom sidebar widget area to a custom WooCommerce single product page template in any Genesis child theme. Installation…

Add Custom Sidebar & Remove Primary Sidebar in Genesis

This code enables you to replace your primary sidebar with a custom sidebar widget area. You can add this PHP code to any template file like a: single.php…

Hand Coded Custom Home Page Sidebar For Genesis

I've already shown you how to add a custom sidebar to the front page of any Genesis child theme using the Genesis Simple Sidebars plugin. But what if…

Add Custom Sidebar On Home Page of Any StudioPress Theme

There's several different ways to add custom sidebars to your theme. You can use a plugin like Genesis Simple Sidebars Or you can hand code a custom sidebar…

Using Genesis Simple Sidebars Plugin To Add New Sidebar To Custom Taxonomy Archive Page

In this post, we'll look at adding a custom sidebar to a custom taxonomy archive page. This post assumes you have added a custom post type to your…

WP Customize

You'll find dozens more tutorials related to the customizer using search. Tutorials in this archive include code which modifies default or add custom functionality to Genesis child themes.

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…

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…

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…

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…

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…

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 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…

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.…

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…

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,…

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…

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…

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.…

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…

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 :…

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. You can upload your…

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. Demo Video # Shows…

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…

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.…

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…

Daily Dish Pro Theme Tutorials

Tutorials in this archive contain solutions related to the modification & customisation of the Daily Dish Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Add a Custom Image Size In The Header Of The Daily Dish Theme

By default the Daily Dish Pro theme by StudioPress enables you to add a logo in your header which is 400px width by 80px in height. You can…

Digital Pro Theme Tutorials

Tutorials in this archive contain solutions related to the modification & customization of the Digital Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Overlay Gravity Forms On Backstretch Widget Background Image

This solution overlays a gravity forms widget on the front page 1 widget area in Digital Pro like this : The code produces a responsive solution for all…

Digital Pro Adjust The Height of Front Page 1 Hero Image

This tutorial provides the instructions to modify the height of the front page 1 hero image in the Digital Pro child theme by StudioPress. Demo Video Shows how…

Digital Pro Front Page 1 Widget On All Pages

This tutorial enables you to replicate the front page 1 widget area on all pages. The code also creates a unique widget area so you can display different…

FallBack Image Replacing Video On Smaller Mobile Screens

Unfortunately, videos don't play perfectly on smaller mobiles but there is a solution. Add a image or animated gif once your website is reduced to a specific width.…

Digital Pro – Front Page 1 MP4 Video Background

This tutorial provides the code which enables you to display a MP4 video you upload to your WordPress Media Library as the background image to the front page…

Digital Pro – Add Smooth Scrolling To Nav Menu Links

This tutorial enables you to add smooth scrolling to all the nav menu links in Digital Pro. The solution uses jQuery which is loaded via the Digital Pro…

Digital Pro – Remove Smooth Scrolling From Button Click In Front Page 1 Widget Area

This tutorial enables you to remove the smooth scrolling effects from the front page widgets in Digital Pro. Based on this question from a client: When I click…

Digital Pro – Add New Widget Areas To Front Page With Different Widget Background Images

This tutorial shows you how to modify the Digital Pro themes front-page.php template file so it displays a total of 8 widget areas. The code also adds 3…

How To Add A New Widget Area To Digital Pro Themes Front Page

Need to add more widget areas to your themes front page? Generally there's 3 steps. Let's take a look at how to add another widget area in the…

Digital Pro – Replace Front Page Widget Background Image With Slider

This tutorial enables you to add a slideshow of images to the background of any widget area using backstretch. Backstretch will dynamically resize your images to fit the…

Replace Front Page 1 Widget Area With Slider in Digital Pro

This tutorial provides the solution which enables you to replace the front page 1 widget area with background image in the Digital Pro child theme, with a slider.…

Digital Pro Custom Page Template With Widget Background Image

This template can be used on any page and adds i widget area after the header. You can add a background image to the widget area via the…

Divi Theme Tutorials

The tutorials in this archive relate to the modification/customization of the Divi theme & Divi builder by Elegant themes.

How to add text to the bottom of category and tag archive pages

This code enables you to add content to the end of your archive pages like this. The content is added using the Advanced Custom Fields plugin. If none…

Add User Profile Details To Author Archive Page in Divi

The code in this download folder adds the users profile details before the loop of posts on the author archive only if the user has a valid Gravatar.…

Custom Avatars In Any WordPress Theme

The unique code in this download folder enables you to change the user profile picture for their avatar if desired, otherwise, a Gravatar is shown using their email…

How To Make a Divi Child Theme

You can download and install the zip file at the end of this post once you have installed the Divi parent theme. The download contains 2 files :…

Show Author Avatar On Custom Single Post Template In Divi

The code in this download folder displays the author avatar ( user profile picture ) perfectly inline with the post meta using CSS grid. The author avatar is…

Custom Archive Page Template For Child Categories In Divi

The code in this download folder includes a template and custom functions to load the template on specific child category archives in Divi. In this example, we change…

20% Discount on Divi 3.0 ( Limited Time Only )

Divi 3.0 due out this Wednesday at 11am PST, introduces a complete new “visual builder” (also referred to as a “front-end editor”) that has been re-built from the…

Extra, The Ultimate Magazine WordPress Theme, Powered by The Divi Builder

Disclosure: This is a sponsored post paid for by Elegent Themes. Extra showcases the power of the Divi Builder by extending it to work in new and exciting…

Divi 2.4 Released – Biggest Update in The History of Divi

Version 2.4 of Elegant Themes popular drag and drop theme Divi is now available. This is by far the biggest update in the history of Divi with over…

Add Custom Post Type With Taxonomy Type Settings Page To Divi Theme

The PHP code in this tutorial enables you to create both a new custom post type and add support for the simple creation of unlimited CPT taxonomy types.…

Divi by Elegant Themes: Change Footer Links & Style Social Icons

If you didn't already know, Divi is a new parent theme created by Elegant themes which is apparently their most flexible theme. I hear its been selling like…

Child Theme For Elegant Themes

Simply click this button to download the free Divi child theme. The Divi child theme has been created for use with the Divi parent theme by Elegant Themes.…

Eleven40 Pro Theme Tutorials

Tutorials in this archive contain solutions related to the modification & customization of the Eleven40 Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work in the theme it is tested in as shown in the demo images & videos and may need modifying for use in other genesis child themes. Installation of all code as well as support for PHP code is provided for members.

Show Author Avatar Inline With 2 Lines Of Post Info In Genesis

The code snippets in this download folder enable you to display the author avatar inline with your custom post info as well as display the occupation of the…

Display Post Modified Date If Updated Otherwise Display The Original Post Date In Genesis

The code in this download folder enables you to display the post modified date if the post has been updated otherwise, the original date is shown. This example…

Add Utility Bar Before Site Header Removed On Scroll – Eleven40 Pro

This code adds a 2nd header before the default header. The 2nd header includes a clickable logo, smaller than the default header image as well as a search…

Eleven 40 Pro Responsive Image After Header

This tutorial provides the code which adds a responsive image after the header to the Eleven 40 Pro child theme by StudioPress. The image scales down as the…

Center Logo Above Centered Nav Menu In Eleven40 Pro

The solution in this tutorial enables you to center your logo or site title text above your nav menu which is also centered. Here's an example of what…

Enterprise Pro Theme Tutorials

The tutorials in this archive contain code which enables you to modify existing functionality and styling in the Enterprise Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

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…

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…

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…

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…

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…

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…

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.…

Entry Meta

This archive includes posts related to the entry meta in the entry header, sometimes referred to as the post info as well as the entry meta in the entry footer sometimes referred to as the post meta. The entry meta in the entry header includes links for the post author, comments and the post date. The entry meta in the entry footer includes links for the post tags and post categories. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Color Picker To Style Post Meta

The code in this download folder produces exactly the same result as this tutorial without the need to use a plugin like ACF or add CSS. You can…

Inline Style Post Category Links Differently Using Color Picker

The code in this download folder enables you use the color picker on the Edit Category page to style your post category links different colors. Once you install…

Exclude Specific Category Links From Post Meta In Genesis Entry Footer

This code once added to your child themes functions file enables you to remove one or more categories from the post_categories shortcode output in the entry footer on…

Add Post Category Slug To Genesis

This code, once pasted to the end of your child themes functions file, displays the category slug in the entry footer for each post. The code creates a…

Unlink All Archive Links For Each Entry On Per Post Basis

This archive template enables you to unlink all post links on a per post basis. By default, all links are disabled including links for your : Featured image…

Add How Long Ago A Post Was Published To Genesis Post Info

This code creates a custom shortcode which you can use to display how long ago a post was published. For example, this screenshot shows the post was published…

Show Author Avatar Inline With 2 Lines Of Post Info In Genesis

The code snippets in this download folder enable you to display the author avatar inline with your custom post info as well as display the occupation of the…

Display Post Modified Date If Updated Otherwise Display The Original Post Date In Genesis

The code in this download folder enables you to display the post modified date if the post has been updated otherwise, the original date is shown. This example…

3 Ways To Manually Update Genesis Post Date With The Modified Date On Individual Posts

This tutorial provides 3 different solutions which enable you to change the post date for each individual post in Genesis child themes. The 1st solution uses the ACF…

2 Ways To Modify The Leave a Comment Text in Genesis Post Info

Both code snippets in this download folder enable you to modify the "Leave a Comment" text which displays in the post info entry header when no comments have…

Customize The Post Info In The Genesis Featured Posts Widget

The code in this download folder enables you to modify the default value output for all default parameters included in the Genesis Featured Posts widget. In this case,…

How To Remove Post Category Links Conditionally

The code in this tutorial shows you how to modify the category links in the entry footer using conditional tags. The links are generated by the post categories…

Modify Genesis Post Categories Shortcode

The 3 code snippets in this tutorial show you how to modify the default output of the category links in the entry footer. These links are generated by…

Link Post Author Name To Twitter Account In Genesis

This code enables you to link the post author name in the post info ( entry header ) to the authors Twitter account as seen in the following…

Add Twitter Link To Genesis Post Info

This code creates a link to your Twitter account in the post info like this : There's 3 code snippets to make this happen. The 1st snippet adds…

Display Entry Meta Below Featured Image On Blog Page

This code displays the post info and entry meta from the entry footer underneath the featured image thumbnail on the blog page in Genesis. In this case, the…

Remove Leave a Comment Link From Genesis Post Info

The following PHP code enables you to remove the leave a comment link from posts like this : [gallery columns="2" size="full" ids="70617,70616"] Copy & paste the code to…

Magazine Pro – Move Entry Date Back To The Default Position In The Post Info

This solution enables you to reposition the entry date back to the default position inline with the post info on the front page of the Magazine Pro child…

Conditional Genesis Post Info

This tutorial provides 2 different ways to modify what entry meta is displayed in the post info. If you want to modify the post info conditionally, you can…

Remove Entry Title Over Essence Pro Hero Image

This tutorial provides 2 ways to remove the entry header elements including the entry title & entry meta from Essence Pro. You can use the following CSS rule…

Essence Pro Theme Tutorials

Posts in this archive relate to modification & customization of the Essence Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Slider In Essence Pro Header Hero – New Version

This tutorial, written for the latest version of Essence Pro, includes the code which enables you to replace the header hero image on the front page with a…

Aweber Email Form Styled Like Genesis Newsletter Block

This tutorial provides the code which enables you to add your Aweber email signup form in the header hero section on Essence Pro theme front page like this…

Add Email Optin Form Block To Hero Header In Essence Pro

By default, the Essence Pro themes front page header hero section displays 2 buttons. In this tutorial, you'll get : A custom reusable block you can import. And…

Essence Pro Center Header Elements on Mobiles

Copy & paste this CSS to the end of your Essence Pro themes style.css file to center all header elements on smaller screens. [gallery columns="2" size="full" ids="108117,108118"] Code…

Open Specific Button Links In a New Window Or Same Window

The PHP code in this download folder enables you to add one or 2 buttons on all single posts & pages without modifying the HTML for each button…

How to Remove Header Background Image for Essence Pro

This download Folder contains the code which enables you to remove the Essence Pro themes header hero image on any single post, page or custom post type. [gallery…

Add Buttons With Custom Text & URLs After Essence Pro Entry Header On Single Pages

This code enables you to add 1 or 2 buttons after the entry title on any single page using different text & button links for each buttons like…

Unlink All Archive Links For Each Entry On Per Post Basis

This archive template enables you to unlink all post links on a per post basis. By default, all links are disabled including links for your : Featured image…

Essence Pro Fixed Header

The solution in this download folder enables you to make the site header in your Essence Pro theme sticky. To do this, the color of the header elements…

How To Modify The Responsive Menu Text In Genesis

This simple solution enables you to change the name of the responsive menu from the default text which is MENU to something else. All you need to do…

Add Header Right Widget For Social Icons To Essence Pro

This download folder includes the code which adds a widget area to the header right position. In this case, we add the Simple Social Icons widget in the…

Remove Featured Image From Hero Header Not Archives In Essence Pro

This download folder contains the modified file which enables you to remove the featured image which displays in the header hero position when added on single posts in…

Essence Pro Logo Menu Search Perfectly Inline

This CSS enables you to display your logo, menu & search form inline like this : You can also display the header elements in any order like logo…

Category Archive Entries In Equal Height Columns

The template in this download folder display your posts in a perfect 3 column grid regardless of title length and featured image height like this : The above…

Menu Logo Menu In Essence Pro

This solution enables you to modify the default Essence Pro site header elements to display a menu logo menu like this : Centers either the site title or…

Category Archive Posts In 3 Columns Essence Pro

By default, the Essence Pro theme displays entries in 2 columns on archive pages. In this download, you'll find the template which enables you to display category archive…

Reduce Height of Essence Pro Hero Image Excluding Front Page

This tutorial shows you how to modify the height of the header hero image on all pages excluding the front page. Here's a example showing the default header…

Align Logo Left With Menu Right In Essence Pro

This tutorial shows you how to reposition the primary nav menu to the right inline with the custom logo on the left using the Essence Pro child theme…

Remove Blog Page Title From Essence Pro

This code removes the entry title from the blog page in the Essence Pro child theme. [gallery columns="2" size="full" ids="71991,71992"] Demo Video # Shows the page title on…

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. You can upload your…

Executive Pro Theme Tutorials

Tutorials in this archive contain solutions related to the modification & customisation of the Executive Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Template For Multiple Custom Taxonomy Type Loops

This template displays the custom taxonomy type name then lists all entries for each taxonomy you add to your custom post type like this: Update : Here's a…

Expose Pro Theme Tutorials

Tutorials in this archive contain solutions related to the modification & customization of the Expose Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Expose Pro – Replacing Site Header Avatar With Larger Logo

The Expose Pro child theme by StudioPress is coded to display the admins avatar before the site title like this: If you'd like to replace the avatar with…

Genesis Featured Image Tutorials

This archive contains tutorials which relate to the modification/addition of featured images in genesis child themes and other WordPress themes. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for registered users. This archive does not contain all tutorials which relate to the use of featured images. To view all tutorials related to featured images, please use the search box with the keyword featured image.

Use single.php Template On All Post Types In Monochrome Pro

The code in this download folder enables you to use the single.php template file with the full width after header featured image, on all post types including single…

How To Add Related Posts Between Paragraph Content

This code enables you to pull related posts from your database and display them in a grid within the content of your post or page using a shortcode…

How To Add Featured Image Before 1st H2 Tag 2 Ways In Any WordPress Theme

The code snippets inside this download folder enable you to add your featured image on single posts before the 1st H2 Tag or any other HTML tag. This…

Display The Same Featured Image On Genesis Archive Pages Overriding Single Post Thumbnails For Each Taxonomy

This code snippet enables you to add a default featured image on each Edit Category admin page which is displayed on category archives even when a featured image…

How To Show Featured Images in a Lightbox Using Genesis

The templates in this download folder enable you to use jQuery to show your featured images on archives and single posts in a lightbox modal which pops up…

Unlink All Archive Links For Each Entry On Per Post Basis

This archive template enables you to unlink all post links on a per post basis. By default, all links are disabled including links for your : Featured image…

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. [gallery columns="2" size="full" link="file"…

Add Sidebar To Navigation Pro Single Posts Template

The way Navigation Pro is coded, doesn't let you change the layout on single posts because of this line of PHP code located around line 31 in image-functions.php.…

Remove Featured Image On A Per Post Basis In Navigation Pro

This tutorial includes the code which enables you to remove the featured image after the header on any single post in Navigation Pro without removing the archive image.…

Remove Featured Image From Hero Header Not Archives In Essence Pro

This download folder contains the modified file which enables you to remove the featured image which displays in the header hero position when added on single posts in…

Show Hide Featured Image After Header On Single Posts in Monochrome Pro

This tutorial provides the instructions on how to remove the featured image after header on single posts without removing the featured image from archives in the Monochrome Pro…

Custom Archive Page Template For Genesis & Dynamik

This archive page template enables you to add custom content before and after entries on all taxonomy type archives including category and tag archive pages. It also enables…

Video With Featured Image Poster In Genesis

This single post template displays your video before the entry title on single posts only. You can add a unique video URL for each single post and display…

Featured Videos On Archive Pages In Genesis

The code in this download folder enables you to replace the featured image with a video on archive pages like this : The code ( as seen in…

Different Featured Image For Archive Pages in Genesis

The code in this download folder enables you to add a special featured image which only displays on archives. The image you add will be different to the…

Change Genesis Author Pro Archive Columns

This tutorial shows you how to change the Genesis Author Pro archive featured image size and display your books in 2, 4 or any number of columns rather…

Change Author Pro Featured Image Size For Single Books

This solution enables you to change the featured image size used to display the book covers in the Author Pro child theme by StudioPress. Once you do that,…

Overlay Title Description OR Caption On Featured Image Hover With Grayscale In Brunch Pro

The code in this tutorial adds a hover overlay to all featured images displayed using the Brunch Pro themes custom Featured Posts widget. The code also changes the…

Full Width Featured Image After Header On Any Screen

This download folder the code which displays your featured image, or a default.jpg image when none added, after the header in the Genesis Sample child theme by StudioPress.…

Imagely – Overlay Entry Title On Full Width After Header Featured Image At Any Screen Width

This download contains a template you select to display your featured image or default.jpg image after the header on single pages and single posts using the Imagely child…

Filter & Sort Tutorials for Genesis

All code, tutorials and theme customization/modification relates to the use of filters to fine tune the display of posts & custom post type entries using different methods. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for registered users.

Filterable YouTube Video Grid For Genesis

The templates in this tutorial enable you to display YouTube videos in a grid which can then be filtered using any criteria you setup. In this case its…

Genesis Filterable Portfolio Templates

The templates in this download enable you to create a portfolio custom post type with custom taxonomies. In this example, the code generates a portfolio CPT and several…

Filterable Portfolio in Genesis

The code in this tutorial enables you to filter all items in your custom post type and all existing and future items added to your CPT custom taxonomy…

Infinity Pro – Sort & Filter Team Members

This tutorial provides the code which enables you to filter team members who are listed using the Team Page template. The team template is included in the Infinity…

How To Filter Posts By Category

This tutorial shows you how to filter your posts by category on any archive page type in Genesis without reloading the archive page. Firstly, here's 1 example of…

Add Foodie Pro Recipe Index Template To Genesis Sample Theme

This tutorial provides the code which enables you to add the recipe index template from the Foodie Pro theme to the Genesis sample child theme by StudioPress. Here's…

Filter Archive in Genesis

This post includes a copy of the Genesis Sample child theme by StudioPress which includes Isotope & 3 filters for your archives. You can filter the home and…

Filter Portfolio in Genesis

This video shows you how to create a filterable portfolio in 3 minutes using Genesis. Update : This new tutorial provides the Genesis templates which enable you to…

Basic Isotope Image Filter for Clickable Links

This tutorial shows you the most basic way to use isotope with simple clickable links rather than checkboxes. Here's the short video showing you exactly what the code…

Shuffle & Filter Portfolio Items Using Isotope Checkboxes

This tutorial produces exactly what you see in the following video. Includes all the jQuery, PHP, CSS and HTML which filters a portfolio style columns of images using…

Foodie Pro Theme Tutorials

All code, tutorials and theme customization/modification relates to the Foodie Pro child theme for Genesis by Shay Bocks. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Show Popular Posts By Views Count Using Foodie Pro Featured Posts Widget

By default, the Foodie Pro featured posts widget does NOT include a option to display posts by the number of times a post has been viewed. However, you…

Foodie Pro – Reposition Search Box Before Nav Menu

By default, the search form in Foodie Pro is added after the nav menu items like this. This solution enables you to add the search box before the…

Reduce Site Header Size When Header Image Decreases On Mobile Screens

This solution resizes the site header as the screen width reduces. In some themes like Foodie Pro, the header image is coded to using background-size: contain; ( Demo…

Foodie Pro Full Width Site Header

This solution enables you to modify the site header in Foodie Pro. Make the site header full width Display the site title or header image ( logo )…

Moving Post Info Above Title in Foodie Pro Featured Posts Widget

This tutorial shows you how to move the post info in the entry header above the entry title like this : Go to foodie-pro > lib > widgets…

Change Logo On Mobiles When Genesis Responsive Menu Toggled

The code in this tutorial enables you to display a different header image when the responsive hamburger menu icon is toggled open. Here's the demo : How It…

Use Custom Image In Foodie Pro Featured Posts Widget For Recipe Index

The code in this premium tutorial for paid members enables you to use a custom image when using the Foodie featured Image widget in the Recipe index page.…

Add Foodie Pro Recipe Index Template To Genesis Sample Theme

This tutorial provides the code which enables you to add the recipe index template from the Foodie Pro theme to the Genesis sample child theme by StudioPress. Here's…

Foodie Pro Mobile Responsive Full Width Header Image

This tutorial provides the step by step instructions ( Fully Supported for members ) which enable you to add a mobile responsive, full width header image to the…

Resize Foodie Pro Header Image

This beginners tutorial, enables you to change the code in Foodie Pro so it displays your header image or logo perfectly. You'll need to change both the PHP…

Add Pagination to Home Page In Foodie Pro

This tutorial includes 3 ways to add pagination to the front page of any Genesis child theme. The code is tested in the Foodie Pro child theme. By…

Foodie Pro Remove Grid

Foodie Pro includes a custom grid function which you can use to display posts in columns. Via the Content Archive settings in the WordPress customizer, you can set…

Foodie Pro Featured Posts Widget – Manually Add Which Posts You Want Featured

The code in this solution is based on this question from a member of the StudioPress Community Forums: I'm wondering if there's a way to edit the 'Foodie…

Foodie Pro Archive Page Template With Columns

This template can be used in any genesis child theme. It has been tested on the Foodie Pro child theme by Shay Bocks in response to the following…

Foodie Pro Responsive Header Right Nav Menu Modification

This tutorial for Foodie Pro theme owners shows you how to make the header right nav menu display at the very bottom of the site header without any…

Full Screen Width Header in Foodie Pro

This tutorial shows you how to make the site header span the full width of the screen like this: Update : Here's the tutorial for the new version…

4 Column Archive Recipes Template – Featured Image & Title Only

I was hired recently to create category archives for a recipe website like this: The client wanted to keep the primary sidebar and squeeze in 4 featured images…

Genesis Footer Widgets

Tutorials in this archive relate to the modification/removal and addition of footer widgets in Genesis child themes. The code in every tutorial is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Conditional Footer Widgets In Genesis Child Themes

This download folder contains the code which enables you to display a completely different set of footer widgets on any post/page. This way you can display the default…

Remove Footer From Front Page In Genesis Child Themes

This PHP code removes the footer & footer markup from Genesis child themes. All you need to do is create a new file named front-page.php and add the…

Add Flexible Footer Widgets To Monochrome Pro

This tutorial provides several methods which enable you to add any number of footer widgets to the Monochrome Pro child theme by StudioPress. Here's the result showing the…

Remove Footer Widgets From Any Page In Genesis

This tutorial provides 2 ways to remove the footer widgets in any Genesis child theme. Based on this question from a member of the StudioPress community forums :…

Remove Sub Footer Widgets From Front Page of Outreach Pro

A member of the Genesis community asked this question on the StudioPress community forums : I just installed outreach pro. I want to remove from just the home…

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…

Modify Genesis Footer Widgets

Genesis includes code which registers footer widget areas based on the number of widget areas the user wishes to create with add_theme_support(). If you look in any Genesis…

Custom Flexible Mobile Responsive Footer Widget Columns for Genesis

This code enables you to very easily add custom footer widgets in 2,3,4,5 or 6 columns using Genesis. Here's an example using 3 columns: Normally in Genesis, all…

How To Remove Footer Widgets From Single Posts In Genesis

In this short and simple post, i'll give you the code which you can add to a new file named single.php and upload to the root directory of…

Display Outreach Pro Sub Footer Widgets On Front or Home Page Only

The Outreach Pro child theme from StudioPress includes 2 sub footer widgets of different widths which display on all pages of your site. Robert asked me this question…

Add Outreach Pro Sub Footer Widgets To Agency Pro Theme

Nanci asked me this question recently: Outreach Pro (just released) has a really cool widget on the home page that flows through to every page in the theme:…

Change News Pro Themes 6 Footer Widgets To 3

The News Pro theme by StudioPress includes 6 custom footer widgets which you may want to change to 3. Here's what the 6 default widgets look like on…

Remove Footer Or Widgets On Specific Pages

You can remove your footer and or footer widgets using several methods. The best way is to write a custom function and add the code to the end…

Gallery Pro Theme Tutorials

Tutorials for customizing & modifying the Gallery Pro child theme. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Change Custom Header Image On Mobiles In Gallery Pro

The solution in this download folder enables you to display a custom header image on smaller screens. As seen in the demo video, your header image will resize…

Gallery Pro Sticky Footer

This tutorial provides the CSS which enables you to make the Gallery Pro themes footer sticky. All you need to do is copy & paste the CSS from…

Show Site Description After Header Image In Gallery Pro

This tutorial shows you how to display the site description ( tagline ) when a header image ( logo ) has been added. Generally, when you add a…

Gallery Pro – Add Featured Hero Image To Single Pages

This tutorial provides 2 different solutions which enable you to add the full width after header featured image to single pages in the same way they are added…

Add Responsive Header Right Widget Area To Gallery Pro

This tutorial provides the solution which adds back the header right widget area to the Gallery Pro child theme by Bloom and floats the header image to the…

Add Different Full Width Images & Unique Content on Sub Pages In Gallery Pro

The code in this tutorial extends this solution for the Gallery Pro child theme for Genesis and enables you to : Add a unique background image on each…

Add Full Width Image on Sub Pages In Gallery Pro

The code in this tutorial adds a widget after the header on all pages excluding single posts and the front page. The widget includes a full width background…

Gallery Pro – Add Full Width Responsive Slider

This tutorial enables you to add a full width responsive slider images to the background of any front page widget area. In this demo, the slide show is…

Drop Down Full Screen Overlay Search Widget

This tutorial provides the code which enables you to display your search widget or any other widget in the middle of your screen like this. The code adds…

Generate Pro Theme Tutorials

Posts in this archive relate to modification & customization of the Generate Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for registered members.

Remove Featured Image From Specific Archive Entries

This code adds a checkbox to all single post edit screens which enables you to remove the featured image from any/all archive pages. Here's the demo video showing…

Custom Block Tutorials for Genesis

Tutorials in this archive relate to the creation & development of custom blocks using PHP code & CSS. Custom blocks are added to the Genesis blocks list in the Gutenberg editor for WordPress and only work with Genesis child themes & the Genesis Custom Blocks plugin by StudioPress. The code is guaranteed to work as shown in the demo images & videos. Installation of all code as well as support for PHP code is provided for paid members.

Add Email Optin Form Block To Hero Header In Essence Pro

By default, the Essence Pro themes front page header hero section displays 2 buttons. In this tutorial, you'll get : A custom reusable block you can import. And…

Replace The Image With Video In Monochrome Pro

This solution enables you to add a responsive video with cover text which overlays the video on all screen sizes. In this case, we replace the background image…

Change Post & Page Grid Class in Genesis Blocks

By default, Genesis Blocks wraps the featured image ( as seen in the following images ) in the gb-block-post-grid-image class when using the Genesis Post & Page Grid…

Modify HTML Tags In Genesis Blocks

This code enables you to change the HTML tags ( opening & closing ) in the Genesis accordion block or any other Genesis or WordPress block. In this…

Custom Block To Select Individual Entries Unique On Each Single Post

The code in this download folder adds a custom block which enables you to select individual entries from posts, pages & custom post types displayed in any number…

Genesis Custom Block for Related Posts

The block files in this download folder enable you to create a custom block for related posts using WP_Query in Genesis child themes. You can insert the related…

Genesis Featured Page Widget Tutorials

The tutorials in this archive contain code which enables you to modify the default functionality and output of the Genesis Featured Page widget. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

How To Show The Caption Description & Title On Hover Using The Genesis Featured Page Widget

The code in this download folder enables you to overlay the posts entry title or image caption or image description which is then displayed on image hover when…

Front Page Template Showing Genesis Featured Pages & Posts In Responsive Grid

This front page template includes widget areas you can populate with both the Genesis Featured Page and Genesis Featured Posts widgets which will be display in a grid…

Display Genesis Featured Page Widgets In Columns Using CSS Grid

The CSS to display featured page widgets and featured posts in grid columns is different. This CSS enables you to display 4 featured page widgets, added to 1…

Checkerboard Style Featured Content in Genesis

This template includes a widget area which you can use to add any number of Genesis Featured widgets which display page or post content in a mobile responsive…

Modify Genesis Featured Page Widget

This code enables you to modify all the default functionality of the Genesis Featured Page widget. Once you install the file in your child theme, you can modify…

Modify Genesis Featured Page Widget Title

This code enables you to modify the widget Title when using the Genesis Featured Page widget. It doesn't modify the page title output in the featured page widget,…

Genesis Featured Page Widget – Open Links In A New Window

The code in this tutorial enables you to change all the links generated by the Genesis Featured Page widgets so they all open in a new widow on…

Remove Link From Genesis Featured Page Widget Titles

This code enables you to remove the link from the page title when using the Genesis featured page widget. The code won't remove the link from the featured…

Genesis Featured Posts Widget Tutorials

This archive includes tutorials which contain code enabling you to modify the default functionality used the Genesis featured posts widget or add your own custom version of the Genesis featured posts widget to your child theme with custom functionality. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Featured Posts With Pagination In Widget Area Using Business Pro

This coded solution produces a responsive grid of posts in equal height with pagination displayed in the front page 2 section on the front page of the Business…

Show Popular Posts By Views Count Using Foodie Pro Featured Posts Widget

By default, the Foodie Pro featured posts widget does NOT include a option to display posts by the number of times a post has been viewed. However, you…

Overlay Title Description OR Caption On Featured Image Hover With Grayscale In Brunch Pro

The code in this tutorial adds a hover overlay to all featured images displayed using the Brunch Pro themes custom Featured Posts widget. The code also changes the…

Add Star Rating To Genesis Featured Posts Widget

The code in this download folder adds an extra setting to the Genesis Featured Posts widget to Show Star Rating for each post. You can then add a…

Genesis Featured Posts Widget Setting To Show or Exclude Sticky Posts

This download folder contains the code which adds a extra setting to the Genesis Featured Posts widget enabling you to either : Only show sticky posts Exclude all…

Show Most Popular Posts With The Genesis Featured Posts Widget

This tutorial provides the solution you need to display the most popular posts by number of visits ( views ) using the Genesis featured posts widget, By default,…

How To Overlay Title & Featured Image Attachment Details Using Genesis Featured Posts Widget

The code in this download folder enables you to overlay the posts entry title or image caption or image description which is then displayed on image hover when…

Front Page Template Showing Genesis Featured Pages & Posts In Responsive Grid

This front page template includes widget areas you can populate with both the Genesis Featured Page and Genesis Featured Posts widgets which will be display in a grid…

Custom Read More Text For Genesis Featured Posts Widget

By default, the Genesis Featured Posts widget only enables you to display the same read more text for every post displayed in the widget. In this download folder,…

Custom Featured Image For Genesis Featured Posts Widget

This tutorial provides the code which enables you to add a custom image for each post displayed using the Genesis featured posts widget. By default, the featured posts…

Link Genesis Featured Posts Widget Featured Image & Title To Custom URL’s

The code in this download folder enables you to change the link for the featured image and title when using the Genesis Featured Posts widget. This way you…

Modify The Genesis Featured Custom Post Type Widget

The file in this download folder enables you to modify the code for Genesis Featured Custom Post Type Widget via your child theme. Once you complete installation, you…

Customize The Post Info In The Genesis Featured Posts Widget

The code in this download folder enables you to modify the default value output for all default parameters included in the Genesis Featured Posts widget. In this case,…

Modified Genesis Featured Posts Widget Featured Image & Title Links

This tutorial is based on the following question from a registered user : I have gone through this tutorial on modifying the functionality of the featured posts widget.…

Checkerboard Style Featured Content in Genesis

This template includes a widget area which you can use to add any number of Genesis Featured widgets which display page or post content in a mobile responsive…

Add Custom CSS Class To Featured Image In Genesis Featured Posts Widget

This solution enables you to add a custom class to the default class included in the featured image output using the Genesis featured posts widget. The code enables…

Conditionally Wrap Genesis Featured Posts Widget Title In Span Tags

This code snippet enables you to add a span class to the Genesis Featured Posts widget title. You can also add the span conditionally so its only added…

Reposition Title Before Image In Genesis Featured Posts Widget

This tutorial provides the modification which moves the featured image after the entry title in the Genesis Featured Posts widget. Tested using the Magazine Pro child theme by…

Modify Genesis Featured Posts Widget

This code enables you to customize all the default functionality of the genesis featured post widget. And, you can customize the widget via the safety of your child…

Genesis Popular Posts In Columns

This tutorial provides the CSS & CSS for Media Queries for 2 different solutions which enable you to display popular posts in columns. You can use a plugin…

Genesis Markup

The tutorials listed in this archive contain code which enables you to modify or add to the default output of different markup attributes in Genesis like classes and schema. The default code is located in the genesis > lib > functions > markup.php file.

Change Post & Page Grid Class in Genesis Blocks

By default, Genesis Blocks wraps the featured image ( as seen in the following images ) in the gb-block-post-grid-image class when using the Genesis Post & Page Grid…

Modify HTML Tags In Genesis Blocks

This code enables you to change the HTML tags ( opening & closing ) in the Genesis accordion block or any other Genesis or WordPress block. In this…

Add Custom Class To Entry Class In Genesis

Genesis includes a entire file with filter functions for genesis markup. You can view all this code in genesis > lib > functions > markup.php. Here's the visual…

32 Code Snippets To Remove or Modify All Schema Microdata in Genesis

This post contains 32 code snippets which you can use to remove or modify the default schema included in Genesis. The code enables you to modify or remove…

Going Green Pro Theme Tutorials

Tutorials for customizing & modifying the Going Green Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Going Green Pro – Replace Featured Image With Slider

This tutorial enables you to replace the featured image for the most recent post with a slider in the Going Green Pro child theme by StudioPress. The code…

Grid Columns

The tutorials in this archive enable you to use PHP code and/or CSS to display posts in columns. The tutorials include methods which use pure CSS, PHP code and PHP combined with CSS. You'll also find more tutorials related to creating grid columns by using the search form on the primary sidebar. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Logo Inline With Mobile Menu In Genesis Child Themes

You can add this CSS to the end of your Genesis child themes style.css file to move your mobile menu inline with your custom logo or site title…

Vertical Align Title Area & Menu On Desktops & Mobiles

The solution in this download folder enables you to add a logo of any size and vertically align it with your nav menu like this : This vertically…

Center Site Header Elements On The Same Line

The code in this download folder perfectly centre's your site title or logo next to your nav menu as well as vertically aligned on desktops like this example…

Custom Block To Select Individual Entries Unique On Each Single Post

The code in this download folder adds a custom block which enables you to select individual entries from posts, pages & custom post types displayed in any number…

Select Individual Featured Posts In Genesis

This code enables you to choose individual posts from a drop down menu on any Edit Post screen for display in any Genesis hook position. In this case,…

Genesis Custom Block for Related Posts

The block files in this download folder enable you to create a custom block for related posts using WP_Query in Genesis child themes. You can insert the related…

How To Add Related Posts Between Paragraph Content

This code enables you to pull related posts from your database and display them in a grid within the content of your post or page using a shortcode…

How To Stop Your Archive Title & Description Displaying Within Your CSS Grid Columns

When using CSS grid to display entries ( posts ) in columns, you might find your H1 Archive title & description are also displayed in columns like this…

Add WooCommerce Cart To Nav Menu Widget In Genesis

This code adds the WooCommerce cart icon with the total amount of items and price to a navigation widget in the before header utility bar. Requires the activation…

How To Show Featured Images in a Lightbox Using Genesis

The templates in this download folder enable you to use jQuery to show your featured images on archives and single posts in a lightbox modal which pops up…

Menu Logo Menu Using CSS Grid In Newer Versions of Genesis Sample Theme

This tutorial adds a custom left and right menu that work with your custom logo and display inline using CSS grid. If you're using a new version of…

Featured Posts With Pagination In Widget Area Using Business Pro

This coded solution produces a responsive grid of posts in equal height with pagination displayed in the front page 2 section on the front page of the Business…

Genesis Template For ACF Repeater Fields

This template for Genesis child themes includes the code to display your Advanced Custom Fields repeater fields in a custom loop. In this example, the loop includes sub…

Countdown Timer For Genesis

This jQuery countdown timer can be added anywhere in any Genesis or WordPress child theme. It generates a live countdown in days, hours, minutes & seconds. Demo Video…

Blinking Dot Animation

This code adds a blinking dot before the title in a responsive text box like you see in this animated gif. The blinking dot, displays perfectly inline with…

Animate Elements In Grid Columns

This tutorial contains the code which enables you to display images and text in a 3 columns grid and animate the images. The images on page load, rotate…

Author Pro Featured Books Widget In Unlimited Rows

This solution enables you to add unlimited rows of featured books widgets to the Author Pro front page 2 widget area as seen in the following screenshot :…

Add Icons To The AgentPress Featured Listings Widget For Beds, Baths & Property Size

This file contains the code which enables you to fully customize the AgentPress Pro featured listings widget and add custom fields with icons like this : The file…

Add Latest Post Before Archive Page Title In Genesis

This code enables you to add your most recent post before your archive page title and all other posts in the loop after your title like this :…

WPEngine Style Blog Page With 2 Columns & Sidebar Then 3 Columns

This download folder includes a custom blog page template like the WPEngine blog page : The template includes code to : Display the first 3 posts in 2…

Gutenberg & Genesis Block Editor Tutorials

The tutorials in this archive contain solutions relating to the Gutenberg block editor for WordPress used in Genesis child themes. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Slider In Essence Pro Header Hero – New Version

This tutorial, written for the latest version of Essence Pro, includes the code which enables you to replace the header hero image on the front page with a…

Add Reusable Blocks Link To WordPress Toolbar

The code in the download folder adds a custom link in your admin toolbar to the Reusable Blocks page. Download Folder Copy & paste the code ( without…

Aweber Email Hero Block In WordPress

This tutorial provides the steps which enable you to add your Aweber signup form anywhere in any theme and style it like you see in the following screenshot…

Aweber Email Form Styled Like Genesis Newsletter Block

This tutorial provides the code which enables you to add your Aweber email signup form in the header hero section on Essence Pro theme front page like this…

Add Email Optin Form Block To Hero Header In Essence Pro

By default, the Essence Pro themes front page header hero section displays 2 buttons. In this tutorial, you'll get : A custom reusable block you can import. And…

Custom Call To Action Block Pattern For Any WordPress Theme

This tutorial provides the code which enables you to add a custom pattern to any WordPress theme. In this case, we add the pattern to the Twenty Twenty…

Replace The Image With Video In Monochrome Pro

This solution enables you to add a responsive video with cover text which overlays the video on all screen sizes. In this case, we replace the background image…

Change Post & Page Grid Class in Genesis Blocks

By default, Genesis Blocks wraps the featured image ( as seen in the following images ) in the gb-block-post-grid-image class when using the Genesis Post & Page Grid…

Modify HTML Tags In Genesis Blocks

This code enables you to change the HTML tags ( opening & closing ) in the Genesis accordion block or any other Genesis or WordPress block. In this…

Custom Block To Select Individual Entries Unique On Each Single Post

The code in this download folder adds a custom block which enables you to select individual entries from posts, pages & custom post types displayed in any number…

Genesis Custom Block for Related Posts

The block files in this download folder enable you to create a custom block for related posts using WP_Query in Genesis child themes. You can insert the related…

Replace Genesis Block Background Image With Video On Monochrome Pro Front Page

For use with the Monochrome Pro child theme for Genesis, this tutorial provides the code which enables you to replace the background image in the first block on…

Menu Logo Menu In Essence Pro

This solution enables you to modify the default Essence Pro site header elements to display a menu logo menu like this : Centers either the site title or…

Replace Image With Slider In Revolution Pro Themes Home Page

This tutorial provides the steps which enable you to replace the home page image with a responsive slider like this - Demo Video Shows the slider replacing the…

How To Add Image Hover Overlay Text To Gutenberg Images

This solution enables you to show text when images are hovered using the Gutenberg block editor. In this case, unique text is added to each image in the…

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…

Full Width Image Block Revolution Pro Front Page

This tutorial shows you how to make the windows image block ( first image ) added using Gutenberg in the Revolution Pro themes front page extend to the…

Magazine Pro – Move Entry Date Back To The Default Position In The Post Info

This solution enables you to reposition the entry date back to the default position inline with the post info on the front page of the Magazine Pro child…

Replace Hero Image With Soliloquy Slider Premium In Essence Pro Hero Section

This version works with both the free and premium version of Soliloquy slider. It replaces the hero image with the slider on desktops and displays the hero image…

Monochrome Pro Image After Header On Single Pages

This code enables you to display either a custom image or the featured image after the header on any single page. It also displays the single page title…

Header Image

Tutorials for customizing & modifying the Header Image in Genesis child themes. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members. Note : Not all tutorials relating to the header image tagged in this archive. You will be able to find more by using the search form.

Logo Inline With Mobile Menu In Genesis Child Themes

You can add this CSS to the end of your Genesis child themes style.css file to move your mobile menu inline with your custom logo or site title…

Change Custom Header Image On Mobiles In Gallery Pro

The solution in this download folder enables you to display a custom header image on smaller screens. As seen in the demo video, your header image will resize…

Essence Pro Fixed Header

The solution in this download folder enables you to make the site header in your Essence Pro theme sticky. To do this, the color of the header elements…

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

This tutorial provides the code which enables you to display a unique hero image with unique overlaying text on any page/post using the Genesis Sample child theme by…

Hero Image Behind Site Header & Menu On Front Page In Genesis Sample Theme

This tutorial enables you to add a hero image with overlaying content behind your site header and nav menu like this : Tested using the latest version of…

Menu Logo Menu In Old Versions of Genesis Sample Theme 2.2.4

The code in this download folder creates a menu logo menu in the header of version 2.2.4 of the Genesis Sample theme. Note : This solution will NOT…

Metro Pro Different Header Image For Mobiles

This code replaces the desktop header image with a smaller mobile version on smaller screens. This way your header image is not cutoff and displays clearly on hand…

Menu Logo Menu For Twenty Nineteen Theme

The solution in this download folder enables you to create a split menu which displays menu logo menu in non Genesis themes. In this case, we're using the…

Menu Logo Menu Using CSS Grid In Parallax Pro

The solution in this download folder enables you to display the primary menu to the left, the header image in the middle and the secondary menu to the…

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 :…

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…

Different Sized Header Image On Mobiles Using Infinity Pro

This solution enables you to change the header image on mobiles using the Infinity Pro child theme by StudioPress. This is the image for desktops which is 400px…

Change Logo Size In Customize Header Image

This tutorial shows you how to change the image size in the Beautiful Pro child theme by StudioPress. This is the standard method used in most Genesis child…

Remove Image Gradient Conditionally From Essence Pro

This tutorial provides the modified code which enables you to remove the gradient from the header hero image conditionally. In this case, the gradient is removed from all…

Menu Logo Menu In Genesis Sample Themes Header

This solution adds left and right menus inline with your custom logo like this : Tested using version 2.10 of the Genesis Sample child theme by StudioPress which…

Image Behind Header & Menu In Genesis Sample Theme

This code adds a field to the Customizer enabling you to upload a full width header image. The image displays behind the site header and primary nav menu…

Image Behind Header & Menu

The solution in this download folder enables you to : Move the primary menu inside the site header Display a image behind both the header & menu Center…

Replace Default Header Hero With Different Image On Mobiles – Essence Pro

This tutorial provides 2 different ways to change the default header hero image hero-bg.jpg with another image of any size, at any screen width. The following images show…

Different Logo For Desktop and Mobile – Outreach Pro

This download folder contains the code which enables you to use a different logo on mobiles to the default image which is only shown on desktops. On top…

Full Screen Width Header Image In Metro Pro

This tutorial provides 2 different solutions which enable you to add a full screen width header image to the Metro Pro child theme by StudioPress. Both solutions add…

Infinite Scroll

This archive provides tutorials which include code that enables you to install Infinite Scroll in WordPress themes and is tested in Genesis. You'll also find code which enables you to modify, customize and style infinite scroll in Genesis child themes. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Infinite Scroll In Genesis Page Template

This code enables you to add infinite scroll to a static page template in any Genesis child theme. The template includes a button to load more entries. The…

Genesis Infinite Scroll With Button To Load More Posts

This tutorial contains a Genesis archive template which displays your posts in a grid and also includes infinite scroll. The code adds a button which loads more posts…

Add Jetpacks Infinite Scroll To Genesis Sample Theme

This code enables you to add Infinite Scroll ( which loads more posts by clicking a button ) from Jetpack to any archive page type in the Genesis…

Infinity Pro Theme Tutorials

The tutorials in this archive include code which enables you to modify the default functionality & styling of the Infinity Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

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…

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…

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 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…

Add Header Right Widget For Simple Social Icons In Infinity Pro

This tutorial shows you how to add the header right widget back in the header of Infinity Pro. In this example, we add the Simple Social Icons widget…

Remove Sorry, no content matched your criteria in Genesis

There's at least 3 ways to remove the "Sorry, no content matched your criteria text" displayed when no posts exist for your query. 1. Add this line of…

Different Sized Header Image On Mobiles Using Infinity Pro

This solution enables you to change the header image on mobiles using the Infinity Pro child theme by StudioPress. This is the image for desktops which is 400px…

Full Width Slider Between Footer Widgets & Footer

This code enables you to add a full width of screen slider between your footer widgets and your footer ( containing your footer credits ) like this :…

Add Extra Wide Full Width Layout Template For Single Posts In Any Genesis Child Theme

This solution enables you to use an extra wide full width layout on single posts in any child theme running on Genesis. Demo Video # Shows the extra…

Different Image On Mobile Orientation Change

The solution in this download folder enables you to remove the default desktop background image and replace it with a different image for mobile screens. Not only can…

Add Full Width Video To Widget Area In Genesis Child Themes

This solution enables you to add a full width of screen video to any widget area like this : The above screenshot shows the video displaying full width…

Replace Video With Image When Genesis Mobile Menu Is Active – Infinity Pro Front Page 1

This solution extends the code in this tutorial which replaces the front page 1 background image with a video. In this case, the background image is only replaced…

Infinity Pro – Code To Change Front Page 1 Image On Mobiles

This solution provides a similar solution to the code in this tutorial however uses a different method to replace the background image on mobiles. [gallery columns="2" size="full" ids="70785,70786"]…

Infinity Pro – Different Front Page 1 Background Image For Mobiles

This solution enables you to change the Front Page 1 background image on mobiles. [gallery columns="2" size="full" ids="70780,70779"] In this case, the code executes at 600px width removing…

Infinity Pro – Change Team Page From 4 To 3 Columns

This code modification enables you to modify the default Infinity Pro team class setting for displaying team members on the team page from one-fourth to one-half, one-third or…

Infinity Pro Vertical Menu

This tutorial shows you how to change the offscreen content feature to a vertical menu using the Infinity Pro child theme by StudioPress. Also includes code to push…

Blog Page Template Showing Entry Title, Featured Image & Excerpt In Columns

This custom blog page template shows what you see in the following screenshot : Tested using the Infinity pro child theme by StudioPress, this template will work in…

Infinity Pro – Add Image Overlay To Front Page 1 Widget Background

This solution enables you to add a color overlay to the front page 1 background image in the Infinity Pro child theme by StudioPress. Here's an example of…

Infinity Pro – Custom Single Post Template With Front Page Section 1 Replica

This template for Infinity Pro displays a section like front page 1 with a unique image background before the post content. It also enables you to display the…

Float Gravity Forms Over Front Page 1 Background Image In Infinity Pro

This tutorial floats the Gravity Forms widget to the right of the hero text in the Infinity Pro themes front page 1 background image. Requires the use of…

Interior Pro Theme

Interior Pro – Custom Hero Image On Single Posts & Pages

This tutorial shows you how to replace the default hero image for single posts and pages with a unique image when using the Interior Pro child theme by…

Interior Pro – Use Featured Image As Hero Image On Single Posts & Pages

This solution enables you to replace the default hero image which displays in the background of the site header of the Interior Pro with a featured image, if…

Jetpack

Lists all posts related to the Jetpack plugin developed by Automattic

Add Jetpacks Infinite Scroll To Genesis Sample Theme

This code enables you to add Infinite Scroll ( which loads more posts by clicking a button ) from Jetpack to any archive page type in the Genesis…

Use Same Image For All Jetpacks Related Posts

This code displays the same image for all related posts featured images so the image you add as a featured image on single posts isn't displayed for related…

Remove Old Posts From Jetpacks Related Posts

If you have the Jetpack plugin installed and want to display related posts, you can customize the default functions using code in your child theme. This code enables…

Jetpack 2.0 Update Adds 4 New Plugin Modules

If you're a Jetpack plugin fan, Matt Mullenweg from WordPress.com has just sent you an email to let you know his Jetpack plugin has been updated again. If…

Moving Jetpack Sharing Buttons Above Your Posts Content

Social sharing is one of the best ways to bring more traffic to your website. Jetpack is one of the most popular plugins which also includes social sharing buttons.…

Pro’s & Con’s of Using The Jetpack Plugin for WordPress

I've already written a dozen posts about Jetpack. So i do like this plugin and give credit to the people behind it who continue to make it better.…

How To Add Jetpack Share Social Media Buttons Above Your Posts

Sharedaddy is an excellent social sharing plugin included within the plugin modules of Jetpack. To use the entire Jetpack plugin, you'll need to connect to a WordPress.com account.…

Using Jetpacks Modules As Stand Alone Plugins

Jetpack is a great plugin, maybe the best but you would normally need a WordPress.com account to use it. Fortunately, some of the plugin modules included in Jetpack…

Jetpack 1.5 Displays Your Gallery Images in a Carousel

Photo Matt has just sent out a short post about the image Carousel which has been added to version 1.5 of Jetpack. All you need to do is…

WordPress.com’s Jetpack Subscriptions Delivers New Posts Instantly

WP Sites are now using WordPress.com subscriptions. It's included in the Jetpack plugin and the service is handled by WordPress.com. It's an excellent service and no one understands how to…

Jetpack Comments Integrates Social Media Login Options

Jetpack Comments enables your visitors to use their WordPress.com, Twitter, or Facebook accounts when commenting on your site. Jetpack tries to match your site's color scheme automatically, but…

Jetpack Subscriptions Deliver Daily or Weekly Email Updates Via WordPress.com

Have you ever received a complaint about the formatting or frequency of emails you send to your subscribers? Some readers like to recieve text emails rather than html…

New JetPack Custom Contact Form Filters Email Spam Using Akismet

Jetpack which is a plugin developed by the company which owns WordPress, Automattic, has just released a new feature which creates and adds a contact form to your…

Jetpack for WordPress Now Includes 11 Awesome Plugins in One

Jetpack is a free plugin created by the Automattic, the company behind WordPress. The latest update now includes 11 plugins within the one plugin, pretty cool. You'll need…

How To Add New Sharing Service URL’s to Jetpacks Social Sharedaddy Plugin

Jetpack comes with a new social sharing service named Share Daddy. Sharedaddy only includes a limited number of social networks like Facebook and Twitter. If you want to…

jQuery Scroll Method

Tutorials in this archive relate to using different types of jQuery Scroll methods in Genesis including, but not limited to, scroll & scrollTop. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Scroll Indicator JS For WP Themes

Adds a scroll indicator at the bottom of your fixed header in Genesis and other WordPress themes. Only displays on desktops. Includes the files for use in Genesis…

Hide Genesis Responsive Menu On Menu Item Click

This solution enables you to hide the Genesis responsive menu when any menu item in the drop down toggle menu is clicked. Once the menu item is clicked,…

3 Ways To Change Logo On Scroll Using jQuery In Genesis Sample Theme

The code in this download folder contains 3 different methods which enable you to use jQuery with PHP to change your image on scroll or using any other…

Hero Image Behind Site Header & Menu On Front Page In Genesis Sample Theme

This tutorial enables you to add a hero image with overlaying content behind your site header and nav menu like this : Tested using the latest version of…

Replace Site Title With Logo On Scroll

This solution enables you to remove the site title and replace it with your custom logo on scroll. Here's the site header showing the site title before scroll…

Eliminate The Altitude Pro Header Shrink On Scroll

This tutorial shows you how to remove the shrink effect on scroll in the Altitude Pro child theme by StudioPress. In this case, the shrink effect is removed…

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 :…

Change Logo Size On Scroll

This solution enables you to change your logo size on scroll on desktops only. When mobile ( less than 960px width ), a smaller version of your logo…

Add Utility Bar Before Site Header Removed On Scroll – Eleven40 Pro

This code adds a 2nd header before the default header. The 2nd header includes a clickable logo, smaller than the default header image as well as a search…

Menu Bar Before Header Which Displays Smaller Logo On Scroll

The code in this download folder creates a 2nd site header with custom links before the default site header in the Genesis Sample child theme by StudioPress. The…

Add Centric Pro Scroll Down Arrow To Parallax Pro

This tutorial shows you how to add the down arrow from the Centric Pro child theme to the Home Section 1 widget area in the Parallax Pro child…

Progress Bar With Percentage Read On Scroll

This code extends the code in this tutorial which adds a horizontal scroll bar at the top of the Genesis site header. The jQuery includes dynamic text for…

Show Progress Bar On Scroll Before Header In Genesis

This download provides which which adds a progress bar displayed on scroll. The progress bar accurately indicates how much of the page has been read/scrolled as you can…

Add Smooth Scrolling To Front Page Widget Areas In Altitude Pro

This code adds smooth scrolling from your nav menu links to each widget area in the front page template of Altitude Pro. You can also use it in…

Display Fixed Site Header On Scroll

This code enables you to display the site title, description and header on scroll. The code works regardless of whether you choose the after header menu or use…

Replace Logo With Site Title On Scroll

This solution enables you to remove your header image and replace it with the site title & description when you scroll down like you see in the following…

Change Site Header Background Color On Scroll

The code in this tutorial enables you to change the background color for the site header on scroll. Tested using the Minimum Pro child theme by StudioPress, the…

Infinity Pro – Add Sticky Message On Scroll

This tutorial ( in response to this question ) provides the code which enables you to add a sticky message, via a new widget after the sticky nav…

Display Logo on Scroll

This tutorial provides the solution which hides the logo in your header and fades it in when you scroll like this: This code hooks in the image using…

Change Logo On Scroll

This tutorial provides the code which enables you to switch logos on scroll in any Genesis child theme. Tested on the Genesis Sample child theme and may need…

Kreativ Pro Theme Tutorials

Posts in this archive relate to modification & customization of the Kreativ Pro child theme by ThemeSquare. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Kreativ Pro Front Page 1 Slider

This code replaces the background image for the front page 1 widget area with a slider show in Kreativ Pro. Demo Video # Shows the front page 1…

Layout Settings in Genesis

The tutorials in this archive relate to usage and modification of the layout settings in Genesis child themes. You'll find code which helps you create custom layouts that extend the default layouts and code which enables you to change the layout based on any conditionals. You'll also find more tutorials relating to layouts which aren't tagged with layout by using the search widget in the sidebar. All code as well as support for PHP code is guaranteed for members.

Add Sidebar To Genesis Author Pro Single Books Template

This template enables you to change the layout on the single book page when using the Author Pro child theme by StudioPress. [gallery columns="2" size="full" ids="102378,102379"] You can…

Add Sidebar To Navigation Pro Single Posts Template

The way Navigation Pro is coded, doesn't let you change the layout on single posts because of this line of PHP code located around line 31 in image-functions.php.…

Add Extra Wide Full Width Layout Template For Single Posts In Any Genesis Child Theme

This solution enables you to use an extra wide full width layout on single posts in any child theme running on Genesis. Demo Video # Shows the extra…

Genesis Layout Settings On WooCommerce Pages

There's 3 ways to change the layout settings in Genesis child themes. 1. You can use the Layout Settings on any Edit Page screen to change the layout…

Custom Genesis Layout Setting Using CSS Grid

This code enables you to add a custom layout setting which uses CSS Grid. You can select the setting under Layout Settings on any single page, post or…

Genesis Full Width Layout For Password Protected Posts

This code enables you to force a full width layout on single posts which are password protected in Genesis. Once the user enters the correct password, the post…

Remove Layout Settings In Genesis

Paste any of these single lines of PHP code at the end of your child themes functions file to remove specific layout settings in Genesis. The layout settings…

Sidebar Content Sidebar Sidebar Layout For Genesis

This tutorial contains the code which provides a custom layout template for Genesis. The layout is sidebar content sidebar sidebar like you see in the following image. The…

Content Sidebar Content Sidebar Layout For Genesis

This page template for Genesis includes a custom layout which displays like this: main content area > primary sidebar(custom) > full width widget area > 2nd main content…

Remove Sidebar on WooCommerce Pages

This tutorial provides 2 ways to remove the sidebar from any type of WooCommerce page in Genesis child themes. 1. You can change the Layout Settings on Edit…

Force Content Sidebar Layout On Genesis Blog Page

Jourdain asked this question on the forums recently which is a fairly common problem some new Genesis users need help with I need to add the primary sidebar…

Modify Sidebar Content Sidebar Layout To Equal Width Sidebars

In this post, i'll provide the CSS code which makes both the primary and secondary sidebars the same width when using the sidebar-content-sidebar layout. Here's what the default…

50/50 Content Sidebar Layout For Genesis

This code generates a new Genesis layout option which will appear next to your existing default layout images like this: Small Content Big Sidebar This screenshot shows the…

Change Layout Based On Any Conditions

You can easily change the layout settings on any page or post in Genesis. But what if you want to change the layout automatically on multiple pages or…

Change Layout On Posts, Pages & Archives in Genesis

There's many ways to change the layout options on posts, pages and archives. The only problem is, you either have to change them manually, one by one using…

Lifestyle Pro Theme Tutorials

Tutorials for customizing & modifying the Lifestyle Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Add WooCommerce Cart Count & Total Price To Genesis Nav Menu

This code adds the cart count & total price to the nav menu in Lifestyle Pro. The solution uses Dashicons which modern HTML 5 Genesis child themes load…

Lifestyle Pro Blog Page Template Like Home

This template displays your posts exactly the same as the front page template in the Lifestyle Pro child theme by StudioPress. Here's the blog page template with the…

How To Stick Your Footer To The Bottom Of The Screen

Both code snippets in this tutorial enable you to pin the footer of your site to the bottom of the viewport like this: This prevents big gaps on…

Add Different Header Image To Front Page or Landing Page Template

There's different methods you can use to change the header image however, these are the best based on clean code efficiency and mobile responsiveness. This tutorial contains the…

Different Sized Header Images For Any Screen Width – Mobile Responsive

This tutorial contains the code which enables you to add any number of header of any width or height to display perfectly at any screen width. You can…

Lifestyle Pro – Different Full Width Header Images

This tutorial provides the code which enables you to display a unique image on any single post or page. If non added, a default image named default.png displays…

Lifestyle Pro – Responsive Full Header Image

This tutorial, tested on the latest version of the Lifestyle Pro child theme by StudioPress, enables you to add a full width image to your site header. Here's…

Add Different Background Color To Site Title With Different Background Image On Each Post & Page

This code enables you to add a semi transparent background or any other background color to the site title. It also enables you to change the degree of…

Lifestyle Pro Full Size Header Image Spanning Entire Width of Screen

This tutorial enables you to display your header image so it spans the full width of the screen. There's 4 steps involved: Re-position the Genesis header and header…

Customize Lifestyle Pro Theme Header Image Area

In this tutorial, we'll start with the default header and end up with a full width header image. Update: Here's a better solution tested on the latest version…

Magazine Pro Theme Tutorials

Tutorials for customizing & modifying the Magazine Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Display Search Inline With Genesis Responsive Mobile Menu When Toggled Open

By default, the search form, when added to the nav menu, is displayed within the drop down menu when toggled open. The solution available in this download folder…

Magazine Pro Templates To Display Different Archive Page Types In Equal Height Columns

The templates in this download folder enable you to display your entries in equal height columns for any page type including : Your front page Your posts page…

Uncombine Genesis Responsive Menu

This solution enables you to uncombine menus which display in the responsive toggle menu. By default, the Magazine Pro child theme combines the primary, header & secondary menus…

Add Star Rating To Genesis Featured Posts Widget

The code in this download folder adds an extra setting to the Genesis Featured Posts widget to Show Star Rating for each post. You can then add a…

How To Display Category Image In Genesis Child Themes

You can manually add your HTML for your image in the archive intro text field on the Edit Category page for each category. This will display your image…

Magazine Pro – Move Entry Date Back To The Default Position In The Post Info

This solution enables you to reposition the entry date back to the default position inline with the post info on the front page of the Magazine Pro child…

Magazine Pro Full Width Home Top Widget Area

This code repositions the home top widget area hooked to genesis_loop by default so it displays full width before the content sidebar like this : All you need…

Add 3rd Nav Menu To Genesis & Combine With Mobile Menu

This code adds a 3rd nav menu to any Genesis child theme. It also adds the 3rd menu to the mobile menu which combines all 3 menus when…

Reorder Widget Areas on Mobile

The solution in this download folder enables you to change the order of the front page widget areas on smaller screens. You can also display the primary sidebar…

Reposition Title Before Image In Genesis Featured Posts Widget

This tutorial provides the modification which moves the featured image after the entry title in the Genesis Featured Posts widget. Tested using the Magazine Pro child theme by…

Featured Image Before Single Page Entry Title in Genesis

This code adds the featured image before the entry title on single pages only. The image is only added if a featured image is set using the Featured…

Add Widget To Magazine Pro Front Page

This free quick tip provides the code which adds a new widget area to the Magazine Pro themes front page template. Based on this question from a new…

Magazine Pro Front Page As Archive Page

This template replicates the front page of Magazine Pro so you can use it as a archive page with pagination. This enables you to use the template on…

Magazine Like Archive In Genesis Sample Theme

The template in this tutorial shows you another method for using CSS grid to display archives in a grid layout with different sized columns. This method uses line…

Add Logo In Menu of Magazine Pro Theme

The solution in this tutorial enables you to display your logo inline with your nav menu items like you see in the following screenshot : Coded to display…

Magazine Pro Full Screen Width Responsive Header Image

This tutorial provides the code which enables you to add a full width image to the Magazine Pro themes site header. Based on this question from a member…

Add Different Image After Header in Genesis

This tutorial provides the code which enables you to display a different image after the header in any Genesis child theme. Tested using the Magazine Pro child theme…

Add Image After Header In Genesis

There's at least 4 ways to add a full width image after the header in any Genesis child theme. This tutorial provides several basic code examples you can…

Filterable Portfolio in Genesis

The code in this tutorial enables you to filter all items in your custom post type and all existing and future items added to your CPT custom taxonomy…

Use Magazine Pro Themes Front Page As Template On Single Post Types

This tutorial shows you how to use the Magazine Pro themes front page template on single pages, single posts and single custom post types. All you need to…

Maker Pro Child Theme Tutorials

Posts in this archive relate to modification & customization of the Maker Pro child theme by Bloom. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Full Width Blog Page Template In Maker Pro

This template enables you to create a full width blog page in Maker Pro. Here's the default archive width on the left and the full width layout on…

Masonry

Tutorials in this archive relate to the use of jQuery Masonry in Genesis child themes.

Genesis Masonry Archive Template With Image Hover Overlay

This masonry archive template enables you to overlay the entry title, image description or image caption on hover. Its coded with 2 fallbacks so the caption displays, if…

Genesis Masonry Template

A genesis front page template which displays your posts using a Masonry layout. Video Demo Shows the use of jQuery Masonry to display posts with different sized featured…

Using Masonry in Genesis With Different Sized Featured Images

This tutorial provides a file which you can use on any archive page in Genesis. The template file includes all the code which removes the content and only…

Masonry in Genesis – Basic Example

This tutorial shows you how to use Dave Desandro's masonry with the Genesis Sample themes home page. This solution is the most basic compared to others i've seen…

Meta Box

This archive includes tutorials containing code which uses the add_meta_box, remove_meta_box and genesis_save_custom_fields functions used in Genesis child themes. Some tutorials include code which works in any WordPress theme and some code only works in Genesis child themes as it contains Genesis specific functions. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Style Each Post With A Different Background Color

This code adds a color picker to the Edit Post screen enabling you to set the background color for each post ( Not the front page archive page…

Inline Style Nav Menu Items For Each Category Using walker_nav_menu_start_el

The code in this download folder adds a color picker to your Edit Category Pages which you can set to style each category nav menu item a different…

Color Picker To Style Post Meta

The code in this download folder produces exactly the same result as this tutorial without the need to use a plugin like ACF or add CSS. You can…

Inline Style Post Category Links Differently Using Color Picker

The code in this download folder enables you use the color picker on the Edit Category page to style your post category links different colors. Once you install…

How to Remove Header Background Image for Essence Pro

This download Folder contains the code which enables you to remove the Essence Pro themes header hero image on any single post, page or custom post type. [gallery…

How To Add A Genesis Meta Box For Custom URLS

This download folder contains code which adds a text field on your single post/page/cpt edit screen for internal or external links. Genesis includes several functions to make it…

Checkbox To Show Featured Posts From Any Post Type Without Using a Plugin or Widget

This download provides the code which enables you to display one or more entries from any post type, taxonomy and term in any Genesis hook position. By default,…

Checkbox to Remove Specific Posts & Pages From Your Home Page Loop

This code adds a checkbox below the editor on all Edit screens for posts and pages. The box enables you to hide specific posts and pages from your…

Academy Pro Checkbox To Remove Hero Section On Inner Pages

This tutorial extends the code in this tutorial and enables you to add a checkbox on single posts and pages to remove the hero section without the need…

Add Meta Box To Edit Post Screen For Inline Styles

This tutorial provides the code which enables you to add CSS to a custom meta box to style single posts and pages. #Demo Video Shows the custom meta…

Genesis CPT Archive Settings Field For Posts Per Page

This code adds a sortable meta box to any custom post type archive. Here's a demo showing how the field enables you to set posts per page for…

Add Image After WooCommerce Product Category Page Title In Genesis Child Themes

This code enables you to add a linkable image after the WooCommerce products header on any product category page. There's 2 snippets included : The 1st snippet enables…

Code To Add Color Picker To Meta Box On Edit Post Screens

This code creates a color picker meta box which loads on the Edit Post screen. You can use the color picker to style any element on any single…

Add Color Picker To Edit Post Screen To Style Specific Single Post Elements

This tutorial shows you how to add the color picker to the Edit Post screen so you can change the color for specific elements on single posts &…

Checkbox To Remove The After Entry Widget From Specific Posts

This code adds a checkbox to the screen options which you can enable on any single post. The checkbox lets you remove the after entry widget on any…

Add Meta Box To Custom Post Type Archive

This file, enables you to add any type of meta box to any custom post type edit screen. In this case, we've added a text box which enables…

Add Image Upload To Edit Category Page

This code enables you to add a image upload field to all Edit Category pages which also includes Edit category pages for child categories. You can also use…

Add WP Editor To Page Template

This code enables you to add a 2nd editor to any page template or any/all edit screens in WordPress. All you need to do is add code to…

Add Genesis Scripts Meta Box To Custom Post Types

There's 2 ways to add the scripts box to custom post types edit screen: 1. You can use code in your functions file like this: [code] function add_support_genesis_scripts()…

Remove Scripts Meta Box From Genesis

The following screenshot shows the Scripts meta box which is located on all Edit Post & Edit Page screens in Genesis: The code in this tutorial, once added…

Metro Pro Theme Tutorials

Tutorials in this archive contain solutions related to the modification & customization of the Metro Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Metro Pro Different Header Image For Mobiles

This code replaces the desktop header image with a smaller mobile version on smaller screens. This way your header image is not cutoff and displays clearly on hand…

Image Behind Header & Menu

The solution in this download folder enables you to : Move the primary menu inside the site header Display a image behind both the header & menu Center…

Custom Attachment Page Template Which Links Attachment Image Back To The Parent Post

This template enables you to customize/modify the default attachment page output for images. On the attachment page, you can : Set the size of the attachment image Set…

Full Screen Width Header Image In Metro Pro

This tutorial provides 2 different solutions which enable you to add a full screen width header image to the Metro Pro child theme by StudioPress. Both solutions add…

Make Archive Pages Look Like Home Page Widget Areas

This tutorial enables you to display any type of archive exactly the same as the front page which uses widgets in Metro Pro. Based on this question from…

Custom Category Archive Template

The template in this tutorial enables you to display category archive pages differently to the default archives. This solution has been coded based on a question from a…

Metro Pro Full Width of Site Header Image

This tutorial enables you to add a responsive full width header image to the Metro Pro child theme by StudioPress. On top of this, the code adds your…

Add Metro Pro’s Newsletter Subscribe Box To Any StudioPress Theme

In this tutorial, we'll take all the code and other stuff needed to add the same e-Mail Newsletter subscribe box included on the Metro Pro theme and add…

Customize Header Logo & Banner Images In Metro Theme

In this tutorial, we'll look at how to add different images in the header of the Metro child theme by StudioPress. By default, here's what the header looks…

Add Portfolio Category Archive Page To Metro Theme

Metro is one of the most popular StudioPress child themes however it doesn't include a portfolio page. In this tutorial, i'll provide all the code which is tested…

Minimum Pro Theme Tutorials

Tutorials in this archive contain solutions related to the modification & customization of the Minimum Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Reposition Genesis Responsive Menu Icon Before Site Title On Mobiles

The code in this download folder enables you to change the position of the responsive menu icon from the default position after the title area to before the…

Minimum Pro Add Text Widget To Overlay Backstretch Image

The solution in this tutorial enables you to add a new widget area named Home Image Text Overlay which floats the HTML you add to a text widget…

Minimum Pro Custom Site Description & Tagline Right CTA Button

The code in this tutorial extends the solutions in this tutorial and enables you to add a custom site description within the site-tagline-left div as well as a…

Change Site Header Background Color On Scroll

The code in this tutorial enables you to change the background color for the site header on scroll. Tested using the Minimum Pro child theme by StudioPress, the…

Add Background Image To Landing Page Template Only

This solution enables you to add a background image to 1 specific page template without using the built in background image function which displays the image on every…

Single Posts In Tabs Using Genesis

The code in this tutorial enables you to create tabs ( using code, not plugin ) which display the entry title, featured image and content limit. You can…

Change Minimum Pro Grid Loop To 3, 4 or 6 Columns

The code in this tutorial enables you to display your posts in 2, 3, 4 or 6 columns rather than the standard 2 columns the Minimum Pro themes…

Replace Image With Soliloquy Slider On Front Page Of Minimum Pro

There's different ways to replace the front page image in Minimum Pro with a slider, one of which you'll find here. In this tutorial, i'll show you how…

Random Fallback Featured Images For Custom Archive Page

This code enables you to display a random featured image on any archive page type, if non is added. On top of this, it doesn't display any duplicates…

Minimum Pro Different Backstretch Images

This tutorial shows you how to display different backstretch images using the Minimum Pro theme by StudioPress. By default, the theme only shows 1 image on the front…

Minimum Pro – Replace Front Page After Header Image with Slide Show

This tutorial enables you to replace the after header image on the front page of the Minimum Pro child theme with a slider. Note : If you're using…

Minimum Pro – Change Portfolio Archive Entries To 3 or 4 Columns

By default, the Minimum Pro child theme by StudioPress is coded to display the portfolio archive entries in 2 columns like this: This tutorial shows you how to…

Change Site Header CSS On Scroll

This tutorial provides the code which enables you to change the site header elements on scroll. You can determine the point where the change occurs simply by modifying…

Replace Minimum Pro Themes Tagline With Custom Field

The Minimum Pro theme by StudioPress includes a tagline which displays the same content site-wide after your header. Update : This new tutorial provides the code which enables…

Modern Portfolio Pro Theme Tutorials

Tutorials in this archive contain solutions related to the modification & customisation of the Modern Portfolio Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Page Template To Show Title & Image Only In Modern Studio Pro

This template shows only the title and featured image like this : You can also use the code in this template to : Remove the archive page title…

Modern Portfolio Pro Responsive Custom Header Image

If you want to add a custom header image wider than the default size in the Modern Portfolio Pro child theme by StudioPress, you'll need to modify the…

Modern Studio Pro Theme Tutorials

All code, tutorials and theme customization/modification relates to the Modern Studio Pro child theme. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Modern Studio Pro Theme – How To Upload A Bigger Logo

This tutorial shows you how to modify the code in the Modern Studio Pro child theme so you can upload a larger logo than the default allows. Based…

StudioPress Monochrome Pro Theme Tutorials

Posts in this archive relate to modification & customization of the Monochrome Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Use single.php Template On All Post Types In Monochrome Pro

The code in this download folder enables you to use the single.php template file with the full width after header featured image, on all post types including single…

Replace The Image With Video In Monochrome Pro

This solution enables you to add a responsive video with cover text which overlays the video on all screen sizes. In this case, we replace the background image…

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.…

Replace Genesis Block Background Image With Video On Monochrome Pro Front Page

For use with the Monochrome Pro child theme for Genesis, this tutorial provides the code which enables you to replace the background image in the first block on…

WPEngine Style Blog Page With 2 Columns & Sidebar Then 3 Columns

This download folder includes a custom blog page template like the WPEngine blog page : The template includes code to : Display the first 3 posts in 2…

Before Header Utility Bar In Monochrome Pro

This tutorial adds a before header widget area you can use to add your phone number and social icons to like this : Demo Video Shows a new…

Show Hide Featured Image After Header On Single Posts in Monochrome Pro

This tutorial provides the instructions on how to remove the featured image after header on single posts without removing the featured image from archives in the Monochrome Pro…

Replace Site Title With Logo On Scroll

This solution enables you to remove the site title and replace it with your custom logo on scroll. Here's the site header showing the site title before scroll…

Monochrome Pro – Use Front Page 4 Widgets In Front Page 3 Widget Area & Vice Versa

This solution enables you to use the front page 4 widgets in the front page 3 widget area as well as use the front page 3 widgets in…

Monochrome Pro – Add Featured or Hero Image After Header On 404 Error Pages Using ACF

This download folder includes the files which enable you to show a featured or custom image added using ACF, after the header in the same style as displayed…

Monochrome Pro – Add Featured or Hero Image After Header On Single Pages Using ACF

This download folder includes the files which enable you to show a featured or custom image added using ACF, after the header on single pages in the same…

Monochrome Pro – Archive Templates For After Header Hero Image

The templates in this download enable you to add a unique image after the header in the same style as the featured image is displayed on single posts…

Monochrome Pro MP 4 Video Behind Front Page 1 Widget

This tutorial enables you to add a MP4 video behind the front page 1 widget area in the Monochrome Pro child theme by StudioPress. There's 2 CSS options…

Monochrome Pro Custom Single Post Hero Images

This download folder contains the code which enables you to add a default image which is displayed when no featured image added on single posts. The code enables…

Add Down Triangle Like Arrow After Front Page 1 Widget

This CSS enabled you to add the down triangle after the front page 1 widget area in the Monochrome Pro child theme by StudioPress like this : Add…

Monochrome Pro Add Text Overlay With Background To Front Page 1 Image Section

This solution enables you to layer text over the front page 1 widget background image and position the content at the bottom of the image like this :…

Monochrome Pro Front Page Template Using Custom Fields

This template is installed a page template enabling you to add content to the editor on the Edit Page screen and display the template as the front page…

Monochrome Pro Front Page As Page Template – Easy Setup Version

This new version of the this older template enables you to use the Monochrome Pro themes front page template and import the demo content on any number of…

Monochrome Pro Remove Before Footer CTA Widget Conditionally

Add this code to the Monochrome Pro themes functions file. [code] add_action( 'genesis_before_footer', 'remove_before_footer_cta', 8 ); function remove_before_footer_cta() { if ( is_page( 'contact' ) ) { remove_action( 'genesis_before_footer',…

Add Flexible Footer Widgets To Monochrome Pro

This tutorial provides several methods which enable you to add any number of footer widgets to the Monochrome Pro child theme by StudioPress. Here's the result showing the…

Genesis Nav Menu Tutorials

Tutorials in this archive relate to the customization and modification of nav menus in Genesis using PHP code & CSS. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Inline Style Nav Menu Items For Each Category Using walker_nav_menu_start_el

The code in this download folder adds a color picker to your Edit Category Pages which you can set to style each category nav menu item a different…

Vertical Align Title Area & Menu On Desktops & Mobiles

The solution in this download folder enables you to add a logo of any size and vertically align it with your nav menu like this : This vertically…

Center Site Header Elements On The Same Line

The code in this download folder perfectly centre's your site title or logo next to your nav menu as well as vertically aligned on desktops like this example…

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…

How To Change Default Genesis Responsive Menu Icons

This solution enables you to remove the default dashicons used to open & close the mobile menu and replace them with symbols, text or HTML Symbol Entities. In…

How To Add Your Site Title In Your Nav Menu

This code enables you to add your site title within your nav menu like this : In this screenshot, the site title displays within the primary nav menu…

Add WooCommerce Cart To Nav Menu Widget In Genesis

This code adds the WooCommerce cart icon with the total amount of items and price to a navigation widget in the before header utility bar. Requires the activation…

Menu Logo Menu Using CSS Grid In Newer Versions of Genesis Sample Theme

This tutorial adds a custom left and right menu that work with your custom logo and display inline using CSS grid. If you're using a new version of…

Add SVG Icons To Custom Nav Menu In Genesis

This code enables you to add simple SVG icons to a custom nav menu named Social in any Genesis child theme. The code is written to detect the…

Display Search Inline With Genesis Responsive Mobile Menu When Toggled Open

By default, the search form, when added to the nav menu, is displayed within the drop down menu when toggled open. The solution available in this download folder…

How To Modify The Responsive Menu Text In Genesis

This simple solution enables you to change the name of the responsive menu from the default text which is MENU to something else. All you need to do…

Add Header Right Widget & Full Width Menu In Genesis Sample Theme

The code in this download folder adds the header right widget area back to the Genesis Sample child theme and also repositions the primary menu after the header…

Hide Genesis Responsive Menu On Menu Item Click

This solution enables you to hide the Genesis responsive menu when any menu item in the drop down toggle menu is clicked. Once the menu item is clicked,…

Menu Logo Menu In Old Versions of Genesis Sample Theme 2.2.4

The code in this download folder creates a menu logo menu in the header of version 2.2.4 of the Genesis Sample theme. Note : This solution will NOT…

Essence Pro Logo Menu Search Perfectly Inline

This CSS enables you to display your logo, menu & search form inline like this : You can also display the header elements in any order like logo…

Menu Logo Menu In Essence Pro

This solution enables you to modify the default Essence Pro site header elements to display a menu logo menu like this : Centers either the site title or…

Uncombine Genesis Responsive Menu

This solution enables you to uncombine menus which display in the responsive toggle menu. By default, the Magazine Pro child theme combines the primary, header & secondary menus…

Menu Logo Menu For Twenty Nineteen Theme

The solution in this download folder enables you to create a split menu which displays menu logo menu in non Genesis themes. In this case, we're using the…

Menu Logo Menu Using CSS Grid In Parallax Pro

The solution in this download folder enables you to display the primary menu to the left, the header image in the middle and the secondary menu to the…

Align Logo Left With Menu Right In Essence Pro

This tutorial shows you how to reposition the primary nav menu to the right inline with the custom logo on the left using the Essence Pro child theme…

Navigation Pro Theme Tutorials

Posts in this archive relate to modification & customization of the Navigation Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Add Sidebar To Navigation Pro Single Posts Template

The way Navigation Pro is coded, doesn't let you change the layout on single posts because of this line of PHP code located around line 31 in image-functions.php.…

Remove Featured Image On A Per Post Basis In Navigation Pro

This tutorial includes the code which enables you to remove the featured image after the header on any single post in Navigation Pro without removing the archive image.…

Template To Display Archive Entries In Columns Using Navigation Pro

This template enables you to show posts on archive pages in columns. Here's the result written specifically for the Navigation Pro child theme by StudioPress : The code…

Different Featured Image For Archive Pages in Genesis

The code in this download folder enables you to add a special featured image which only displays on archives. The image you add will be different to the…

Genesis Search Results Page The Same As Your Archives In Navigation Pro

This template enables you to display search results the same as your archive pages. In this example, we'll display the search results on the Navigation Pro themes search…

News Pro Theme Tutorials

Tutorials in this archive contain solutions related to the modification & customization of the News Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Reposition Header Elements Based On Screen Width

This solution enables you to reposition the site title or logo and header right widget ( search ) on smaller screens like this : [gallery columns="2" size="full" link="file"…

News Pro Slider Behind Site Header Elements

This solution adds a slider behind the site header elements of the News Pro theme by StudioPress. In this case it uses the Soliloquy slider however you can…

Equal Height Inline Header Image & Header Right Widget Banner Image

This tutorial provides the code which makes your header image and a banner image you add to the header right widget area, equal height. Tested using the News…

Add Foodie Pro Nav Menu Item Styling To News Pro

This CSS changes the styling for the top level menu items in News Pro to Foodie Pro. Its a basic modification you can make under the Site Navigation…

Site Title Over Full Width Header Image & Logo Floated Right

This tutorial shows you how to add a mobile responsive, full width image to the site header of the News Pro child theme by StudioPress. On top of…

No Sidebar Pro Theme Tutorials

Tutorials in this archive contain solutions related to the modification & customization of the No Sidebar Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Show Post Title On Image Hover – No Sidebar Pro Front Page

This solution displays the entry title centered over the featured image on hover. The entry meta including the author avatar are removed. Watch Demo Video # Also removes…

No Sidebar Pro Entry Title Overlay Featured Image

This solution enables you to reposition the entry title over the featured image targeting the front page of the No Sidebar Pro child theme by StudioPress. Written for…

Replace No Sidebar Pro Front Page Loop With Newsletter Sign Up Widget

There's 2 solutions in this post : 1. This code removes the loop of posts from the front page and replaces them with a single widget area for…

No Sidebar Pro Front Page Using CSS Grid

No Sidebar Pro front page displays posts in uneven columns ( 58% & 38% ) by filtering the post class and adding custom classes using a wp_query counter.…

Use No Sidebar Front Page As Blog or Archive Page Template

A member of the Genesis community contacted me via Facebook messaging about the No Sidebar Pro theme and wanted to know how to make her blog page template…

No Sidebar Pro – Change Featured Image To Display Full Width On Front Page

By default, the No Sidebar Pro child theme by StudioPress displays full width for the most recent post and then in a grid for all other entries in…

Outfitter Pro Theme Tutorials

Tutorials for customizing & modifying the Outfitter Pro child theme by StudioPress which includes custom functionality and styling for WooCommerce. The tutorials also enable you to add custom functionality and styling to this child theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Responsive Text Over Image Behind Header On Front Page of OutFitter Pro

This solution is a extension of this tutorial which adds a image after the header on the front page of Outfitter Pro theme. [gallery columns="2" size="medium" ids="68555,68556"] The…

Responsive Text Over Image After Header On Front Page of OutFitter Pro

This code adds a image named image.jpg from the Outfitter Pro themes images folder after the header on the front page only like this : The title and…

Outfitter Pro Shop Page Like Front Page 2 Products Widget

The solution in this download enables you to display your shop page ( product archive page ) the same as the front page 2 widget area which displays…

Replace Masonry With CSS Grid In Outfitter Pro

Outfitter Pro is the latest StudioPress child theme for WooCommerce which uses a masonry layout on the front page. This tutorial shows you how to use pure CSS…

Outreach Pro Theme Tutorials

The Outreach Pro archives include tutorials related to the default modification & customization of the Outreach Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Outreach Pro Theme Fixed Header

You can make the Outreach Pro themes header sticky by using the CSS from the Genesis Sample theme. [code] @media only screen and (min-width: 960px) { .site-header {…

Change Header Image Size In Outreach Pro Theme

The default size for the Outreach Pro themes header image is 340px by 100px which you can see in the functions.php file on lines 34 & 44. You…

Logo Over Full Width Header Image

This solution enables you to add a full width background image which covers the entire site header container. And, you can also addd a logo which floats over…

Remove Footer Widgets From Any Page In Genesis

This tutorial provides 2 ways to remove the footer widgets in any Genesis child theme. Based on this question from a member of the StudioPress community forums :…

Remove Sub Footer Widgets From Front Page of Outreach Pro

A member of the Genesis community asked this question on the StudioPress community forums : I just installed outreach pro. I want to remove from just the home…

Add Home Middle Widgets to Outreach Pro Themes Front Page

This tutorial provides all the PHP code you can replace in the default front-page.php file included in the Outreach Pro child theme by StudioPress. The code adds a…

Custom Page Template The Same As The Outreach Pro Themes Home Page

This code creates a custom page template which uses exactly the same classes as the front page of the Outreach Pro child theme by StudioPress. Simply create a…

Display Outreach Pro Sub Footer Widgets On Front or Home Page Only

The Outreach Pro child theme from StudioPress includes 2 sub footer widgets of different widths which display on all pages of your site. Robert asked me this question…

Outreach Pro – Add Extra Home Page Widget

I wrote this tutorial in response to this question: Outreach Pro Theme – Add Extra Home Page Widget I would really appreciate it if someone could provide me…

Pagination

This archive includes tutorials with code that enable you to modify & customize the default archive page pagination and single entry post navigation in Genesis for both the numeric and Previous | Next page entry pagination. Functions in these code snippets include genesis_posts_nav, genesis_prev_next_posts_nav, genesis_numeric_posts_nav, previous_post_link and next_post_link

Add Pagination to WordPress Gallery Image Attachments In Genesis

The code in this template enables you to add pagination to images added to create a WordPress gallery as long as they where uploaded to the single post…

Add Links to Previous and Next Single Custom Post Type Entries In Same Taxonomy Term

This code enables you to dynamically add previous & next entry inks to entries in the same taxonomy term only. You can use this code with any custom…

Link Single Posts In Same Category

The code in this tutorial enables you to add single post navigation which links posts in the same category. The code is fully customizable enabling you to change…

Add No Follow To Next & Previous Post Links

These code snippets, once added to your child themes functions file, enable you to add rel="nofollow" to the single post navigation links in Genesis or any other theme.…

Add Next & Previous Navigation Links To Entries In Same CPT Taxonomy Type

This code enables you to add next & previous links to single CPT's in the same term. Example : If you create a custom posy type named Portfolio…

Archive Pagination In Genesis Nav Menu

This code enables you to move the archive page next & previous pagination links to your nav menu like this: The above image shows the result when choosing…

Modify Archive Page Navigation Links or Genesis Pagination

This PHP code enables you to modify the page navigation links in Genesis child themes. The code gives you the flexibility to: Remove pagination from specific archive pages…

Single Post Navigation With Excerpt

This code produces next and previous post links after all single post entry content. The single post navigation also includes the excerpt for both the previous and next…

Modify Genesis Archive Page Pagination in Numbers Format

This code enables you to modify the default pagination in Genesis. Simply paste the code at the end of your child themes functions file and modify it to…

Add Single Post Navigation In Genesis

This code enables you to reposition the single post navigation links in Genesis to any hook position. This post also includes the code to modify the default single…

Using WP Rewrite to Change the Page Slug for Archive Pagination

This code should be placed in your child themes functions file and will change the default pagination slug from page to article. You will also need to re-save…

Add Latest Posts With Pagination To Front Page With Widgets

Most StudioPress themes include a front page file which normally includes widgets. If you also want to includes your latest posts dynamically, you can enable the standard loop…

2 Ways To Add Next & Previous Navigation Links To Single Custom Post Types

Single post navigation links are valuable because they link all your posts together. This increases page views and acts a bit like a sitemap which the search engines…

Adding Next & Previous Post Nav Links In Genesis

I've already shown you how to add next and previous post links in themes which include a single.php file. Update: You'll find more solutions with this more recent…

Previous & Next Single Post Navigation Links In WordPress

Connecting all your posts together is not a bad way to make sure all of them are indexed in the search results. Its also not a bad way…

Parallax Pro Theme Tutorials

The Parallax Pro archives include tutorials related to the default modification & customization of the Parallax Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

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…

Add WooCommerce Cart To Nav Menu Widget In Genesis

This code adds the WooCommerce cart icon with the total amount of items and price to a navigation widget in the before header utility bar. Requires the activation…

Menu Logo Menu Using CSS Grid In Parallax Pro

The solution in this download folder enables you to display the primary menu to the left, the header image in the middle and the secondary menu to the…

Copy Front Page Template With Unique Widget Areas Using Different Background Images – Parallax Pro

This page template in this download folder can be used once only to make an exact copy of the Parallax Pro themes front page. Note : If you…

Replace Video With Image On Mobiles Behind Parallax Pro Themes Home Section 1 Widget

This solution extends the code in this tutorial which replaces the home section 1 background image with a video. In this case, the background image is only replaced…

Add Centric Pro Scroll Down Arrow To Parallax Pro

This tutorial shows you how to add the down arrow from the Centric Pro child theme to the Home Section 1 widget area in the Parallax Pro child…

Parallax Pro Front Page As Page Template – Easy Setup Version

This template enables you to create unlimited pages like the front page of Parallax Pro child theme by StudioPress. The template only works when used with Parallax Pro…

Genesis After Header Parallax Template

This download includes 2 templates which enable you to add a image after the header with the Parallax Effect. You can overlay either the (1) post/page title or…

How To Replace Images On Mobile Screens Only

This download includes the code which enables you to display a different background image for any widget area on mobiles. In this case, you can use the code…

Add Social Icons After Header Right Widget Nav Menu

This solution enables you to add social icons after the Navigation Menu widget in the Header Right widget area like this : On smaller screens, the social icons…

Add Social Icons Before Header Right Widget Nav Menu

This tutorial provides 2 solutions which enable you to add the Social Icons widget perfectly vertically aligned centre before the navigation widget in the header right widget area…

After Header Parallax Image

This download adds a widget area after the header with a background image. The widgets background image moves at a different speed to the overlaying content when scrolling,…

Add Parallax To Genesis Sample Theme

This template adds parallax to the background image sections in the front page of the new version of the Genesis Sample child theme by StudioPress. The background image…

Add Parallax To Infinity Pro Themes Front Page Image Sections

This tutorial shows you how to add a parallax scrolling effect to front page 1, 3, 5 & 7 background images so they move at a different speed…

How to add Parallax Scrolling effect to Header Hero in Essence Pro

This tutorial provides 2 different ways to add the parallax effect to the Header Hero on the Essence Pro themes front page. Firstly, here's the demo video showing…

Parallax Pro Full Width Responsive Site Header Elements

This tutorial enables you to increase the width of the header right widget area for the nav menu widget so all menu items display on 1 line like…

Parallax Pro MP4 Video Background Behind Home Section 1

The code in this tutorial enables you to replace the home section 1 background image with a full screen WordPress hosted MP4 video background in the Parallax Pro…

Replace Home Section 1 Background Image With Slider in Parallax Pro

This tutorial provides the code which enables you to replace the home section 1 background image in the Parallax Pro child theme by StudioPress with a full width…

Add Full Browser Width Slider to Any Parallax Pro Home Section Widget Area

This tutorial shows you how to add a slider to any widget area in the front page of the Parallax Pro child theme by StudioPress. Here's the result…

Add Content Sidebar Layout Styled Like Sample Theme To Parallax Pro

This tutorial provides the instructions and code edits you need to make to add a sidebar to the right of the content area on all pages excluding the…

Patterns

Tutorials in this archive include code which modifies or adds custom functionality for WordPress block patterns. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Custom Call To Action Block Pattern For Any WordPress Theme

This tutorial provides the code which enables you to add a custom pattern to any WordPress theme. In this case, we add the pattern to the Twenty Twenty…

PHP Code

The tutorials in this archive help people read, write & use PHP code in Genesis child themes.

template_include

Using the template_include function included in WordPress, paste this PHP code at the end of your child themes functions.php file and modify accordingly. [code] add_filter( 'template_include', 'single_page_template', 99…

get_body_class

This free code checks the body classes and executes your code if the body class exists. In this case, the code executes on any page which includes custom-class…

if else

if .... else is used as a conditional statement or conditional expression which enables you to execute code if a specific condition returns true otherwise execute other code…

array

There's 3 types of functions which use array() out of the dozens of different array functions you can use in PHP. This tutorial explains the simplest & most…

class_exists

You can use class_exists to check if a plugin is active. ( Watch the video below which tests the code examples in this tutorial ). You need to…

foreach

The foreach construct only works with arrays. This means you must either use an array like this: array( '1', '2', '3' ); Or functions which return an array…

sprintf

sprintf is similar to printf however is used to return the result as a value for a variable to be used later rather than output immediately. Here's the…

add_action

add_action is a function which you'll see in WordPress, Genesis & other theme files. You've probably seen code in a file which looks something like this: [code] add_action(…

printf

You've probably seen code in your files which looks like this: [code] printf('%s World', $var ); [/code] This code includes a function named printf() which in most cases…

variable

You've probably seen code which includes the $ dollar sign like this: [code] $output [/code] This is whats called in PHP language, a variable. WordPress & Genesis use…

Ternary Operator

There's at least 3 ways to code if conditionals and else statements in WordPress using PHP. In the first 2 examples below, we'll use the most common methods…

Post Categories

Tutorials in this archive relate to modification/customization of the default post_categories shortcode functionality included in Genesis.

Exclude Child Category Links From Entry Meta

This code enables you to exclude or include all/specific child/sub categories from the entry meta in the entry footer of Genesis child themes. By default, Genesis uses a…

Reposition Post Categories Below Post Info In Entry Header

This tutorial provides the custom PHP code based on the following question from a member of wp sites : I want to display the post_meta categories in the…

Exclude Category Links From Genesis Post Categories Shortcode

The genesis post categories shortcode prints all the categories you have assigned to each post in the entry footer on single posts and archives. The function for this…

Use Categories and Tags With Your Custom Post Type

Once you create a custom post type, you can either: Add support for creating custom taxonomy types to your existing CPT code Or add support for categories and…

post_class

Minimum Pro – Change Portfolio Archive Entries To 3 or 4 Columns

By default, the Minimum Pro child theme by StudioPress is coded to display the portfolio archive entries in 2 columns like this: This tutorial shows you how to…

pre_get_posts

The pre_get_posts hook enables you to modify whats included in any archive page type loop before it runs making it one of the most efficient ways to alter any original query before WP_Query has been set up.

Show Sticky Posts Only On Front Page

Assuming your home page reading settings are configured to display your latest posts in a paginated archive rather than a static page, you can use this PHP code…

Only Show Specific Pages or Posts On Home Page

This code enables you to select which single pages you want displayed on the front page of your WordPress site. It excludes all posts and only shows pages.…

Include Single Pages With Posts In Home Page Loop

This code laters the main query for the home page loop to include single pages with posts. Add the PHP code to the end of your child themes…

Set Posts Per Page For Any Archive Type

Use this code in your child themes functions file with a conditional tag to target a specific archive page type to set posts per page. [code] add_action( 'pre_get_posts',…

Return Search Results After A Specific Date

If you want to exclude older posts from your search results, you can using pre_get_posts. The following code uses the date_query from WP_Query. Only returns results after the…

Add Custom Field To Genesis Loop

This code enables you to add custom field content like text, HTML & images to the Genesis loop. You can use the code 2 ways: The 1st snippet…

Genesis Search Results Template You Can Fully Customize

This template for Genesis, enables you to customize how the search results are displayed on the search results page. The template includes settings in the code which you…

Minimum Pro – Change Portfolio Archive Entries To 3 or 4 Columns

By default, the Minimum Pro child theme by StudioPress is coded to display the portfolio archive entries in 2 columns like this: This tutorial shows you how to…

Set Posts Per Page For Tag Archive

This code enables you to set the posts per page limit for any tag archive page. This way you can over ride the WordPress > Reading settings which…

Exclude From Genesis Blog Page Template

This code enables you to exclude single posts & pages as well as posts in different types of archives like author, category, search, and tag archive type pages.…

Set Different Amount of Posts Per Page For Each Archive

This code enables you to set a different amount of posts per archive page, otherwise use the default WordPress Reading settings. The example snippet in this tutorial sets…

Exclude Latest Post From Home Page Loop

In this tutorial. i'll provide the code i tested which excludes the latest published post from your home page loop. Simply copy this PHP from the view raw…

3 Ways To Remove or Exclude Posts From Your Home Page Loop

There's at least 3 ways you can exclude one or more single posts from your home or posts page depending on your Reading Settings. You can use CSS…

Add Custom Post Type (CPT) Pages To Posts Page

By default, only posts are displayed on your posts page which can either be your home page or blog page depending on your Reading Settings. If your theme…

Customize Archive Pages Conditionally Using Pre Get Posts

In this tutorial, i'll give you several PHP code snippets i have tested locally which enable you to customize how your posts are displayed on any archive. Modify…

3 Ways To Display Posts In One Category On Front Page of Genesis

This is a beginners guide to setting up what posts display on the front page of your site. If you only want to display posts from one category…

Product Image

The tutorials in this archive relate to the modification of WooCommerce product images via your child theme. Many of the tutorials include code which is tested in Genesis. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

How To Make WooCommerce Shop Page Images Link To Other Websites

Good question asked recently about making the shop page product images link to external sites rather than the single product page. This tutorial provides 2 different solutions as…

Custom WooCommerce Product Image

This solution enables you to modify the main single product image in WooCommerce. This main image is the image added via the Product Image link which replaces the…

Add WooCommerce Product Images Using ACF

This code enables you to add product images using Advanced Custom Fields. You can add a unique product image on any Edit Product screen using ACF. Watch Demo…

Add WooCommerce Product Images Using WP Custom Fields

This code enables you to add your own custom image for each product. If no custom image is added, the placeholder image from Woocommerce is displayed as seen…

Read More

The tutorials in this archive contain code which enables you to style, customize and modify the default functionality of the read more link in Genesis child themes including the Genesis Featured Posts widget and some WordPress themes.

Custom Read More Text For Genesis Featured Posts Widget

By default, the Genesis Featured Posts widget only enables you to display the same read more text for every post displayed in the widget. In this download folder,…

Modify Read More Link Text In Genesis 2.7 +

You can use the genesis_more_text filter added in version 2.7.0 of Genesis to modify the default output for the more text used with the_content_limit() and the_content() functions in…

Set Word Limit For Archive Content or Excerpt Limit

This tutorial includes 2 code snippets which enable you to control how many words are displayed on archive pages. Using the Genesis > Theme Settings > Content Archives…

Change Read More Text Conditionally

A member of the Genesis community asked : Is there a way to change the "read more" text in certain categories? I am aware of how to change…

Add Custom Read More Link To Excerpts

The code in this tutorial enables you to do 2 things : You can control the length of the excerpt Add a custom read more link to the…

Link Read More Link To Custom URL

This code enables you to add a button to the read more link and link it to any URL. If no URL added, the read more button links…

Link Read More Link to Any URL

This code enables you to conditionally link the read more link to any URL. Here's the demo video: The code in this tutorial includes examples which enable you…

Add No Follow To Read More Link

This code enables you to add the rel="nofollow" attribute to the read more link. The code works using any of the following: when using the WordPress More Tag…

Add a Custom Read More Link After Hand Crafted Manually Added Excerpts

This code enables you to display a custom read more link after any excerpts you have added to your post manually in the excerpt box shown below which…

Change Read More Link Into a Button

This code enables you to make the read more link into a button. Here's the result: And here's the code which you can add to your child themes…

Move The Read More Link Position To The Next Line

This tutorial provides the PHP code which enables you to filter the read more link in Genesis. It also includes code to modify the read more link when…

How To Add A Icon After A Read More Link

The CSS code below adds any Dashicon after the read more link on your archive pages. Here's the default read more link with a bit of styling: Here's…

Refined Pro Theme Tutorials

Posts in this archive relate to modification & customization of the Refined Pro child theme by Lauren Gaige @ Restored 316 LLC. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and/or videos. Installation of all code as well as support for PHP code is provided for members.

Refined Pro – Replace After Header Desktop Image With Different Image For Mobile Screens

This tutorial extends this tutorial by enabling you to replace the default after header image with a different image for mobiles. Here's the before ( desktop ) &…

Refined Pro – Replace Slider With Image

This tutorial provides a simple solution to replace the after header slider with a static image on the front page of the Refined Pro theme by Restored 316…

Refined Pro Remove Date From Front Page Entries

Here's the Refined Pro themes front page entry showing the date on the left side of the entry : To remove the date, following these instructions : Between…

Show Full Content on Genesis Search Results Page

This template enables you to show the full content of each entry on the search results page in any Genesis child theme. The code over rides the Genesis…

Reposition Title After Category in Refined Pro

This code enables you to reposition the entry title and entry meta like this : Based on this question from a member of the Genesis community : I…

Reusable Blocks Tutorials

The tutorials in this archive contain solutions relating to coding custom reusable blocks used in WordPress theming. The code is guaranteed to work as shown in the tutorial screenshots and videos. Installation of all code as well as support for PHP code is provided for paid members.

Add Reusable Blocks Link To WordPress Toolbar

The code in the download folder adds a custom link in your admin toolbar to the Reusable Blocks page. Download Folder Copy & paste the code ( without…

Add Reusable Blocks Link To WordPress Dashboard Menu

Paste this code in your custom functions plugin, themes functions.php file or Must Use plugin. [code] add_action( 'admin_menu', 'reusable_blocks_link_wp_admin' ); function reusable_blocks_link_wp_admin() { add_menu_page( 'linked_url', 'Reusable Blocks', 'read',…

Aweber Email Hero Block In WordPress

This tutorial provides the steps which enable you to add your Aweber signup form anywhere in any theme and style it like you see in the following screenshot…

Aweber Email Form Styled Like Genesis Newsletter Block

This tutorial provides the code which enables you to add your Aweber email signup form in the header hero section on Essence Pro theme front page like this…

Add Email Optin Form Block To Hero Header In Essence Pro

By default, the Essence Pro themes front page header hero section displays 2 buttons. In this tutorial, you'll get : A custom reusable block you can import. And…

Revolution Pro Theme Tutorials

Tutorials in this archive relate to the modification of code and/or addition of custom functionality to the Revolution Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Replace Image With Slider In Revolution Pro Themes Home Page

This tutorial provides the steps which enable you to replace the home page image with a responsive slider like this - Demo Video Shows the slider replacing the…

Toggle Search Bar Over Site Header Menu In Genesis Child Themes

The code in this download folder enables you to add the search bar from the Monochrome Pro child theme to any other Genesis child theme. However, this code…

Full Width Image Block Revolution Pro Front Page

This tutorial shows you how to make the windows image block ( first image ) added using Gutenberg in the Revolution Pro themes front page extend to the…

Roles & Capabilities

The tutorials in this archive relate to modification & customization of user roles and capabilities in Genesis child themes.

Modify Site Title URL Based On User Capability

The code in this tutorial enables you to change the site title link based on the user capability. In this case, the site title links to the about…

Move Users Posts To Draft When User Role Changes After Expired Subscription

The code in this tutorial is a extension of the code in this tutorial which enables you to delete the posts of users when their role changes. When…

Delete Posts For Expired Subscribers When Role Changes

This tutorial provides the code which enables you to delete all posts ( and change capabilities ) for any user role if the subscribers role changes to customer.…

3 Ways To Change User Roles

Here's a quick tip giving you a few options to choose from if you need to change a users role. 1. You can go to Users and edit…

How To Add a Custom User Role With Specific Capabilities

This code enables you to very easily create custom user roles once added to your functions file. If you want to make a membership site using code rather…

Remove Capabilities For Any User Role

WordPress enables you to remove any capabilities pre assigned to any user role. In this 1st example, the code removes specific capabilities for the editors role preventing all…

Restrict Access To Custom Post Types By Users Capability

If you want to control which users have access to your custom post types, you can simply by adding some extra code to your existing code which registers…

Remove Admin Menu Links for the WordPress SEO Plugin

The PHP code in this post should be copied from the view raw link and pasted at the end of your child themes functions.php file. The code only…

Redirect User To Specific Page Based On Their Capability After Logging In

This PHP code redirects any user who isn't capable of updating the core (Only admins) to a specific url on your site. The PHP code includes the current_user_can()…

Remove Different Admin Menu Links For A Specific User Profile

This PHP code enables you to replace the user@email.com address with the registered email address of a specific user and remove the menu links they don't need access…

WordPress User Role Capibilities

Have you ever thought about finding other bloggers to help manage your WordPress administration? The only problem is you need people who you can trust. You also need…

Search

Tutorials in this archive contain code which enables you to add, edit, customize, style or modify a search form, search results or search widget in Genesis child themes. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Custom Fields On AgentPress Search Results Page

This search results template for AgentPress Pro enables you to display custom fields on your search results page like this : The code in this download folder (…

Essence Pro Logo Menu Search Perfectly Inline

This CSS enables you to display your logo, menu & search form inline like this : You can also display the header elements in any order like logo…

Genesis Search Results Page The Same As Your Archives In Navigation Pro

This template enables you to display search results the same as your archive pages. In this example, we'll display the search results on the Navigation Pro themes search…

Twenty Nineteen Header Widget

This tutorial contains the steps which enable you to add a widget area in the header of the Twenty Nineteen default theme for WordPress. In this case, a…

Add Search To Header In Twenty Nineteen

This solution shows you how to add a search form inline with the logo, site title and nav menu in the Twenty Nineteen default theme for WordPress. The…

Template To Show Hero Image Behind Search Results Page Title in Genesis

This template shows a image behind the search results page title in Genesis like this : Demo Video # Shows the image named search.jpg uploaded to the child…

Search Results Page Showing Featured Image Entry Title and Custom Field Values

This search results template for Genesis child themes enables you to remove the excerpt/content & show the featured image, entry title and custom fields in any order you…

Toggle Search Bar Over Site Header Menu In Genesis Child Themes

The code in this download folder enables you to add the search bar from the Monochrome Pro child theme to any other Genesis child theme. However, this code…

Excerpts & Titles Only Genesis Search Results Page Template

This template includes code snippets which enable you to fully customize your search results page in any Genesis child theme. In this example, the title and content limit…

Show The Content Limit And Custom Field Value For Specific Post Types In Search Results

The code in this download folder enables you to customize your search results. In this case, the code enables you to limit the content by number of words…

Show Custom Field Value And Or Content For CPT And Standard Post Types In Search Results

This download folder contains 3 different code snippets. The code customizes the search results enabling you to return the custom field value and/or content for single posts and/or…

Expanding Search Box In Site Header – Genesis Sample Theme

The code in this download folder is an update to this older Javascript solution which uses pure CSS and no Javascript. The solution uses the genesis_header_right hook to…

Animated Search Form In Header Right Widget – Genesis Sample Theme

The 2 solutions in this tutorial add back the header right widget area and also includes code to vertically align the search widget in this widget area like…

Use Custom Field Content For A Custom Post Type In Genesis Search Results

This code enables you to alter the content shown on the search results page in Genesis child themes. In this example, the default content is replaced with the…

3 Ways To Add Search To Academy Pros Nav Menu

This tutorial contains a download folder which includes 3 different code snippets providing 3 different ways to add a search form in the primary nav menu of the…

Genesis Sample Theme – Animated Search Form in Nav Menu

This code adds a animated search box with icon to the Genesis Sample themes nav menu. In this case, the menu is hooked inside the header so the…

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…

Menu Title Search In Mobile Genesis Header

This solution enables you to display the toggle menu, site title or header image and search form inline on smaller screens like this : This tutorial is based…

Add Search With Icon To Mobile Menu In Essence Pro

This tutorial provides the solution which enables you to add the search field with icon to the start of the mobile drop down menu in the Essence Pro…

Add Search Form To Mobile Menu in Genesis

This code enables you to add a search form before the primary nav menu items in the mobile menu like this : The download folder for logged in…

Showcase Pro Theme Tutorials

Posts in this archive relate to modification & customization of the Showcase Pro child theme by bloomblogshop.com. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Showcase Pro – Remove Featured Image & Show Same Page Header

This tutorial provides the code which enables you to show the same image on single posts, single pages and archive pages including the home.php and page_blog.php templates. By…

Showcase Pro – Use Custom Image As Single Post Entry Header Background

The template in this download enables you to replace the background image behind the entry header/title with a custom image added using ACF or WordPress custom fields. If…

Add Entry Meta Shortcodes After The Post Title In Showcase Pro

This tutorial shows you hot reposition the post info so its immediately after the entry title which is displayed over the featured image after the header on single…

Replace Showcase Pro Front Page Header Image With Slider

This tutorial provides the solution which enables you to replace the page header background image with a responsive slider on the front page of the Showcase Pro theme…

Replace Showcase Pro Page Header Image With Custom Image

By default, the Showcase Pro page header uses the featured image as the background. The code in this tutorial enables you to display a custom image in replace…

Remove Showcase Pro Page Header Image Conditionally

The code modification in this tutorial enables you to conditionally remove the page header image without removing any of the functionality or classes included within the showcase_page_header() function…

Simple Social Icons

This archive contains tutorials which include code that enables you to modify, customize and style the Simple Social Icons plugin. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Add SVG Icons To Custom Nav Menu In Genesis

This code enables you to add simple SVG icons to a custom nav menu named Social in any Genesis child theme. The code is written to detect the…

Add Header Right Widget For Simple Social Icons In Infinity Pro

This tutorial shows you how to add the header right widget back in the header of Infinity Pro. In this example, we add the Simple Social Icons widget…

Add Header Right Widget For Social Icons To Essence Pro

This download folder includes the code which adds a widget area to the header right position. In this case, we add the Simple Social Icons widget in the…

Add No Follow To Links In Simple Social Icons Widget

The code in this post provide different ways to add the rel="no-follow" attribute to all links output by the Simple Social Icons plugin developed by StudioPress. Here's the…

Add Social Icons After Header Right Widget Nav Menu

This solution enables you to add social icons after the Navigation Menu widget in the Header Right widget area like this : On smaller screens, the social icons…

Add Social Icons Before Header Right Widget Nav Menu

This tutorial provides 2 solutions which enable you to add the Social Icons widget perfectly vertically aligned centre before the navigation widget in the header right widget area…

Altitude Pro – 2 Ways To Add Simple Social Icons To Nav Menu In Site Header

This tutorial provides the code for solutions which enable you to add the Simple Social Icons next to the primary or secondary nav menu in the header of…

Infinity Pro Responsive Title Menu Social Widget in Site Header

This tutorial contains the code which enables you to display your site title, nav menu and the simple social icons widget inline on desktops and responsive on iPads…

Add Social Icons To Infinity Pro Themes Nav Menu

This tutorial enables you to add social icons inline with the header menu in the Infinity Pro child theme by StudioPress. Here's the result: You can see the…

2 Ways To Add Social Icons After Your Site Title in Genesis

This code enables you to display your social follow icons after your site title in Genesis. Here's the result without any CSS for styling added: The code in…

Change Simple Social Icons Background & Hover Color

In this post, i'll give you the CSS code which you can use to change the background and hover colors of each button when using the Simple Social…

Site Description - Tagline Tutorials

This archive contains tutorials which include code that enables you to modify the default output for the Genesis site description function so you can customize the tagline using the genesis_seo_description filter. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Show Site Description After Header Image In Gallery Pro

This tutorial shows you how to display the site description ( tagline ) when a header image ( logo ) has been added. Generally, when you add a…

Change Genesis Site Description – Tagline Conditionally

This code enables you to use any conditional tag to change the site description which some people refer to as the tagline. In this example, the site description…

Minimum Pro Custom Site Description & Tagline Right CTA Button

The code in this tutorial extends the solutions in this tutorial and enables you to add a custom site description within the site-tagline-left div as well as a…

Site Title & Description After Logo In Genesis Sample

This CSS enables you to add your logo image via the header image setting in the customizer and also display your site title and tagline after the logo…

Show Custom Menu, Title, Tagline & Header Widget On All WooCommerce Pages

This code enables you to display a completely different header area for all your WooCommerce pages. Here's a example showing the default header area and custom header area…

Change Site Description Based on Language Using qTranslate-X Plugin

The qTranslate-X plugin language selector changes the language code in the HTML page source. This enables you to use code to display different site descriptions when different languages…

Show Different Site Description Based on Language Setting

This code works based on the language you set in Settings > General > Site Language. The language you set will output in the HTML source code which…

2 Ways To Add Social Icons After Your Site Title in Genesis

This code enables you to display your social follow icons after your site title in Genesis. Here's the result without any CSS for styling added: The code in…

Add Widget After Site Title in Genesis Replacing Description

This code enables you to display a widgets content after the site title conditionally. In this example, it only displays the widgets content ( search widget ) on…

Add Background Image To Minimum Pro Themes Tagline

This tutorial simply shows you how to add an image to the background of the site tagline area in the Minimum Pro child theme by StudioPress. Here's the…

Add Logo Above Tagline/Description In Genesis

This PHP code enables you to show your logo on top of your site description/tagline. Simply upload your logo to your child themes images folder. Copy the PHP…

Remove Genesis Site Description Conditionally

Both these code snippets include a conditional tag which removes the site description from the front page. You can modifiy, replace or add to the conditional tag based…

Add Clickable Site Description With Custom Font

In this tutorial, i'll provide the PHP and CSS code you can use or modify to make your sites description clickable. All you need to do is hook…

Slider Tutorials

The tutorials in this archive focus mainly on adding a slider or slide show in specific StudioPress & Genesis child themes. You'll also find many more tutorials relating to the use of sliders which aren't included in this archive as they haven't been tagged. The code in every tutorial is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Slider In Essence Pro Header Hero – New Version

This tutorial, written for the latest version of Essence Pro, includes the code which enables you to replace the header hero image on the front page with a…

Genesis Template For ACF Repeater Fields

This template for Genesis child themes includes the code to display your Advanced Custom Fields repeater fields in a custom loop. In this example, the loop includes sub…

Replace Image With Slider In Revolution Pro Themes Home Page

This tutorial provides the steps which enable you to replace the home page image with a responsive slider like this - Demo Video Shows the slider replacing the…

Full Width Slider Between Footer Widgets & Footer

This code enables you to add a full width of screen slider between your footer widgets and your footer ( containing your footer credits ) like this :…

Kreativ Pro Front Page 1 Slider

This code replaces the background image for the front page 1 widget area with a slider show in Kreativ Pro. Demo Video # Shows the front page 1…

Slider Behind Site Header & Home Featured Widget In AgentPress Pro

This solution replaces the background image which that displays behind the site header and home featured widget area with a slider. The code in this tutorial produces a…

Multi Item Slider For Genesis

This multi item slider is hand coded using PHP specifically for Genesis child themes. The slider enables you to display multiple featured/product images with titles from : Categories…

Wellness Pro – Replace Front Page 1 Widget Area With Slider

This solution uses the Soliloquy slider to replace the front page 1 widget area so you can add captions to each image as seen in the demo video.…

News Pro Slider Behind Site Header Elements

This solution adds a slider behind the site header elements of the News Pro theme by StudioPress. In this case it uses the Soliloquy slider however you can…

Essence Pro – Replace Hero Image On Front Page With Revolution Slider

This tutorial provides the code which enables you to replace the header hero image on the front page of the Essence Pro child theme with the Revolution slider.…

Modify Genesis Responsive Slider

This code enables you to modify the Genesis Responsive Slider widget output via your child theme. In this case, the link for each title has been removed however…

Replace Hero Image With Soliloquy Slider Premium In Essence Pro Hero Section

This version works with both the free and premium version of Soliloquy slider. It replaces the hero image with the slider on desktops and displays the hero image…

Replace Hero Image With Soliloquy Slider In Essence Pro Hero Section

This solution replaces the hero image on the front page of the Essence Pro child theme by StudioPress. It only replaces the image on desktops and displays the…

Replace Essence Pro Hero Image With Slider

This solution enables you to replace the hero image with a slide show like you see in the following demo video : Demo Video # Shows the responsive…

Genesis Responsive Slider – Include Multiple Post Types

This code enables you to include entries from multiple post types in the Genesis Responsive Slider. By default, the slider settings only enable you to use entries from…

Infinity Pro Replace Front Page 1 Widget With Soliloquy Slider

This tutorial enables you to replace the front page 1 widget area with a slider. The download folder includes code to add a responsive, unique title, description and…

Replace Featured Image With Slider On Archive Pages

This download includes 3 files which do the following : The 1st file single.php contains code which enables you to add a slider before the content on any…

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…

Add Slider To Infinity Pro Front Page 1 Widget Background

This solution replaces the background image behind the front page 1 widget area in Infinity Pro with a slider like this : The solution works on screen resize…

Academy Pro Slider Before Header

This code enables you to add the Soliloquy slider before the header to any Genesis child theme. Tested using the Academy Pro & Genesis Sample child themes by…

Smart Passive Income Pro Theme Tutorials

Tutorials in this archive contain solutions related to the modification & customisation of the Smart Passive Income Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Smart Passive Income Pro – Remove Comment Bubble in SPI Theme

This tutorial shows you how to remove the comment bubble with the comment count from the Smart Passive Income Pro child theme by StudioPress. This post answers this…

Add MP4 Video Background To Front Page 2 Widget In Smart Passive Income Pro

By default, the front page 2 widget area in the Smart Passive Income Pro child theme by StudioPress displays a background image. The image is added via the…

Add Slideshow To Front Page 2 Widget Background in Smart Passive Income Pro Theme

This tutorial provides the code which enables you to add a slideshow to the front page 2 widget background in the Smart Passive Income Pro child theme by…

Genesis Full Width Header Image

This tutorial provides several solutions which enable you to add a full width header image in most genesis child themes. Both solutions have been tested on the Genesis…

Tabs

The tutorials in this archive include the jQuery tabs function .tabs() which enables you to creates tabs in Genesis child themes. Installation of all code as well as support for PHP code is provided for members.

Single Posts In Tabs Using Genesis

The code in this tutorial enables you to create tabs ( using code, not plugin ) which display the entry title, featured image and content limit. You can…

Display Single Posts In Tabs

This code enables you to hook in any number of tabs containing selected posts by post id. The code includes a comma separated list of post id's which…

Genesis Tabs Widget You Can Fully Customize

The code in this tutorial enables you to add a tabs widget directly to your Genesis child theme folder. This way you modify both the functionality of the…

Add Tabs in Genesis Child Themes

This code enables you to add tabs anywhere in any theme. Here's the result with basic styling: Once you install the code, all you need to do is…

Genesis Tabs Template With Custom Fields

This page template enables you to add content via the native WordPress custom fields meta boxes located on every Edit Page. Setup Instructions Using a code editor, create…

Genesis Tabbed Widgets Template

This page template includes 5 widgets areas which only display when populated with any type of content. If you want to use this template on multiple pages with…

Genesis Tabbed Content Template

This tutorial provides code for adding tabs in a page. The template enables you to show and hide content simply by clicking each menu item. Video Demo Installation…

Taxonomy Terms Tutorials

Tutorials in this archive include code which relates to the use of custom post types, custom taxonomy types, taxonomy terms. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

How to add text to the bottom of category and tag archive pages

This code enables you to add content to the end of your archive pages like this. The content is added using the Advanced Custom Fields plugin. If none…

Custom Archive Page Template For Child Categories In Divi

The code in this download folder includes a template and custom functions to load the template on specific child category archives in Divi. In this example, we change…

Inline Style Nav Menu Items For Each Category Using walker_nav_menu_start_el

The code in this download folder adds a color picker to your Edit Category Pages which you can set to style each category nav menu item a different…

Color Picker To Style Post Meta

The code in this download folder produces exactly the same result as this tutorial without the need to use a plugin like ACF or add CSS. You can…

Inline Style Post Category Links Differently Using Color Picker

The code in this download folder enables you use the color picker on the Edit Category page to style your post category links different colors. Once you install…

Show Related Posts by Primary Category Only

This tutorial includes the code which enables you to display related posts in the same category when that category is set as your primary category using the Primary…

How To Stop Your Archive Title & Description Displaying Within Your CSS Grid Columns

When using CSS grid to display entries ( posts ) in columns, you might find your H1 Archive title & description are also displayed in columns like this…

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…

Display The Same Featured Image On Genesis Archive Pages Overriding Single Post Thumbnails For Each Taxonomy

This code snippet enables you to add a default featured image on each Edit Category admin page which is displayed on category archives even when a featured image…

Exclude Specific Category Links From Post Meta In Genesis Entry Footer

This code once added to your child themes functions file enables you to remove one or more categories from the post_categories shortcode output in the entry footer on…

Checkbox To Show Featured Posts From Any Post Type Without Using a Plugin or Widget

This download provides the code which enables you to display one or more entries from any post type, taxonomy and term in any Genesis hook position. By default,…

Order Taxonomy Terms By Hierarchy With Separator 4 Ways

This code enables you to control the order of any taxonomy terms in WordPress including categories, tags and custom taxonomy terms for custom posts types. The code also…

Add Icons To The AgentPress Featured Listings Widget For Beds, Baths & Property Size

This file contains the code which enables you to fully customize the AgentPress Pro featured listings widget and add custom fields with icons like this : The file…

Add Latest Post Before Archive Page Title In Genesis

This code enables you to add your most recent post before your archive page title and all other posts in the loop after your title like this :…

Add Content To Posts In Specific Taxonomy Term ( Conditional Tag )

This conditional tag enables you to target single entries assigned to a specific term for a custom taxonomy. In this case, the taxonomy type slug is industry-type and…

Order Posts By Rating Value In Taxonomy Term Archive

This PHP code, added to your child themes functions file, enables you to order you posts using any WP_Query parameters. I this case, we order custom post type…

Remove Modify Slug From Permalinks For Single CPT Post and Taxonomy Term Pages

The code in this download folder enables you to remove the slug from the permalinks for single custom post types and taxonomy term archive pages. In this case,…

CPT Archive Template With Multiple Loops For Video Taxonomy Terms

As the image shows, this template loads video's with a image overlay in a 3 column grid for each taxonomy term. The template enables you to : Display…

Custom CPT Archive Template For Listings & Custom Fields In Genesis Sample

This template enables you to display your listings without the need to use the AgentPress Pro Listings plugin or the AgentPress Pro theme. You can use this template…

Custom Archive Page Template For Genesis & Dynamik

This archive page template enables you to add custom content before and after entries on all taxonomy type archives including category and tag archive pages. It also enables…

The Content

Code in these tutorials relate to adding content within the content area of single posts and pages. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Add Widget After Any Number of Paragraphs In Genesis

This code enables you to add a custom widget area after any number of paragraphs on single posts and pages. You can use any conditional tags you like…

How To Insert Featured Image Before 1st H2 Tag

This code is similar to this snippet however it enables you to add any type of content, in this case the featured image, before the 1st h2 tag…

Add Featured Image After 1st H2 Heading Tag in Single Posts

This code inserts the featured image after the first sub heading as long as its wrapped in h2 tags. You can change the code to insert after other…

Display Featured Image After Paragraph

This code enables you to add your featured image after any number of paragraphs on single posts. The above example shows the featured image added after the first…

How To Add A Email Opt In Form In The Content Area of a Page

This code enables you to create a custom shortcode for a new widget area. The new widget area is then populated with the Genesis eNews widget which should…

Add Widget On Page Inside Content Area

To display a widget on a page, you could install a plugin which creates a shortcode. Or you could simply add a few extra lines of PHP to…

Display Ads After Specific Paragraph on Single Posts

Displaying different types of advertisements within the content area of your blog posts can be achieved using several methods. According to the experts, placing the ads on the…

Translate Language

Tutorials in this archive contain code which works based on the language settings in WordPress as well as the qTranslate-X & WPML Multi Lingual plugins.

Change Logo For Different Languages

The code in this tutorial works when the WPML ( WordPress Multi Lingual ) plugin is active. It enables you to display a different logo in your themes…

Different Header Image For Different Language

The code in this tutorial, enables you to display a different header image when a specific language is selected using the qTranslate X plugin. The header images can…

Change Site Description Based on Language Using qTranslate-X Plugin

The qTranslate-X plugin language selector changes the language code in the HTML page source. This enables you to use code to display different site descriptions when different languages…

Change Site Title Based on Language Using qTranslate-X Plugin

The qTranslate-X plugin language selector changes the language code in the HTML page source. This enables you to use code to display different site titles when different languages…

Show Different Site Description Based on Language Setting

This code works based on the language you set in Settings > General > Site Language. The language you set will output in the HTML source code which…

Show Different Site Title Based On Language Setting

This code works based on the language you set in Settings > General > Site Language. The language you set will output in the HTML source code which…

4 Ways To Show Different Content Based on Translation Language

This tutorial shows you how to display different content for English language readers and othr content for other languages. You can use the first 2 code snippets for…

Add WPML Language Selector Text Links To WP Nav Menu

This tutorial provides the code which enables you to add the WPML plugins Language Selector Links To any Genesis Nav Menu, like this: The code only works when…

Add WPML Language Selector Flags To WP Nav Menu

This tutorial provides all the PHP and CSS code which you simply copy and paste into your child themes files. The code only works when the WPML plugin…

Twenty Fourteen Theme

The tuts in this archive relate to the modification and customization of the Twenty Fourteen default theme for WordPress. Modifications to parent themes should always be done via a child theme or custom functionality plugin.

Twenty Fourteen – Filter The Post Class With Column Classes On Archives

This tutorial enables you to do add the Twitter Bootstrap column classes to Twenty Fourteen to display your posts in columns on any archive pages. There's 2 steps…

Twenty Fourteen Theme: 2 Ways To Display Excerpts or Limit The Content

By default, the Twenty Fourteen default theme for WordPress displays full content on all archives except on search results pages. You can change this using 1 of 2…

Twenty Fourteen: 2 Ways To Add A Logo Image To Your Site Title Header Area

In this tutorial, i'll provide 2 of the best ways to add your logo image to your site title area of your header. The 1st method involves a…

Twenty Fourteen Theme: Custom Search Results Page

The Twenty Fourteen default theme for WordPress includes a search.php file which includes several template tags. Here's the default search page which includes the featured image and entry…

Twenty Fourteen: 3 Ways to Remove Featured Images From Home Page

There's at least 2 ways to do remove featured images from the home page ( Post Page in Reading Settings ) of the Twenty Fourteen default theme for…

Twenty Fourteen Theme: Add Comment Bubble To Comment Reply Link

In this tutorial, i'll provide the CSS code which enables you to add a comment bubble to the comment link in the post meta of the Twenty Fourteen…

Twenty Fourteen Theme: Show Only Post Titles On Archive Pages

This question was asked on the forums recently which i'll answer with one solution i think is the best: I'm using the Twenty Fourteen theme and think it's…

Add Default Header Image To Twenty Fourteen Child Theme

This code simply pulls an image named header.jpg from your child themes images folder. Copy the PHP code from the view raw link in the GIst and paste…

Twenty Fourteen Theme: Modify Post Meta Date Time & Author Byline

Unlike StudioPress child themes, there's no post meta filter to help you modify the post info data like author name, time and date in the Twenty Fourteen default…

Twenty Nineteen Theme Tutorials

Posts in this archive relate to modification & customization of the Twenty Nineteen parent theme for WordPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Twenty Nineteen Header Widget

This tutorial contains the steps which enable you to add a widget area in the header of the Twenty Nineteen default theme for WordPress. In this case, a…

Add Search To Header In Twenty Nineteen

This solution shows you how to add a search form inline with the logo, site title and nav menu in the Twenty Nineteen default theme for WordPress. The…

Twenty Nineteen Child Theme

This free child theme for Twenty Nineteen enables you to modify the default code including CSS, PHP and jQuery without losing your customizations when the Twenty Nineteen parent…

Menu Logo Menu For Twenty Nineteen Theme

The solution in this download folder enables you to create a split menu which displays menu logo menu in non Genesis themes. In this case, we're using the…

Twenty Twelve Theme

Change Nav Menu For Specific Page In Header.php

This tutorial shows you how to display a different nav menu to your default menu settings on specific pages. It applies to themes which include a header.php like…

Twenty Twelve Theme – Use Different Header Images

This tutorial provides the solution you can use on any default theme like Twenty Twelve, Twenty Thirteen and any of the other default themes: The example in this…

Twenty Twelve Default Theme for WordPress

Twenty Twelve has been officially released today by Automattic. You can download the theme directly from your wp admin panel or go to the themes.trac and grab it.…

Download Twenty Twelve Theme for WordPress

Just Downloaded the new default theme for WordPress, Twenty Twelve (2012). Development of the Twenty Twelve design wasn't quite finished when WordPress 3.4 came out earlier this year so it…

WordPress Twenty Twelve Default Theme – Whats On The Drawing Board So Far

Matt Mullenweg is overseeing the new design for the next default theme for WordPress, Twenty Twelve. Twenty Eleven hasn't been as popular as Twenty Ten even though it…

Twenty Twenty One

Tutorials containing code to modify and customize the Twenty Twenty One default theme for WordPress.

Video Behind Header In Twenty Twenty One Theme

This code enables you to add a video behind the site header of the Twenty Twenty One WordPress theme like this : 2 video upload fields are added…

Image Behind Header In Twenty Twenty One Theme

This code adds your background image behind the site header in Twenty Twenty Two like this : Your background image will always cover the site header container at…

How To Add Featured Image Before 1st H2 Tag 2 Ways In Any WordPress Theme

The code snippets inside this download folder enable you to add your featured image on single posts before the 1st H2 Tag or any other HTML tag. This…

Twenty Twenty Theme Tutorials

Posts in this archive relate to modification & customization of the Twenty Twenty parent theme for WordPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Aweber Email Hero Block In WordPress

This tutorial provides the steps which enable you to add your Aweber signup form anywhere in any theme and style it like you see in the following screenshot…

How to add text to the bottom of category and tag archive pages

This code enables you to add content to the end of your archive pages like this. The content is added using the Advanced Custom Fields plugin. If none…

Show Gravatar On Author Archive If It Exists In Twenty Twenty

The code in this template displays the author avatar only if they have a valid Gravatar hosted image otherwise, nothing. Demo Video Shows the author Gravatar displaying when…

Custom Avatars In Any WordPress Theme

The unique code in this download folder enables you to change the user profile picture for their avatar if desired, otherwise, a Gravatar is shown using their email…

Code Star Rating In WordPress

The download folder in this tutorial contains code which enables you to add a star rating system to your WordPress theme without the need to install more plugins.…

Scroll Indicator JS For WP Themes

Adds a scroll indicator at the bottom of your fixed header in Genesis and other WordPress themes. Only displays on desktops. Includes the files for use in Genesis…

Show a Message at The Top of Your Page For New Site Visitors Using a Cookie

The code in this download folder enables you to conditionally display a message before your sites header like this : In this case, the message is displayed every…

Child Categories Grid For Themes Using Get Template Part

This template for themes using get_template_part() like Twenty Twenty and most other parent themes, generates a responsive grid containing a image & child taxonomy title as seen in…

Child Theme For Twenty Twenty

This free child theme for Twenty Twenty enables you to store your custom code like CSS, PHP & jQuery so it's easy to find and doesn't get lost…

Tutorials for Twenty Twenty Two Theme

Tutorials in this archive include code which modifies or adds custom functionality to the Twenty Twenty Two full site editing theme for WordPress. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Open External/Affiliate Product Links In New Window – WooCommerce

The solutions in these 2 download folders provide 3 different methods which enable you to open external links in new windows without modifying the code in the core…

Custom Call To Action Block Pattern For Any WordPress Theme

This tutorial provides the code which enables you to add a custom pattern to any WordPress theme. In this case, we add the pattern to the Twenty Twenty…

Tutorials Tagged Video

Tutorials providing functions and templates to help you use YouTube, Vimeo and self hosted video links and embed code in Genesis child themes. Includes code to add a video background to widget areas in specific StudioPress child themes. All code as well as support for PHP code is guaranteed for members.

Video Behind Header In Twenty Twenty One Theme

This code enables you to add a video behind the site header of the Twenty Twenty One WordPress theme like this : 2 video upload fields are added…

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…

Replace The Image With Video In Monochrome Pro

This solution enables you to add a responsive video with cover text which overlays the video on all screen sizes. In this case, we replace the background image…

Show Videos in WordPress Post Comments

By default, adding the embed code or a link to a YouTube video in a comment form, won't display your video because the oEmbed discovery for video tags…

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…

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…

Enable Autoplay Videos In Chrome Safari & Firefox on Macs

The solution in this download folder for members enables you to autoplay videos in WordPress in different browsers on Macs. Tested using a iMac and MacBook Air, this…

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.…

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.…

Replace Genesis Block Background Image With Video On Monochrome Pro Front Page

For use with the Monochrome Pro child theme for Genesis, this tutorial provides the code which enables you to replace the background image in the first block on…

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…

Genesis Template For ACF Repeater Fields

This template for Genesis child themes includes the code to display your Advanced Custom Fields repeater fields in a custom loop. In this example, the loop includes sub…

CPT Archive Template With Multiple Loops For Video Taxonomy Terms

As the image shows, this template loads video's with a image overlay in a 3 column grid for each taxonomy term. The template enables you to : Display…

Video With Featured Image Poster In Genesis

This single post template displays your video before the entry title on single posts only. You can add a unique video URL for each single post and display…

Featured Videos On Archive Pages In Genesis

The code in this download folder enables you to replace the featured image with a video on archive pages like this : The code ( as seen in…

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. You can upload your…

Add Full Width Video To Widget Area In Genesis Child Themes

This solution enables you to add a full width of screen video to any widget area like this : The above screenshot shows the video displaying full width…

Replace Video With Image On Mobiles Behind Parallax Pro Themes Home Section 1 Widget

This solution extends the code in this tutorial which replaces the home section 1 background image with a video. In this case, the background image is only replaced…

Replace Video With Image When Genesis Mobile Menu Is Active – Infinity Pro Front Page 1

This solution extends the code in this tutorial which replaces the front page 1 background image with a video. In this case, the background image is only replaced…

Monochrome Pro MP 4 Video Behind Front Page 1 Widget

This tutorial enables you to add a MP4 video behind the front page 1 widget area in the Monochrome Pro child theme by StudioPress. There's 2 CSS options…

Wellness Pro Theme Tutorials

Posts in this archive relate to modification & customization of the Wellness Pro child theme by StudioPress. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for registered members.

Copy Wellness Pro Front Page For Use As Single Page Template

This template can be used with unique content, including background images, on unlimited single pages. You can also display unique content in the sticky message. Demo Video #…

Genesis Blog Page Template Grid With Equal Height Entries – Wellness Pro

This template displays your posts in columns with equal height for each entry regardless of : Title length Content length Featured image size The template code is written…

Wellness Pro – Replace Front Page 1 Widget Area With Slider

This solution uses the Soliloquy slider to replace the front page 1 widget area so you can add captions to each image as seen in the demo video.…

Add Front Page 7 Widget To Wellness Pro

This tutorial provides the 5 steps needed to add a new widget area for an image section to the Wellness Pro themes front page 7 widget area. #…

Add Text Overlay To Featured Image Hover On Single Posts

This code enables you to display text from various sources using different overlay effects when the featured image is hovered on single posts in Genesis. By default, it…

Add 3 Images Inline Below The Header Image In The Title Area

This tutorial provides the code which enables you to add 3 images below your default header image ( logo ) in Genesis like this : On top of…

Add New Full Width Widget To Wellness Pro Front Page 1 Widget Area

This tutorial provides the code which enables you to add another widget to the front page 1 widget area in the Wellness Pro child theme by StudioPress. This…

Don’t Display Featured Image If Featured Image Not Added

This code modification in the Wellness Pro child theme by StudioPress, enables you to stop Genesis from using a image from within a post as the featured image…

Add Responsive Slider To Front Page 1 Widget Background In Wellness Pro

This tutorial provides the code and 2 simple steps which enable you to replace the front page 1 widget background image with a slider show in the Wellness…

Winning Agent Pro Theme Tutorials

Posts in this archive relate to modification & customization of the Winning Agent Pro child theme for Genesis. The tutorials also enable you to add custom functionality and styling to this theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

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…

WooCommerce Tutorials

The tutorials in this archive relate to the modification of WooCommerce via your WordPress child theme. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members. Note : Usage of WooCommerce in Genesis and the code/templates in these tutorials requires the activation of the Genesis Connect for WooCommerce plugin.

Add Custom Product Meta To Archives – WooCommerce

This code adds product meta to your shop loop including : Stock Status Category Custom Taxonomy Term Installation There's only 1 step : Copy & paste the PHP…

Remove Related Products Per Single Product – WooCommerce

Need to remove related products from a specific product page? There's many ways to do this using PHP code or CSS. This solution uses custom fields, either the…

Add Custom Field Content Before & After Products – WooCommerce

This PHP code enables you to add custom content before and/or after your WooCommerce products. You can use this code to add any type of content including custom…

Custom Product Loop – WooCommerce

This code uses WP_Query to give you the most basic starting point when developing a custom loop for display WooCommerce products in any WordPress theme. Using a code…

Submit Button Notice for Product Reviews – WooCommerce

Using a code editor, copy & paste the PHP code from the view raw link in the Gist to the end of your child themes functions file or…

Remove Current Single Product From Shortcode Products – WooCommerce

Add to the end of your child themes functions.php file or custom functionality plugin. [gallery columns="2" size="full" ids="109651,109650"] The gallery shows the green colored single product 9 included…

Custom WC Product Title On Orders for Checkout, PayPal, Credit Card & Email Order Receipts

The code in this download folder adds a custom field to the WooCommerce Product Data meta box on the Single Product edit screen. This field enables you to…

Open External/Affiliate Product Links In New Window – WooCommerce

The solutions in these 2 download folders provide 3 different methods which enable you to open external links in new windows without modifying the code in the core…

Add Brand Custom Taxonomy To WooCommerce Products Shortcode

The code in this download folder enables you to create a custom taxonomy named Brand which is added to the default WooCommerce Products admin menu like this: [gallery…

3 Ways To Exclude Products From WooCommerce Related Products

This download folder contains 3 code snippets which enable you to exclude or remove WooCommerce products from your Related Products list. You can exclude by : Product ID…

Add WooCommerce Cart To Nav Menu Widget In Genesis

This code adds the WooCommerce cart icon with the total amount of items and price to a navigation widget in the before header utility bar. Requires the activation…

Show a Message at The Top of Your Page For New Site Visitors Using a Cookie

The code in this download folder enables you to conditionally display a message before your sites header like this : In this case, the message is displayed every…

If WooCommerce Product Out Of Stock, Show Widget

This code enables you to display a widget area if your single product is out of stock. You can display the widget in any WooCommerce single product page…

Custom Role To Allow Users To Submit WooCommerce Products For Review

This code adds a custom role for vendors/product contributors so admins can review new products submitted for review prior to publishing. The code also enables you to set…

Make WooCommerce Product Archives Look Like Essence Pro Archives

The solution in this tutorial shows you how to style your WooCommerce product archives like the 2 column archive pages in Essence Pro. [gallery columns="2" size="large" ids="71562,71563"] In…

Modify Or Remove Address & Checkout Fields On WooCommerce Checkout Page

This freely accessible download folder contains 2 code snippets which enable you to : Use the 1st snippet to make the following address fields optional rather than compulsory…

WooCommerce Product Categories Widget – Change The Order Of Categories

This free code enables you to change the order of your categories displayed using the WooCommerce Product Categories widget. On your WooCommerce > Products > Categories admin page,…

Add Read More Link Beside Add To Cart Button In WooCommerce Archive Templates For Genesis

The code snippets and templates in this download provide different ways to add/remove/customize a read more button linked back to the single product page in Genesis child themes…

WooCommerce Front Page Template For Genesis

This template enables you to create a front page like this : The template includes 4 widget areas for displaying WooCommerce products using the products shortcode In this…

Custom WooCommerce Shop Page Template For Genesis

This template enables you to display your product titles before your product images and the product price and buy button inline with the image like this : You…

WordPress Gallery Tutorials

The tutorials in this archive relate to the modification of the default functionality and styling for the WordPress native gallery. The tutorials also enable you to add custom functionality and styling to the gallery, gallery items and gallery images. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Add Pagination to WordPress Gallery Image Attachments In Genesis

The code in this template enables you to add pagination to images added to create a WordPress gallery as long as they where uploaded to the single post…

Show WordPress Gallery Items On Click

This template enables you to load 1 or more rows of gallery images on button click : Works with any number of rows, columns, images and image sizes.…

Show Caption Text Over Gallery Images With Hover Effects

The code in this tutorial hides your gallery captions so they only display when the gallery images are hovered. This tutorial is an extension of this post which…

Center Caption Text Over WordPress Gallery Image

The code in this tutorial enables you to display the image caption for each gallery item over each gallery image. Here's the demo tested on the Enterprise Pro…

Responsive Images Inline Full Screen

This tutorial enables you to display any number of images inline. The images re-size perfectly on all screen sizes right down to held held mobiles. Watch the following…

Workstation Pro Theme Tutorials

Posts in this archive relate to modification & customization of the Workstation Pro child theme by StudioPress. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

Add Existing Background Image To Existing Widget Area – Workstation Pro Front Page

This tutorial enables you to use existing background images as the background to existing widget areas. In this case, we'll use the Featured Section 1 Image as the…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting