Categories
WordPress Tutorials

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 the opening PHP tag ) to the end of your child themes functions file or custom functions file or MU plugin file.

Related Tutorials

Categories
Free Tutorials WordPress Tips

Add Reusable Blocks Link To WordPress Dashboard Menu

Paste this code in your custom functions plugin, themes functions.php file or Must Use plugin.

add_action( 'admin_menu', 'reusable_blocks_link_wp_admin' );
function reusable_blocks_link_wp_admin() {
    add_menu_page( 'linked_url', 'Reusable Blocks', 'read', 'edit.php?post_type=wp_block', '', 'dashicons-editor-table', 22 );
}

Tutorials Using Reusable Blocks

Categories
WordPress Tutorials

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

  1. # 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.
  2.  

  3. # 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.
  4.  

Download Folder

Related Tutorials

Categories
Genesis Tutorials

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 :

The code creates a reusable block which you can use in any theme and position anywhere using the block or PHP code.

In this example, the button is positioned within the right hand side of the forms input field using a tiny bit of CSS added in step 3 of installation.

Note : You will need to create a free or premium Aweber account before starting the installation steps.

Demo Video

Shows you how to use your Aweber email form in the Essence Pro child theme by StudioPress.

Also includes the PHP code to display your reusable Aweber form block in any WordPress theme.

Installation Steps

There’s 3 steps :

  1. # Login to your Aweber account, navigate to signup forms and create a new form deleting the elements for the header, footer, footer links and name field. Save your form and copy the Raw HTML Version of the code and create a new reusable block from a Custom HTML block or directly on the Reusable Blocks Edit page as seen in the Demo Video.
  2.  

  3. # Upload the blocks.php file to the Essence Pro themes page-templates folder and swap out the page id for your reusable block in the code on line 66. You can find your page ID for your block in this video.
  4.  

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

Download Folder

Usage In Any Theme

Swap out the ID with the ID for your reusable block which you can grab from the address bar when you edit your reusable block.

Related Tutorials

Categories
Genesis Tutorials

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 :

  1. A custom reusable block you can import.
  2. And a file named blocks.php you can upload to display your reusable email optin block like this :

Note : The code in the blocks.php file shows you how to use a few lines of PHP code to display any block in any location in any theme.

Demo Video

Shows you how to integrate your MailChimp email form in the header hero section on the front page of the Essence Pro child theme by StudioPress.

Also provides the PHP code snippet which shows you how to display a block in any hook position using PHP code.

Installation Steps

There’s 2 steps once you’ve setup your email newsletter block using the Genesis Blocks plugin:

Note : This solution assumes you’re using MailChimp API keys in the Genesis Blocks > Settings > Newsletter Block settings.

You can access your reusable blocks page using these steps :

  1. # Find your MailChimp audience I.D and edit the newsletter-optin.json file with the 10 digit mailingList number. On your Reusable blocks page, import the newsletter-optin.json file. Once imported, edit the block to grab the post id from the address bar which you’ll need in step 2.
  2.  

  3. # Edit the file named blocks.php on line 66 replacing the 83 with the id for your reusable block as seen using the 1st red arrow in the screenshot in step 1. You can then upload the file to your Essence Pro themes blocks folder.
  4.  

Download Folder

Related Tutorials