Evolution Developer Documentation

Evolution WordPress Framework

The Evolution WordPress Framework has been designed as a fast and secure foundation for developing WordPress themes. The modern architecture is based on WordPress Action Hooks and allows you completely free design with complete update security.

The modern and future-proof architecture gives you completely free rein to hook your own functions into the existing hooks.

Important: Please do all modifications in the form of a child theme.
Download a Sample Child Theme for Evolution.

Working With the Evolution WordPress Framework

If you want to rework a theme on every page of your website, you need to throw a bunch of templates from your parent theme folder into the child theme folder.

All I need are two files. The functions.php and the style.css of the child theme. These two files allow me to rework an entire theme. And it’s not even difficult; you can do it too. However, the most important thing is the safety of a theme update.

The Absolute Update Safety of Evolution

When developing a child theme from a parent theme, two versions of a function are used. One is the function in the parent theme, and the other one being the overwritten version of the child theme. In many cases, this doesn’t end well.

I’ve experienced that before. Evolution is an entirely different thing. You don’t need to change template files, as you merely need to save a new function in the Action Hook.

An example: changing the comment form

The template file comments.php leads you to the right folder and the file with the functions used in the comments.php.

The file path would be the following: /inc/structure/markup/evolution-comments.php

There, you’ll find the following function:

<?php

if ( ! function_exists( 'evolution_comment_form' ) ) :
/**
 * Outputs the custom comment form
 * 
 * @hooked into evolution_comments() action
 * 
 * @since 1.0.0
 */
function evolution_comment_form() {
    
    global $post;

    $commenter = wp_get_current_commenter();
    $req = get_option( 'require_name_email' );
    $aria_req = ( $req ? " aria-required='true'" : '' );

    comment_form(
        array(
            'comment_field' => '<textarea id="comment" class="plain buffer" name="comment" rows="7" placeholder="' . esc_attr( __( 'Please be kind. Thank You!', 'evolution' ) ) . '" aria-required="true"></textarea>',
            'fields' => array(
                'author' => '<div class="form-areas"><input id="author" class="author" name="author" type="text" placeholder="' . esc_attr( __( 'Your Name', 'evolution' ) ) . '" value="' . esc_attr( $commenter[ 'comment_author' ] ) . '" ' . $aria_req . '>',
                'email' => '<input id="email" class="email" name="email" type="text" placeholder="' . esc_attr( __( 'your@email.com', 'evolution' ) ) . '" value="' . esc_attr( $commenter[ 'comment_author_email' ] ) . '" ' . $aria_req . '>',
                'url' => '<input id="url" class="url" name="url" type="text" placeholder="' . esc_attr( __( 'Your Website', 'evolution' ) ) . '" value="' . esc_url( $commenter[ 'comment_author_url' ] ) . '"></div>'
            )
        ),
        $post->ID
    );
}
endif;

The critical hook can also be found in the file.

<?php

add_action( 'evolution_do_comments', 'evolution_comment_form', 40 );

By the way, the 40 refers to the so-called priority. It controls the display of the function. The lower the number, the earlier the function is displayed in the template.

Killing and Replacing Functions

Now, if you want to rebuild the comment form, the first thing you do is delete the original function. Load, unlock and kill the function. Forever.

<?php

remove_action( 'evolution_do_comments', 'evolution_comment_form', 40 );

As the function does not exist anymore, there can be no issues with an update. If it’s not there, it can’t cause problems.

Now, write your new function with the WordPress Coding Standards in mind. Don’t use outdated WordPress tags, and make sure the function is »pluggable«.

Pluggable functions use a small query before executing the function.

<?php

if ( ! function_exists( 'evolution_comment_form' ) ) :

// Your Function

endif;

Translation: If the function does not exist yet, execute it. This is a needed amount of protection from duplicate function names.

Thus, your function for the comment form would look like this:

<?php

if ( ! function_exists( 'your_comment_form' ) ) :
/**
 * Outputs the custom comment form
 * 
 * @hooked into evolution_comments() action
 * 
 * @since 1.0.0
 */
function your_comment_form() {
    
// Your new function
}
endif;

Now, set your function in place of the old version before it died 🙂

<?php

add_action( 'evolution_do_comments', 'your_comment_form', 40 );

Now, your new comment form is displayed, and updates of the parent theme won’t cause any issues, as your function is the only one left.

This way, you can quickly switch any function, and any content markup, without having to fear running into problems. And above all else: without touching a single template file. All you need to do is keep the right priorities in mind, to make sure that the display is correct.

Adding Additional Functions to the Action Hooks

Screenshot of the single.php of the Evolution Framework

If you want to add extra functions to the individual templates – like the single.php for example – that is quite easy to do as well. Get a short overview of the priorities, then create your function. The priorities 5, 10, and 30 are taken.

In this example, you can add it before the loop with the priority 8. This way, it is displayed after the opening markup, and before the actual loop. If you want to show it after the loop, assign a priority between 11 and 29.

<?php

    if (!function_exists( 'your_function' ) ) :
/**
 * An additional function in the display of the single.php
 * 
 * @hooked evolution_do_single()
 */
function your_function() {

    // Your function - displayed after the actual loop with the priority 15 
    // With priority 8 it is displayed before the loop 
}
add_action( 'evolution_do_single', 'your_function', 15 );
endif;

Creating New Templates is Very Easy as Well

Of course, this way, you also get to develop entirely new templates. For a static landing page, for instance. Create a template file named template-frontpage.php. Enter the following:

<?php /* Template Name: landingpage */


/**
 * Here, you can add all functions 
 */ 
do_action( 'evolution_do_frontpage' );

Now, add content using your child theme’s functions.php. The priorities allow you to control the display. Start with the opening markup. If you want to use Evolution’s markup, your hook looks like this:

<?php

add_action( 'evolution_do_frontpage', 'evolution_top_markup', 5 );

After that, you may add a function or a loop with the priority 10, and so forth… In the end, you need to add the closing markup.

The taken hooks can be found here: /inc/structure/evolution-hooks.php.

This way, you could exchange the parent theme’s entire content without any update problems. The existing websites would merely be displayed differently. Cool, right?

The Performance of the Evolution WordPress Framework

Evolution was developed for maximum speed, as neither Google nor your visitors like slow websites. An optimization for real fast loading times begins with the code of the theme.

This is also the bottleneck of many multi-purpose themes. Due to the plethora of functions, most of which are not even used, the source code is bloated, and dozens of style and script files have to be loaded.

All of that slows down a website. Evolution is reduced to the essentials. If you want more, install according plugins. In the case of a theme change, this is an advantage as well, as all functionalities you’re fond of remain.

Evolution Speed Test

The Starting Position:

  • A fresh installation without any decelerating plugins (Yoast SEO only, no caching plugin!)
  • Using an optimal .htaccess file
  • Using the AH Clean Code Plugin (turns off header links, embeds, query strings and emojis)

The Result is Clear:

The second run was measured.

Access Speed Test »

Evolution WordPress Framework: WooCommerce Support

What is a theme framework without a support of the popular e-commerce plugin WooCommerce? By the way, WooCommerce also works with Action Hooks. Thus, there is no reason to copy the plugin’s templates into the child theme to rewrite them. And this is the root of many issues with WooCommerce.

You can quickly delete existing plugin functions and replace them with your own.

Example WooCommerce Sidebar:

In the two most copied WooCommerce template files – archive-product.php and single-product.php -, you’ll find the following Action Hook:

At the same time, you’ll see the function that is hooked into the hook. This is the foundation for the next works. Now, register a sidebar for widgets, and name it »WooCommerce Sidebar«. Assign the ID »woocommerce«.

<?php

if (!function_exists( 'evolution_woo_sidebar_init' ) ) :
/**
 * Registering a new sidebar exclusively for the shop pages 
 */
function evolution_woo_sidebar_init() {

    register_sidebar( array(
        'name'          => esc_html__( 'WooCommerce Sidebar', 'evolution' ),
        'id'            => 'woocommerce',
        'description'   => esc_html__( 'This is the sidebar for your WooCommerce shop.', 'evolution' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h4 class="widget-title">',
        'after_title'   => '</h4>',
    ) );
}
add_action( 'widgets_init', 'evolution_woo_sidebar_init' );
endif;

Create a new file called sidebar-woocommerce.php. That file’s content could look as follows:

<?php
/**
 * The sidebar containing the woocommerce widget area.
 *
 * @package Evolution Framework
 */
if (   ! is_active_sidebar( 'woocommerce' ) ) {
    return;
}
?>
<?php // Important: copy the HTML containers from your sidebar.php ?>
<div id="secondary" class="sidebar-area" role="complementary">

    <div class="normal-sidebar widget-area">

        <?php if ( is_active_sidebar( 'woocommerce' ) ) : ?>

        <?php dynamic_sidebar( 'woocommerce' ); ?>

        <?php endif; ?>

    </div><!-- .normal-sidebar -->

</div><!-- #secondary -->

Now it’s getting serious: kill the WooCommerce function

<?php

remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );

Now, hook your new sidebar into the woocommere_sidebar hook.

<?php

/**
 * Get the special sidebar for the WooCommerce Templates
 * 
 * @overrides the woocommerce function
 * 
 */
function evolution_woocommerce_sidebar() {
    
    get_sidebar( 'woocommerce' );
    
}
add_action( 'woocommerce_sidebar', 'evolution_woocommerce_sidebar', 10 );

Now you’ve got a new sidebar on all WooCommerce pages, without having to touch a single template file. This works for all WooCommerce functions. Take a look at the templates (woocommerce/templates/), search for the Action Hook, and just exchange the functions.

By the way: the pages cart and checkout are no WooCommerce pages, but regular WP pages. This means, that the normal blog sidebar is displayed on them. You can either change that using the nosidebar.php template, or the plugin AH Display Widgets. The plugin lets you influence the display of certain widgets on specific pages.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.