Skip to content

Genesis WordPress Theme Integration

Table of Contents

The following steps will guide you in the installation and configuration of the Genesis WordPress Theme. VPN Access is needed to access some of the resources in this guide.

Prerequisites

  • Genesis Framework 1.0.0+
  • PHP 7.3+
  • WordPress 5.8

1. Isolated WordPress Installation (TAC)

The majority of this step is done by TAC, however there are a few steps to make sure the environment is set up correctly for development.

  1. Make sure TAC updates the PHP version to PHP 7.3+ as this is required by the Genesis WordPress Theme.

  2. You should determine your blog URL before asking TAC to set up the install. Most blogs will have the URL www.domain.com/blog; however, there are instances where your blog URL may be different. For example, some sites may have a different sub-directory structure such as www.domain.com/my-blog-url or a sub-domain blog like blog.domain.com. Whatever the case, it is always best to let TAC know ahead of time what your blog URL should be to avoid reconfiguration.

NOTE: It is best practice to keep what the client's current site path is for better SEO retention.

  1. If you have not already done so, please set up your FTP access to the WordPress installation you are working on. The next step will require access to the wp-config.php file located in the WordPress installation root directory.

  2. Make sure that TAC has set up the following snippet in the wp-config.php and it is pointing to the correct domain for the current server you are working on. Normally this is set up at the top of the wp-config.php right under the opening The base configurations comment box.

/* Miva Settings DO NOT EDIT */
$_SERVER['HTTP_HOST'] = 'www.domain.com';
define( 'STORE_CODE', 'store code' );
define( 'API_PAGE', 'JAPI' );
define( 'DEV_URL', 'https://www.domain.com' );
define( 'MODULE_ROOT', 'mm5' );
define( 'WP_HOME', 'https://www.domain.com/blog' );
define( 'WP_SITEURL', 'https://www.domain.com/blog' );
/* Miva Settings DO NOT EDIT */

NOTE: The DEV_URL is only used when enabling debug mode in WordPress and can serve as an override for <base href="">.

2. Extending JAPI Page

This page should already exist in your Genesis framework install. You will need to add the code block below, required by the Genesis WordPress Theme, to the JAPI Page.

NOTE: The API_PAGE setting in wp-config.php refers to the Screen Code that will point to this page.

  1. Place the code below into the JAPI Page. The code will extend the functionality of this page. This page will be the API endpoint required by the Genesis WordPress Theme to output the page elements. JAPI--partial.mvt.
<mvt:comment>
|
|   WordPress Theme Integration.
|
|   Header/Footer Request:
|   {
|       function: 'wordpress-theme-content',
|       page_content: 'html_profile,head_tag,global_header,global_footer'
|   }
|
|   Account/Cart Request:
|   {
|       function: 'wordpress-theme-content',
|       page_content: 'basket_count,account_html'
|   }
|
</mvt:comment>

<mvt:if expr="l.settings:data:function EQ 'wordpress-theme-content'">
    <mvt:if expr="ISNULL l.settings:data:page_content">
        <mvt:assign name="l.response:success"       value="0" />
        <mvt:assign name="l.response:function"      value="l.settings:data:function" />
        <mvt:assign name="l.response:error_code"    value="'JAPI-WPT-00001'" />
        <mvt:assign name="l.response:message"       value="'Missing Page Content'" />

        <mvt:do file="g.Module_JSON" name="l.JSON_Output_success" value="JSON_Output( l.response )" />
        <mvt:exit />
    </mvt:if>

    <mvt:assign name="l.page_content_count" value="miva_splitstring( l.settings:data:page_content, ',', l.settings:page_content, 'trim' )" />

    <mvt:comment>
    |
    |   Set variables for Screen and Page_Code.
    |
    </mvt:comment>
    <mvt:assign name="g.Screen" value="'WP'" />
    <mvt:assign name="g.Page_Code" value="'WP'" />
    <mvt:assign name="l.settings:page:code" value="'WP'" />

    <mvt:comment>
    |
    |   Generate requested outputs for page content.
    |   html_profile, head_tag, global_header, global_footer, basket_count, account_html
    |
    </mvt:comment>
    <mvt:foreach iterator="page_content_code" array="page_content">
        <mvt:if expr="l.settings:page_content_code EQ 'html_profile'">
            <mvt:capture variable="l.output:html_profile">
                <mvt:item name="html_profile" />
            </mvt:capture>
        <mvt:elseif expr="l.settings:page_content_code EQ 'head_tag'">
            <mvt:capture variable="l.output:head_tag">
                <mvt:item name="head" param="css_list" />
                <mvt:item name="head" param="head_tag" />
                <mvt:comment>
                |
                |   Output JSON variables, this allows the branch widget to function on 
                |   WordPress by outputting a script tag with the following variables set:
                |   MivaVM_API, MivaVM_Version, json_url, json_nosessionurl and Store_Code
                |
                |   Sample Output:
                |   <script type="text/javascript">
                |       var MivaVM_API = "Redirect";
                |       var MivaVM_Version = "5.35";
                |       var json_url = "https:\/\/www.domain.com\/mm5\/json.mvc\u003F";
                |       var json_nosessionurl = "https:\/\/www.domain.com\/mm5\/json.mvc\u003F";
                |       var Store_Code = "Store_Code";
                |   </script>
                |
                </mvt:comment>
                <mvt:do file="g.Module_Feature_TUI_MGR" name="l.success" value="TemplateManager_Render_JSON_Variables( l.settings )" />
            </mvt:capture>
        <mvt:elseif expr="l.settings:page_content_code EQ 'global_header'">
            <mvt:capture variable="l.output:global_header">
                <mvt:item name="hdft" param="global_header" />
            </mvt:capture>
        <mvt:elseif expr="l.settings:page_content_code EQ 'global_footer'">
            <mvt:capture variable="l.output:global_footer">
                <mvt:item name="hdft" param="global_footer" />
            </mvt:capture>
        <mvt:elseif expr="l.settings:page_content_code EQ 'basket_count'">
            <mvt:capture variable= "l.output:minibasket_html">
                <mvt:item name="global_minibasket" />
            </mvt:capture>      
            <mvt:assign name="l.output:minibasket_count" value="l.settings:global_minibasket:basket_count" />
        <mvt:elseif expr="l.settings:page_content_code EQ 'account_html'">
            <mvt:if expr="g.Basket:cust_id GT 0">
                <mvt:capture variable="l.output:account_html">
                    <mvt:item name="readytheme" param="contentsection( 'account_links_signed_in' )" />
                </mvt:capture>
            </mvt:if>
        </mvt:if>
    </mvt:foreach>

    <mvt:comment>
    |
    |   Set the response object
    |       - success       : 1
    |       - function      : wordpress-theme-content
    |       - data          : Output of requested content
    |
    </mvt:comment>

    <mvt:assign name="l.response:success"   value="1" />
    <mvt:assign name="l.response:function"  value="l.settings:data:function" />
    <mvt:assign name="l.response:data"      value="l.output" />

    <mvt:do file="g.Module_JSON" name="l.JSON_Output_success" value="JSON_Output( l.response )" />
    <mvt:exit />
</mvt:if>

  1. In the items tab please makes sure the items needed are assigned to the page. Below is a list of basic items needed for the above function, your implementation may require addition items.

  2. customfields

  3. customerlink
  4. global_minibasket
  5. hdft
  6. head
  7. html_profile
  8. navbar
  9. readytheme
  10. ry_toolbelt
  11. sitemap_exclude
  12. store
  13. tgcomponent

NOTE: It is best practice to only assign items required to avoid additional unnecessary usage of resources.

3. Import WordPress Styling

This setup will allow you to style the Genesis WordPress Theme as you would any other part of a Genesis site build that uses webpack.

Now you will need to set up and load in the styling from webpack. This file may have already been included in your Genesis install; if so, please make sure the file contains the correct code and skip this part, otherwise follow the steps below.

  1. In your themes/genesis/src/pages directory create a new folder and name it WP.
  2. In this folder create a new file and name it WP.scss
  3. Locate the file WP.scss in the repo and copy the contents to the WP.scss file you created in Step 2.
@import "variables";

/* Global Breadcrumbs
=========================================== */

.g-breadcrumbs__list__item {

    &:last-child {

        span {
            color: $black;
            font-weight: $font-weight-medium;
        }
    }
}

/* Global Navigation
=========================================== */

.g-navigation-menu {
    z-index: 401;
}

/* Wordpress Specific Styling
=========================================== */

.wp-container {

    a {
        transition: $transition;
    }
}

.wp-mobile-menu-button {
    margin-bottom: 48px;
}

.wp-mobile-menu-btn {
    width: 100%;

    span[ class*="u-icon-" ] {
        font-size: $font-size-small;
        margin-right: 6px;
        position: relative;
        top: 1px;
    }

    &.g-button--clear:hover {
        border-bottom: none !important;  /* stylelint-disable-line declaration-no-important */
    }
}

.wp-featured-blog {
    margin: {
        bottom: 48px;
        top: $unit;
    };
    padding: 0;

    @include media( ">=large" ) {
        margin-bottom: 48px;
        padding: 0;
    }
}

.wp-featured-blog__container {
    padding: 0;
}

.wp-featured-blog__callout {
    background-color: $background-color-xlight;
}

.wp-featured-blog__title {

    @include media( ">=large" ) {
        max-width: 500px;
    }
}

.wp-header {
    margin-bottom: $unit-large;
    text-align: center;

    @include media( ">=large" ) {
        margin-bottom: 48px;
    }
}

.wp-header__title {
    margin: {
        bottom: 0;
        top: $unit-large;
    };

    @include media( ">=large" ) {
        margin-top: 6px;
    }
}

.wp-content {

    @include media( ">=xxlarge" ) {

        & > .g-layout {
            margin: {
                left: -$unit;
                right: -$unit;
            };
        }
    }

    .wp-article {
        margin-bottom: 0;
    }
}

.wp-article,
.wp-related-posts__article {
    display: flex;
    justify-content: center;

    @include media( ">=xxlarge" ) {
        padding: 0 $unit;
    }

    article {
        display: flex;
        flex-flow: column nowrap;
        margin-bottom: 48px;
        padding: 0;
        text-align: center;
    }
}

.wp-article__image,
.wp-related-posts__article-image {
    display: flex;
    flex: 0 1 auto;
    justify-content: center;
}

.wp-article__image-inner,
.wp-featured-blog__image-inner {
    width: 100%;

    .wp-post-image {
        width: 100%;
    }
}

.wp-article__content,
.wp-related-posts__article-content {
    display: flex;
    flex: 1 0 auto;
    flex-flow: column nowrap;
    padding: 0 $unit;

    @include media( ">=xxlarge" ) {
        padding: {
            left: $unit-large;
            right: $unit-large;
        };
    }
}

.wp-article__title,
.wp-related-posts__article-title {
    @include type-heading();
    font-size: 18px;
    line-height: 1.16;
    margin: {
        bottom: $unit-xsmall;
        top: $unit;
    };

    @include media( ">=medium" ) {
        margin-top: 12px;
    }

    @include media( ">=large" ) {
        margin: {
            bottom: $unit;
            top: 20px;
        };
    }

    @include media( ">=xxlarge" ) {
        font-size: $heading-h5-size;
    }

    a {
        font-weight: inherit;

        &:hover,
        &:focus {
            @include base-link-hover;
        }
    }
}

.wp-article__text,
.wp-related-posts__article-text {
    @include type-paragraph-small;
}

.wp-article__footer,
.wp-related-posts__article-footer {
    margin-bottom: 0;
}

.wp-article__link,
.wp-related-posts__article-link {
    @include regular-link;
    margin-top: 12px;
}

.wp-sidebar {
    @include media( ">=large" ) {
        padding-left: $unit;

        & > div:not(:first-child) {
            padding-top: 6px;
        }
    }

    @include media( ">=xxlarge" ) {
        padding-left: $unit-large;
    }

    h2 {
        @include type-heading($font-weight: $font-weight-semibold);
        margin-bottom: $unit;
    }

    ul {
        font-size: 14px;
        list-style-type: none;
        margin: {
            bottom: $unit-large;
            left: 0;
        };
    }

    li {
        line-height: $line-height;

        &:not(:last-child) {
            margin-bottom: 12px;
        }
    }

    a {

        &:hover,
        &:focus {
            @include base-link-hover;
        }
    }
}

.wp-post-featured-image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100px;
    margin: $unit 0 $unit-large;

    @include media( ">=medium" ) {
        height: 300px;
    }

    @include media( ">=xlarge" ) {
        height: 500px;
        margin-bottom: 48px;
    }
}

.wp-post,
.wp-related-posts {
    margin: 0 auto;
    max-width: $breakpoints-xlarge;
}

.wp-post__header {
    margin-bottom: $unit-medium;
}

.wp-post__meta {
    @include type-captions-small;

    a {
        @include base-link($font-weight: $font-weight-medium, $font-size: inherit);
        text-decoration: none;
    }
}

.wp-post__meta-divider {
    color: inherit;
    font-weight: $font-weight-normal;
    margin: 0 $unit-xsmall 0 $unit-small;
}

.wp-post__content {
    font-size: 18px;

    h2,
    h3,
    h4 {
        margin: $unit-large 0 $unit;
    }

    h2 {
        @include type-title-3;

    }

    h3 {
        @include type-title-4;
    }

    h4 {
        @include type-heading();
        @include type-subheading-small-style();
    }

    p {

        a {
            @include base-link($font-size: 18px);

            strong {
                font-weight: $font-weight-semibold;
            }
        }
    }

    .wp-block-image {
        margin: $unit-medium 0;

        img {
            max-width: 100%;
        }

        figcaption {
            margin: {
                bottom: 0;
                top: $unit-small;
            };
        }
    }

    .wp-block-group {
        margin-bottom: $unit-medium;

        .wp-block-image {
            margin-top: 0;
        }
    }

    .wp-block-column {

        .wp-block-image {
            margin: {
                bottom: $unit;
                top: 0;
            };
        }
    }

    @include media( ">=large" ) {

        p {
            max-width: 900px;
        }
    }

}

.wp-post__footer {
    padding: $unit-large 0;

    @include media( ">=large" ) {
        padding-bottom: 48px;
    }

    .wp-post__tags {
        @include type-captions-small;

        a {
            @include base-link($font-weight: $font-weight-medium, $font-size: inherit);
            text-decoration: none;
        }
    }

    .wp-post__tags-label {
        font-weight: $font-weight-semibold;
    }

    .post-edit-link {
        @include regular-link;
    }
}

.wp-post__page-links {
    display: flex;
    justify-content: space-between;

    a {
        @include type-call-to-action;
        text-decoration: none;

        @media ( prefers-reduced-motion: no-preference ) {
            transition: $transition;
        }

        span[ class*="u-icon-" ] {
            color: $black;
            font-size: 28px;
            position: relative;
            top: $unit-small;
        }

        .u-icon-arrow-left {
            margin-right: 6px;
        }

        .u-icon-arrow-right {
            margin-left: 6px;
        }

        &:hover,
        &:focus {
            color: $primary;

            span[ class*="u-icon-" ] {
                color: $black;
            }
        }
    }
}

.wp-post__social-share,
.wp-post__comments,
.wp-related-posts {
    border-top: $border-solid;
    padding: $unit-large 0;

    @include media( ">=large" ) {
        padding: 48px 0;
    }
}

.wp-post__social-share-title {
    @include type-title-3;
    margin-bottom: $unit-medium;
}

.wp-post__social-share-icon {
    flex: 0 1 auto;
    margin-right: $unit-medium;
    padding: 0;

    a {
        display: block;

        @media ( prefers-reduced-motion: no-preference ) {
            transition: $transition;
        }

        &:hover,
        &:focus {
            @include base-link-hover;
            text-decoration: none;
        }
    }

    span[ class*="u-icon-" ] {
        font-size: 20px;
    }
}

.wp-post__social-share-facebook {
    margin-left: $unit-xsmall;
}

.wp-post__comments-title {
    @include type-title-3;
    margin-bottom: $unit;
}

.wp-post__comments-subtitle {
    @include type-subheading-xsmall;
    margin-bottom: $unit-xsmall;

    .required {
        color: #B13138;
        font-weight: $font-weight-medium;
    }
}

.wp-post__comments-form-wrapper {
    margin-bottom: 48px;
}

.wp-post__comments-form {

    .logged-in-as {
        flex: 1 1 100%;
        font-size: 14px;
        padding: 0 $unit-small;

        a {
            @include regular-link;
        }

        .required-field-message {

            .required {
                color: #B13138;
            }
        }
    }

    .g-form-input {
        margin-bottom: 0;
    }

    .comment-form-cookies-consent {
        display: flex;
        flex: 1 1 auto;
        flex-basis: 100%;
        margin-bottom: 12px;
        max-width: 100%;
        padding: 0 $unit-small;

        input {
            position: relative;
            top: 3px;
        }

        label {
            @include type-paragraph-small;
            padding-left: 10px;
        }
    }
}

.wp-post__comments-form-input {
    margin-bottom: 18px;
}

.wp-post__comments-form-comment {

    textarea {
        resize: vertical;
    }
}

.wp-post__comments-form-button {
    margin-top: $unit;
}

.wp-post__comments-listing-title {
    @include type-subheading-small;
    color: $black;
    margin-bottom: 0;
}

.wp-post__comments-listing-list {
    margin-bottom: 0;

    .comment {

        &:first-child {
            margin-top: $unit-medium;
        }

        &:not(:last-child) {
            margin-bottom: 48px;
        }

        &::marker {
            font-size: 0;
        }
    }

    .children {
        margin: {
            bottom: 0;
            left: $unit-large;
        }

        &:not(:last-child) {
            margin-bottom: $unit-medium;
        }

        @include media( ">=medium" ) {
            margin-left: $unit-xxlarge;
        }
    }
}

.wp-post__comments-author-avatar {
    flex: 0 1 50px;
}

.wp-post__comments-author-image {

    img {
        width: 100%;
    }
}

.wp-post__comments-author-title,
.wp-post__comments-comment-date {
    @include type-paragraph-small;
}

.wp-post__comments-author-name {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
}

.wp-post__comments-author-title {
    font-weight: $font-weight-medium;
    margin: {
        bottom: 0;
        left: $unit-medium;
    }
}

.wp-post__comments-comment {
    margin-top: 18px;
}

.wp-post__comments-comment-date {
    @include type-paragraph-small;
    margin-bottom: $unit;
}

.wp-post__comments-comment-text {
    margin-bottom: $unit-medium;

    p {
        font-size: 18px;
    }
}

.wp-post__comments-comment-links {
    margin-bottom: 0;
}

.wp-post__comments-comment-link {

    .comment-reply-link,
    .comment-edit-link {
        @include regular-link;
    }

    .comment-edit-link {
        margin-left: 12px;
    }

    .comment-reply-title {
        @include type-paragraph-small;

        a {
            @include regular-link;
        }

        small {
            display: block;
        }
    }
}

.wp-post__comments-comment-approval {
    @include type-paragraph-small;
    font-style: italic;
}

.wp-related-posts__title {
    @include type-title-3;
    margin-bottom: $unit-large;
    text-align: center;
}

.wp-related-posts__articles {

    @include media( ">=xxlarge" ) {
        margin: {
            left: -$unit;
            right: -$unit;
        };
    }

    .wp-related-posts__article {
        margin-bottom: 0;
    }
}

.wp-pagination {
    padding-bottom: 48px;

    @include media( ">=xlarge" ) {
        padding: {
            bottom: $unit-xxxlarge;
            top: $unit-medium;
        };
    }

    .nav-links {
        align-items: center;
        display: flex;
        justify-content: center;
        margin-bottom: 0;

        .page-numbers {
            display: block;
            font: {
                size: $font-size-xsmall;
                weight: $font-weight-medium;
            };
            height: 35px;
            line-height: 35px;
            text-align: center;
            transition: $transition;
            width: 35px;

            &.current {
                background: #F4F9FE;
                color: $primary;
            }

            &:not(.current):hover,
            &:not(.current):focus {
                @include base-link-hover;
            }

            &:not(.dots) {
                border-radius: 100%;
            }

            &.prev,
            &.next {
                font-size: 8px;
                transition: $transition;
            }
        }
    }
}

@include media( ">=large" ) {

    .wp-post__comments-header {
        margin-bottom: 6px;
    }
}
  1. In your themes/genesis/src directory add the following line to the themes.js file under pageCodeImports.
WP: () => import('pages/WP/WP.scss')

NOTE: The above setup must be complete before you can run localhost:3000 environment for local development.

4. Install Genesis WordPress Theme

You will need your WordPress installed and set up at this point. If you do not have this yet, please follow Isolated WordPress installation (TAC).

If you are just looking to install the latest Genesis WordPress Theme build, skip to Step 2 and download the already built theme zip file. Otherwise, if you want to build from scratch, you will need to run a build process to generate the latest Genesis WordPress Theme zip file to install into WordPress.

  1. In your terminal inside the wordpress-theme directory, run pnpm run build. The outputted file in the build directory should look something like this: genesis-wordpress-theme-vX.X.X.zip.

    If you have changed anything in the WordPress theme codebase please remember to bump up the version before you run a build. To bump up the version you will need to update the current version in the following files. package.json and style.css these files are located within the wordpress-theme directory also update the WordPress docs file wordpress-theme.md to point to the correct version.

  2. Download the latest build: genesis-wordpress-theme-v1.0.4.zip.

  3. Navigate to your blog admin page. The URL will look something like this: https://www.domain.com/blog/admin.

NOTE: If TAC has not already done so, you may need to continue the WordPress setup at this point; so if you are welcomed with a setup screen, please follow through the steps until you get to the admin dashboard.

  1. In the WordPress admin dashboard navigate to the Appearance tab on the left menu. Once you are on the Themes page click on Add New, then Upload Theme, choose the file you downloaded from Step 2, and click Install Now.

  2. Once your theme is installed, you should be able to activate the theme; the next step will need access to the Miva Settings admin page.

5. Miva Settings Page

  1. In the WordPress admin dashboard navigate to Settings. You should now see and click on the new menu option Miva Settings.

Here you can see configuration settings like the API endpoint, Store Code, and Module Root configured in wp-config.php, as well as other basic configurable settings like username/password for dev sites, 404 Image Url and transients.

If you are working on a dev or staging site, you can setup the Username and Password needed for the htaccess security.

NOTE: Username and Password Example: username:password the : is important to place between your username and password. Once your credentials are saved the hashed version will be visible.

  1. Verify that the API endpoint is pointing the the correct page. Take a look at the example link below.

    API Page URL:

    https://www.domain.com/mm5/merchant.mvc?Screen=JAPI

If the endpoint is not what it should, be please check the settings in the wp-config.php and refer to the Isolated WordPress installation (TAC) section.

NOTE: This endpoint is also used on the front-end in the AJAX call located in account-cart.js. This call is made to get the My Account status and Mini-Basket data.

  1. Configure 404 Page Image URL.

This is where you can input the location of the 404 image that will generate on the 404 page. Here is an example of what this entry would look like: graphics/00000001/1/404-desktop.jpg. The file path may be different depending on where this file was created in your store during the Genesis framework installation.

6. How Transients Work

You may need to clear the transients on the WordPress side to pull in fresh data from the API endpoint. The following will give you an overview of the required steps. Keep in mind that during the usage of a BranchKey, transients are disabled.

Transients, by default, are stored for 24 hours. This means that the Miva JAPI page is hit once every 24 hours to grab the latest JSON output of the Miva elements for the header and footer content.

  • To clear transients, check the box and hit save. Once the front-end of your blog is accessed, the transients will refresh and the checkbox will clear. (Note that the admin pages do not trigger this method)
  • If the check box does not clear when you refresh the Miva Settings page, this is an indication that the transient was not successfully cleared.

NOTE: The time can be changed in the functions.php file in the theme.

7. How BranchKey Works

A BranchKey in WordPress works exactly how it does in the Miva Store. If the blog URL is visited with the ?BranchKey= parameter containing a valid branch key, WordPress will use the provided header, footer and all other elements from that branch. Once this happens, the branch key is stored in a cookie that is both accessible by WordPress and Miva. If the branch key is entered on the Miva site the branch will be accessible on the blog, and if the branch key is entered on the blog the branch will be accessible in Miva. To end a brach session you can utilize the Miva branch widget both on Miva and WordPress.

NOTE: Transients are disabled during the usage of a BranchKey.

8. Prevent Duplicate Elements

With the implementation of WordPress we may need to prevent some of the head elements from displaying on the "WP" page template as these will cause issues with duplicated meta data.

Elements like base href and title are outputted on the WordPress side and should not be outputted on the Miva side as well.

To prevent this from happening we may need to wrap some of the head elements in a conditional, the code example below is using the standard Genesis cssui-global-head.mvt as a starting point with the additional changes needed to prevent duplicate elements. Use this as a guide, in some cases the code will vary based on the sites needs.

<mvt:comment>
|
|   With the implementation of WordPress we need to prevent some of the head elements from
|   displaying on the "WP" page template resolving the issue of duplicate meta data.
|
|   The following elements are outputted on the WordPress side
|   - base href
|   - title
|
|   The structure below is an example using the standard Genesis cssui-global-head.mvt
|   showing the changes needed to accomplish this.
|
</mvt:comment>

<mvt:comment>
|
|   Base Meta Data
|
</mvt:comment>
<meta name="viewport" content="width=device-width, initial-scale=1">

<mvt:if expr="l.settings:page:code NE 'WP'">
    <mvt:comment>
    |
    |   Base Href Tag
    |
    </mvt:comment>
    <base href="&mvte:global:basehref;">

    <mvt:comment>
    |
    |   Title Tag
    |
    </mvt:comment>
    <mvt:if expr="
    l.settings:page:code EQ 'PROD' AND
    ISNULL l.settings:product:page_title
    ">
        <title>&mvte:store:name;: &mvte:product:name;</title>
    <mvt:elseif expr="NOT ISNULL l.settings:product:page_title">
        <title>&mvte:product:page_title;</title>
    <mvt:elseif expr="NOT ISNULL l.settings:category:page_title">
        <title>&mvte:category:page_title;</title>
    <mvt:elseif expr="NOT ISNULL l.settings:page:title">
        <title>&mvte:page:title;</title>
    <mvt:else>
        <title>&mvte:global:store:name;: &mvte:page:name;</title>
    </mvt:if>

    <mvt:comment>
    |
    |   Canonical Tag
    |
    </mvt:comment>
    <mvt:if expr="'CTGY' CIN l.settings:page:code">
        <link rel="canonical" href="&mvte:category:link;">
    <mvt:elseif expr="'PROD' CIN l.settings:page:code OR l.settings:page:code EQ 'PATR'">
        <link rel="canonical" href="&mvt:product:link;">
    <mvt:elseif expr="l.settings:page:code NE 'MNTN'">
        <link rel="canonical" href="&mvte:urls:_self:auto;">
    </mvt:if>
    <mvt:item name="prodctgy_meta" param="combined" />
</mvt:if>

<mvt:comment>
|
|   Other Link Resources
|
</mvt:comment>
<link rel="icon" type="image/png" href="&mvte:global:theme_path;/public/images/favicon.jpg">

<mvt:comment>
|
|   CSS / Styles
|
</mvt:comment>
<mvt:assign name="l.settings:cache_buster:main_css:source_path" value="g.imageroot $ g.theme_path $ '/public/dist/main.css'" />
<mvt:assign name="l.settings:cache_buster:main_css:last_modified_time" value="stime( l.settings:cache_buster:main_css:source_path )" />
<link rel="stylesheet" href="&mvte:cache_buster:main_css:source_path;?t=&mvte:cache_buster:main_css:last_modified_time;" />

<mvt:assign name="l.settings:cache_buster:preload_css:source_path" value="g.imageroot $ g.theme_path $ '/public/dist/page-code--' $ l.settings:page:code $ '.chunk.css'" />
<mvt:assign name="l.settings:cache_buster:preload_css:last_modified_time" value="stime( l.settings:cache_buster:preload_css:source_path )" />
<mvt:if expr="l.settings:cache_buster:preload_css:last_modified_time">
    <link rel="stylesheet" href="&mvte:cache_buster:preload_css:source_path;?t=&mvte:cache_buster:preload_css:last_modified_time;" />
</mvt:if>

Once finished, double-check the front-end of the blog and make sure there are no additional duplicate element that may need attention.

Example of possible duplicated elements to look for:

  • Base href
  • Meta tags (ie. keywords, description)
    • Open Graph tags
    • Twitter share tags
  • Title
  • Canonical

This should conclude the implementation process of the Genesis WordPress Theme for WordPress.