This solution uses CSS to display your Twenty Twenty theme sub menu items in a drop down mega menu like this :
Display your sub menu items in a mega menu style drop down menu with a unique heading for each drop down in 2, 3, and 4 columns.
Demo Video
The demo video shows you how to add the mega two three and four classes to the parent menu item and the mega-header class to the first sub menu item for displaying a header for each drop down menu.
Coded specifically for use with the Twenty Twenty default theme for WordPress however may work in other themes simply by changing the primary menu class.
Installation
Step 1 – Copy & paste the CSS to the end of your Twenty Twenty themes child themes style.css file and clear caching.
Step 2 – Add either the mega-two, mega-three or mega-four class to the parent menu items CSS classes.
Step 3 – To add a header, add the mega-header class to the first sub menu item.
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.
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 on the left.
Using your customizer, you can choose to display an intro description plus email signup form or “Call to Action” buttons which can be modified using custom settings added to your customizer.
No coding required.
Customizer Settings
Custom settings are also added to your customizer to enable the user to choose between displaying 2 buttons side by side ( as seen in the image on the right ) or a email opt-in form.
In this case, we use Aweber and show you ( in the following Demo Video ) how to create a reusable block using code you can copy & paste from the Aweber Raw HTML Version on your Signup Forms page in your Aweber account.
Demo Video
Shows you how to easily create a custom signup form using a free Aweber account so you can copy & paste the form code into a reusable block and use your customizer settings to display the form below your entry header title.
Tested using the Twenty Twenty default theme for WordPress however will work in any WordPress theme if you paste the following function call where you want to display your hero elements.
aweber_intro_description();
Installation Steps
There’s 2 steps :
# Child Theme : Install the folder named twentytwenty-child. This child theme includes custom functions added to the functions.php file, custom CSS added to the style.css file and a modified entry-header.php in the template-parts folder to output the custom functions.
# Reusable Block : Signup for a free Aweber account so you can create a reusable block with Aweber Raw HTML form code pasted as Custom HTML as seen in the demo video. Make sure you name the reusable block Aweber Inline Form without variation.
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 :
# Upload the archive.php file to your child theme folder like this :
# Install the ACF plugin and import the acf-108813.json file.
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 using a valid Gravatar.com email address. For authors without a valid Gravatar email address, no image is displayed.
Tested using the Twenty Twenty default theme for WordPress, will work in most WordPress themes without modification.
Installation Steps
There’s 3 steps :
# Copy & paste the PHP code from the functions.php file to the end of your child themes functions file.
# Upload the custom author.php template to your child theme folder like this :
# Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.
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.
# Copy & paste the PHP code ( without the opening PHP tag ) to the end of your child themes functions file.
# 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.
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 :
# Added between lines 52 -54 in category-reviews.php
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.
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 child themes & the Twenty Twenty One default theme for WordPress.
Demo Video
Shows the scroll indicator working in the Genesis Sample child theme and the Twenty twenty default theme for WordPress.
Tested using the Twenty Twenty default theme for WordPress & the Genesis Sample child theme by StudioPress.
Note : Includes 2 download folders. One for Genesis and a child theme for Twenty Twenty with the code pre-installed.
Installation Steps – Genesis
There’s 3 steps :
# Upload the scroll-indicator.js file to your child themes folder like this :
# Copy & paste the PHP code from the functions.php file to the end of your child themes functions file.
# Copy & paste the CSS to the end of your child themes style.css file and clear caching
Installation Steps – Non Genesis Themes
If you’re using the Twenty Twenty theme for WordPress or another non Genesis theme, you can install the folder named twentytwenty-child or use the code from this folder for use in your non Genesis child theme.
If your theme includes hooks, you can use the code for Genesis and simply change the hook name from genesis_after_header to whatever your theme uses.
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 7 days however you can :
Set the cookie to display the message to new site visitors once every X amount of days
Conditionally display the message on specific posts and/or page types using WordPress conditional tags.
In this case the message only displays on WooCommerce single product pages.
Demo Video
Shows a message at the very top of pages which when hidden will only display based on the cookie setting which is set to 7 days.
Tested using the Twenty Twenty default theme for WordPress however will work in any theme.
Installation Steps
This solution is coded to work with the Twenty Twenty default theme for WordPress. If using Twenty Twenty, there’s only 1 installation step. Install the zipped folder named twentytwenty-child as a new theme and you’re good to go.
Note : You may need to reactivate the Twenty Twenty parent theme first and then activate the child theme to get the parent themes stylesheet to load.
Otherwise, if you’re using a different theme or already have a child theme installed, follow these 3 simple steps :
# Upload the file named top-banner.js to your child theme folder.
# Copy & paste the PHP code ( without the opening PHP tag ) to the end of your child theme functions.php file
# Copy & paste the CSS to the end of your child themes style.css file and clear caching.
Display Location
To change the location of where your message displays, simply change the conditional tags on lines 18, 33 and 51 in functions.php
Change Cookie Expiry
To change the cookie expiry from the default 7 days, change the value for the expires option from 7 on line 65 in top-banner.js
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 the following screenshot :
Tested using the Twenty Twenty default theme for WordPress. If you’re using a theme framework which uses hooks, like Genesis, use this tutorial instead.
You can use the template to display child terms for any type of taxonomy.
Demo Video
Shows the child category image for each sub category displayed in a 3 column responsive grid using the Twenty Twenty default theme for WordPress.
Works in most WordPress themes.
Installation Steps
The code comes pre-installed in a blank child theme for Twenty Twenty which members can access using the download folder button at the end of this post. If you want to install the code manually in your own child theme, follow these instructions –
There’s 5 steps :
# Step 1 : Upload the file named content-sub-cats.php to your child themes template-parts folder.
Make sure you swap out the parent term id with the id for your parent term which includes the child terms you want displayed on lines 17 and 18 in templates-parts > content-sub-cats.php. Here’s an example showing the values which need to match your parent term :
# Step 2 : Upload the file named page-child-terms.php to the folder named templates.
# Step 3 : Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.
# Step 4 : Install the ACF plugin ( free or premium version ) and import the file named acf-archive-image.json
# Step 5 : Create a new page and select the Template named ACF Sub Cats from the Templates drop down menu in the Page Attributes box on the Edit Page screen.
Once you install the code, you can then setup your child categories and add a image for each using the ACF image field. They will only show in the grid when they have at least 1 post assigned to each child category.
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 when you update the parent theme.
The child theme contains :
A folder named assets which contains a folder for your images and a folder for custom jQuery.
A functions.php file for all your global custom functions.
A style.css file for all your custom CSS rules. Simply copy over any CSS rules from the Twenty Twenty parent theme and modify them in your child themes style.css file.
Child Theme Installation
You’ll need to install the Twenty Twenty parent theme first and then you have 2 options.
You can :
Upload the folder to your wp-content > themes folder and activate the child theme from your Appearance > Themes page
OR
Install the zipped folder from your Appearance > Themes page as seen in the following video –
