Categories
Genesis Tutorials

Add Hero Image To Breakthrough Pro Child Theme by StudioPress

This code adds a hero image and overlaying text to the Breakthrough Pro child theme for Genesis. The code enables you to add a hero image & overlaying text behind your site header elements :

  • On your Homepage using the default Reading settings set to display your latest posts.
  • On your Homepage using your Reading settings to display a static page named Front Page as your Homepage.
  • On any single post or single page when a hero image and hero text is added using the ACF input fields located on all Edit Post/Page screens.

The homepage hero & overlaying text is added via Customize > Front Page Hero >

The code changes the font color of the site title when a hero image is added and when the hero image is displayed below the site header on mobile devices as seen in the following demo video.

Demo Video

Shows the hero image and overlay text displaying on the homepage, single post and single pages using the Breakthrough Pro child theme by StudioPress.

Installation Steps

There’s 3 steps :

  1. # Copy & paste the PHP code from the functions.php file to the end of your Breakthrough Pro child themes functions file.
  2. # Copy & paste the CSS from the style.css file to the end of your Breakthrough Pro child themes style sheet and clear caching.
  3. # Using ACF, import the acf-110905.json file.

Download Folder

Demo Single Page/Post HTML

Use this in the ACF custom field for Unique Hero text on the Edit Post/Page screen. Do not modify the HTML tags otherwise you may also need to modify/add CSS.

Demo Front Page HTML

Use this in the customizer for the front page hero text. Do not modify the HTML tags otherwise you may also need to modify/add CSS.

Related Tutorials

Categories
WordPress Tutorials

Load Custom Script On Any Archive Page Type

This download folder contains 2 code snippets which enable you to load a script on any WordPress archive page type including category, tag, date, author and any other archive page type.

  1. The 1st method uses PHP code to print the script directly into your page using any WordPress or theme specific hook with any WordPress conditional tag for any category using the taxonomy slug.
  2. The 2nd method enables you to use a plugin like ACF to add your script and execute the script conditionally using PHP code.

Works in any WordPress theme with any script type including javascript, jQuery & .json scripts.

Installation Steps

Method 1

There’s 2 steps :

  1. # Copy & paste the PHP code from the file named functions-1.php to the end of your child themes functions file or custom functionality plugin.
  2. # Swap out the json code with your own custom .json code.

Method 2

There’s 2 steps :

  1. # Copy & paste the PHP code from the file named functions-2.php to the end of your child themes functions file or custom functionality plugin.
  2. # Install ACF – Advanced Custom Fields ( Free or Premium version ) and import the file named acf-110880.json.

Download Folder

Hooks Which Execute Within The Body Tags

Related Tutorials

Categories
WordPress Tutorials

Add Published Date Per Product – WooCommerce

This code enables you to add the date your product was published in any WordPress theme. The code includes :

  • Schema markup
  • ACF .json file to show or hide the product date
  • A special function for human time difference
  • A function for the date which includes parameters for before, after, label and time format.
  • A function to output the date on single product pages if your custom field value is set to true (1).

Example output in HTML source :

<time class="product-date" itemprop="datePublished" datetime="2022-05-28T07:06:38+00:00">May 28, 2022</time>

To do this, you need to setup a input method and use PHP code for the output.

Input

You have 2 ways to input your custom field value for true or false :

(1) You can show the date using this ACF .json file which products this switch added to the Edit Product screen

(2) or use a WordPress custom field named product_date using a value of 1 for true and 0 for false.

Tested using the Twenty Twenty default theme for WordPress & Genesis.

Installation – Output

There’s only 1 step :

Copy & paste the PHP code from the download folder to the end of your child themes functions file.

Download Folder

Genesis Users

Note : The code is written to work with non Genesis themes. If using Genesis, change this line of the PHP code from :

echo woocommerce_product_date();

to :

echo do_shortcode('[[post_date]]');

You do NOT need to use the genesis_human_time_diff and woocommerce_product_date product functions if using Genesis. Only use the add_product_date function with the modified output for the post_date as stated above if using any Genesis child theme.

Categories
WordPress Tutorials

Remove Single Products From Shop Page Loop – WooCommerce

Need to hide one or more products from your shop page loop? There’s 2 steps involved.

  1. The input value for true or false
  2. Code to modify the default shop loop query

STEP 1 : There’s at least 3 ways to deal with the input.

1. You can use the default WordPress custom field meta box located on every Edit screen with the exclude_product custom field key and a value of 1 like this :

WordPress Custom Field Exclude Product Shop Page Loop

2. You can use a custom field plugin like ACF and import this json file to create a switch which displays on your Edit Product screen and looks like this :

3. You can hand code a meta box using the WooCommerce Meta Box Functions API which looks like this :

STEP 2 : Then there’s PHP code you need to modify the default shop page loop.

Download Folder

Installation

There’s only 1 step : Copy & paste the PHP code to the end of your child themes functions file or custom functionality plugin.

Note : There’s 3 code snippets in the download folder. If you’re using ACF or WordPress custom fields, only use the 3rd snippet. If you want to add the custom checkbox to the product Data section, use all 3 snippets.

Categories
WordPress Tutorials

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 fields on your :

  • Single Product Page
  • Any Archive Page Type Using The Shop Loop

There’s 2 steps to adding custom field content. The input & the output.

  1. Step 1 – Input – Create a custom field using the custom fields box native to WordPress OR use a plugin like ACF.
  2.  
    Add Custom Fields WooCommerce Products

  3. Step 2 – Output – Add PHP code to your child themes functions file or custom functionality plugin to print your custom field content on the front end.

Single Product Page

Use this code to add content before your single product on the single product page.

Use this code to add content after your single product on the single product page.

Here’s the result on the single product page showing your custom field content added before and after the single product title :

Single Product Custom Fields

Shop Loop Archive Page Types

Use this code to add content before your single product on any shop loop archive page type.

Use this code to add content after your single product on any shop loop archive page type.

Here’s the result on shop loop pages showing your custom field content added before and after your product on the shop loop :

Shop Loop Custom Fields

Outside Shop Loop – Archive Page Types

You can also add custom fields before or after your product loop on taxonomy type archive pages.

There’s 2 steps :

  • Step 1 – Create a custom field named wc_taxonomy_custom_field
  • Step 2 – Add PHP code to your child themes functions file or custom functionality plugin.

Step 1 – Using a plugin like ACF, create a custom field named WooCommerce Taxonomy Custom Field using these settings :

acf-taxonomy-custom-field

Step 2 : Use this code in your child themes functions.php file to add content before and/or after your product taxonomy archive title on any taxonomy term archive page type.

Download Code

Here’s the result showing your custom field text displaying before the term archive page title.

woocommerce-custom-field-before-taxonomy-term-archive-page-title

Change the WooCommerce hook in the code to control where your custom field content shows before & after your single products.

Shop Loop Hooks

You can change the shop loop hooks to control where your custom field content displays on archive pages.

woocommerce_before_shop_loop_item
woocommerce_before_shop_loop_item_title
woocommerce_shop_loop_item_title
woocommerce_after_shop_loop_item_title
woocommerce_after_shop_loop_item

Archive Page Hooks Outside Shop Loop

You can change the hooks to control where your custom field content displays on archive pages outside your shop loop.

woocommerce_before_main_content
woocommerce_archive_description
woocommerce_before_shop_loop
woocommerce_after_shop_loop
woocommerce_after_main_content

Related Code

Categories
WordPress Tutorials

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 add a 2nd product title which is only displayed on the checkout, my account > orders, email receipts for PayPal & credit card payments as well as order confirmation emails as seen in the demo video below.

No plugins are required when using this code to hide the real name of the product or service you are purchasing.

The real name for your product still appears on the single product page, shop page and other archive page types in WooCommerce but is changed once you complete the order. The order number stays the same for future reference and tracking.

Payment Gateways Email Notifications

This is how your custom product name will appear on payment gateway emails like PayPal, Stripe credits cards etc for the seller:

And for the buyer :

Demo Video

Shows Product 1 which is the real name of the product title changed to Special Product Title which is displayed at the checkout, under My Account Orders and on email order confirmations.

Tested using WooCommerce, Genesis Sample and custom code from the download folder.

Installation

There’s only 2 steps :

1. Copy the PHP code from the functions.php file to the end of your child themes functions file or custom functionality plugin.

2. Upload the woocommerce folder to your child theme folder.

Download Folder

Related Products

Categories
Genesis Tutorials

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 added, you can display default text added on line 20 of the PHP code inside the archive.php template file.

If the ACF is not active or the text field doesn’t contain any content, your default text will be displayed.

By default, the code is written to show content after the loop of post excerpts on category & tag archives however you can change the conditional tags located on line 12 of the archive.php file to display content on any type of taxonomy or term page.

Demo Video

Shows you how to follow the installation steps to display unique content at the end of each category and tag archive page in Genesis child themes, Divi & Twenty Twenty.

Tested using the Genesis Sample child theme by StudioPress, Divi by Elegant Themes & the Twenty Twenty default theme for WordPress however will work in any Genesis child theme.

3 separate download folders included for use in different themes. See below.

Installation Steps

There’s 2 steps :

  1. # Upload the archive.php file to your child theme folder like this :
  2.  

  3. # Install the ACF plugin and import the acf-108813.json file.
  4.  

Download Folder

Usage In Divi

Use this download in a Divi child theme if using Divi by Elegant Themes.

Usage In Default WordPress Themes

Tested using the Twenty Twenty default theme for WordPress using the code in this download folder.

Related Code Snippets

Categories
WordPress Tutorials

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 address if it’s connected to a valid Gravatar account.

This code is not theme specific and works in any WordPress themes functions file, preferably in your child themes functions file.

Note : This code enables you to use a custom avatar globally meaning all instances of your default avatar including comments, author box and archives etc will be changed when you add your custom avatar.

Demo Video

Shows the custom image added on the User Profile edit page replacing all instances of your default Gravatar.

Tested using the Twenty Twenty default theme for WordPress, Divi by Elegant Themes & the Genesis Sample child theme by StudioPress.

Installation Steps

There’s 2 steps :

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

  3. # Install the ( ACF ) Advanced Custom Fields plugin ( free or premium version ). In your WordPress Dashboard, go to Custom Fields > Tools and import the acf-108181.json file which enables you to add custom avatars on the Edit User profile admin page for each user or author as seen in the demo video and first screenshot in this post.
  4.  

Download Folder

Related Tutorials

Categories
Genesis Tutorials

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 for each user.

Custom User Profile Avatar

What’s not unique is the way the custom image is added using the Advanced Custom Fields plugin ( free or pro version ) however, the code still works when the ACF plugin is deactivated ( for images already added ) and doesn’t use any ACF specific functions.

The code also enables you to control the image ALT text, avatar-$size, width & height of the avatar. On top of this, the code enables you to completely modify the default author box added after single posts and before the author loop on the author archive page unlike other solutions which only change the default avatar image.

Note : The comment author avatars are unchanged using this code.

Demo Video

Shows you how to change the author profile image displayed on the author archive page & author box on single posts.

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

Installation Steps

There’s 2 steps :

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

  3. # Import the acf-108170.json file using the Custom Fields > Tools > Import field in your WordPress Dashboard.
  4.  

Also make sure you have selected the author box on the User Profile admin page :

Download Folder

Related Tutorials

Categories
WordPress Tutorials

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.

The system adds the star rating in the entry header on single posts in the reviews category and also dynamically calculates the average rating based on total number of ratings.

The graph dynamically displays colored bars for each rating level multiplied by 100 and divided by the total number of reviews for all ratings. This generates a horizontal bar graph as seen in the above screenshot and following demo video.

Demo Video

Shows how to add star ratings to single posts in the reviews category and shows the number of ratings and average updating as ratings are added, changed and removed.

Tested using the Twenty Twenty default theme for WordPress however will work in any WordPress theme.

Installation Steps

The code comes pre-installed in a Twenty Twenty child theme.

There’s 4 steps where the code has been added :

  1. # Added between lines 52 -54 in category-reviews.php
  2.  

  3. # Added to the functions.php file.
  4.  

  5. # Added to the style.css file.
  6.  

  7. # Added in the template-parts > entry-header.php file between lines 45 – 47
  8.  

Download Folder

Once you’ve installed the child theme or code, you can start adding ratings to new posts in the reviews category using the custom field named rating_value with value between 1 – 5.

ACF Plugin

You can also import the acf-107973.json file and use the free or premium version of Advanced Custom Fields.

Add Reviewer Name

You can also use a template tag to add a custom reviewer name anywhere in the template-parts > entry-header.php file.

Uses reviewer_name as the custom field key on your Edit Post screen.

Related Tutorials

Categories
Genesis Tutorials

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 :

  • Star rating for each post in the a specific category. This outputs on the single post and archive pages.
  • Average rating with stars based on total number of ratings updated dynamically whenever a user adds or changes a rating on single posts.
  • A dynamic horizontal colored bar graph displayed on the category archive page showing a bar for each star rating and the number of ratings for each star value.

Note : The code works with WordPress custom fields or ACF ( .json import file included for quick & easy setup ).

Demo Video

Shows you how to publish reviews and add a star rating using both WordPress and ACF custom fields which determines the average number based on rating and number of reviews as well as the length of each bar graph for each rating level as a total percentage of all ratings.

Tested using the Genesis Sample child theme by StudioPress however will work in any Genesis child theme or any WordPress theme of you change the hooks.

Installation Steps

There’s 4 steps :

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

  3. # Upload the category-reviews.php and single-post-reviews.php files to your child theme folder like this :
  4.  

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

  7. # Optional : If you want to use the ACF plugin to add ratings, import the acf-107954.json file to Custom Fields > Tools Import Files.
  8.  

Once you’ve installed the code, you can then add your rating on the Edit Post screen of any post in the Reviews category using the custom field key rating_value with any value from 1 – 5 like this :

You can also add the reviewer name in the post info entry header otherwise the post author will be displayed.

Download Folder

The horizontal bar graph is based on the user rating scorecard by W3 Schools extended with hand coded PHP to add and dynamically change the values for the bars, stars and numbers.

Related Tutorials

Categories
Genesis Tutorials WordPress Tutorials

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 background ) without adding CSS, editing default code or using any plugins.

It styles each posts entry class on your archive pages, in this example, the home or posts page.

However, if you want to use a custom field plugin like ACF or Toolset, create a field named background_color where background_color is your custom field key.

The code adds your background color using the color picker added to the Edit Post screen without using code to create a new loop.

Demo Video

Shows the color picker added to the Edit Post screen enabling you to set the background color of the entry when it displays on your posts page.

Works in any WordPress theme and tested using the Genesis Sample child theme by StudioPress.

Installation Steps

There’s 2 steps :

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

  3. # On the Edit Post screen, choose the color for each specific post background.
  4.  

Download Folder

Related Tutorials

Categories
Genesis Tutorials

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, no plugins required and no CSS needed.

Demo Video

Shows a color picker added to the Edit Category screen enabling the user to choose the link colors for category links added to the nav menu.

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

Installation Steps

There’s 2 steps :

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

  3. # On the Edit Category Page, choose the color you want to use to style the nav menu item for that category link.
  4.  

Download Folder

Adding Inline Style To HTML Tags

Here’s another way to add inline styles directly into your HTML :

Related Tutorials

Categories
Genesis Tutorials

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 use this code to add a color picker to your edit category screen and style any element on any page types including, posts, pages, taxonomy pages and your home or blog page ( posts page ).

Demo Video

Shows the color picker added to the Edit Category screen and used to style the post meta category links on all page types.

tested using the Genesis Sample child theme however will work in any WordPress theme if you change the Genesis hook to a WordPress or theme specific hook.

Installation Steps

There’s 2 steps :

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

  3. # On your edit Category screen, use the color picker to set your category color.
  4.  

Download Folder

Related Tutorials

Categories
Genesis Tutorials

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 the PHP code, all post category links will be styled without the need to add any CSS and each link will be styled differently regardless of how many categories you assign to each post.

Works with any taxonomy type.

Demo Video

Shows you how to use the color picker on the edit category page to set the post category link colors o single posts and archive page types including category and home archive pages.

Tested using the Genesis Sample child theme by StudioPress however will work in any Genesis child theme and any WordPress theme if you change the hook.

Installation Steps

There’s 2 steps :

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

  3. # Install the Advanced Custom Fields plugin ( free or pro version ) and import the acf-107783.json file.
  4.  

Download Folder

Usage With Other Taxonomies

Simply swap out the value for the $post_categories variable in the code and change the category taxonomy parameter to match your taxonomy.

$post_categories = get_the_terms( $post->ID, 'category' );

Uses get_the_terms

Related Tutorials

Categories
Genesis Tutorials

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

You can also add a unique link for each button and specify which button links open in the same or new window. If not specified, button links will open in the same window.

Open Button Links in New or Same Window

Note : The solution you see in the demo video uses custom fields native to WordPress. If you prefer using a plugin like ACF, read the last section at the end of this tutorial to learn how to easily setup ACF to control your button elements.

Demo Video

Shows you how to setup custom fields in WordPress so you can add 1 or more buttons with custom button text and custom links to open in the same or a new window in Genesis child theme.

Tested using the Essence Pro child theme by StudioPress however will work in any Genesis child theme or any WordPress theme if you change the essence_entry_header hook to any theme specific or WordPress hook.

Installation Steps

There’s 2 steps :

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

  3. # Create custom fields for each button using the custom field keys seen in the following screenshot and demo video.
  4.  

Download Folder

Custom Fields for Buttons

Buttons are only displayed if each custom field key button_primary_text and/or button_text has a text value otherwise none shown.

By default, links open in the same window and only open in a new window if each custom field key primary_window and/or secondary_window have a value of 1 as seen in the screenshot above.

Using Advanced Custom Fields (ACF)

Install the free or premium version of the ACF plugin and import the file named 107304-acf.json. You can then use the stylised fields on any single Edit screen to configure your buttons.

This allows you to use ACF to open links in the same window or a new window.

Related Tutorials

Categories
Genesis Tutorials

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 of grid columns.

The above screenshot shows the block added on a single Edit Post screen which includes a drop down list of single posts you can select for inclusion in your grid. Watch the following demo video to learn more.

Demo Video

Shows a Selected Posts box added after the editor on the Edit Post screen enabling the user to select specific posts to display in a grid on specific single posts and pages.

Tested using the Genesis Sample child theme & the 2021 default theme for WordPress. Works in any WordPress theme.

Installation Steps

There’s 3 steps :

  1. # Upload the folder named selected-posts to your child themes blocks folder like this :
  2.  

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

  5. # Install ACF, in your Dashboard, go to Custom Fields > Tools and import the .json file.
  6.  

The code works with the Genesis Custom Blocks plugin and the Advanced Custom Fields ( ACF ) plugin by Elliot Condon.

Download Folder

Theme Specific Code

The block.php file contains code which works in any WordPress theme as well as code which only works in Genesis child themes ( by default, this code is commented out ). Only use 1 solution.

This is the demo video showing the custom block working in the Twenty twenty One default theme for WordPress.

Categories
Genesis Tutorials

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, we use the genesis_entry_footer hook to show the 3 posts selected from the above screenshot after the content on a specific single post, as seen in the demo video.

You can easily edit this code to display pages & custom post type entries rather than standard post entries simply by changing the value for the post_type parameter.

Example :

'post_type' => 'portfolio',

Demo Video

Shows the select posts drop down field on Edit Post screens enabling you to highlight multiple posts for display on single posts.

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

Note : This solution does NOT use the Genesis Featured Posts widget.

Installation Steps

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

  3. # Copy & paste the CSS to the end of your child themes style.css file and clear caching.
  4.  

  5. # Using the Advanced Custom Fields plugin, go to custom fields > tools > and import the file named acf-106705.json
  6.  

Download Folder

Related Tutorials

Categories
Genesis Tutorials

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.

You can use basic CSS in your style sheet to do this :

.header-hero {
    background-image: none!important;
}

Or, you can add a box like this :

Demo Video

Shows the custom field add to the Edit Post & Page screens enabling the logged in user to remove the header hero image on a per post & page basis.

Tested using the Essence Pro child theme by StudioPress.

Installation Steps

  1. # Upload the files named remove-hero-form.php and remove-hero-functions.php to your Essence Pro theme folder like this :
  2.  

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

You can then enable the box to remove the image from your screen options menu like.

Download Folder

Related Tutorials

Categories
Genesis Tutorials

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 easier to add custom meta boxes in Genesis child themes.

genesis_sanitize_html – Custom function located in genesis > lib > functions > formatting.php which uses a WordPress function to ensure the user inputed data is in proper form and remove any invalid characters.

genesis_save_custom_fields – Custom function located in genesis > lib > functions > options.php which uses WordPress functions to save the custom field key & value to the database if a value is added or changed.

Demo Video

Shows an external URL added to a custom meta box named Custom URL used to link a button on a single post.

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

Installation Steps

There’s 2 steps :

  1. # Upload the file named url-form.php to your child theme folder like this :
  2.  

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

Download Folder