Bark Times Theme Installation

Save this guide and use it for setting up all future sites with the custom Bark Times child theme. This guide goes over how to install the needed themes and setup your content using WordPress’ built-in tools and additional features of Marketers Delight.

1. Install MD + Bark Times Child Theme

To setup the Bark Times theme to other sites you need the following tools, available for download from your Marketers Delight members area.

Download and install the latest versions of:

  • MD Theme
  • MD Plugin
  • Bark Times Child Theme

For instructions on how to install Marketers Delight, read this quick tutorial.

Once you’ve installed the 2 themes and 1 plugin be sure to activate them. You can now move on to the setup steps below.

Step 2: Connect to an Email Service

As part of the setup process, it’s recommended you connect to an email service or tell MD how you’re using email forms on your site. MD connect to these services and if your service isn’t listed, you can use your own email form code..

In your dashboard, navigate to Appearance > Email Forms and follow the onscreen instructions to connect to an email service.

I used the custom form code that was already on your site and formatted it to match MD’s styles. I recommend pasting the following code into the “HTML Email Form Code” section on the screen:

<form id="email_signup" class="email-form text-center" action="//manage.kmail-lists.com/subscriptions/subscribe" data-ajax-submit="//manage.kmail-lists.com/ajax/subscriptions/subscribe" method="GET" target="_blank" novalidate="novalidate">

	<input type="hidden" name="g" value="mxsTTC">

	<div class="klaviyo_field_group mb-half">
		<input type="email" value="" class="form-input form-input-email" name="email" id="k_id_email" placeholder="Your email" />
	</div>

	<div class="klaviyo_messages mb-half">
		<div class="success_message" style="display:none;"></div>
		<div class="error_message" style="display:none;"></div>
	</div>

	<div class="klaviyo_form_actions mb-half">
		<button type="submit" class="form-submit klaviyo_submit_button">Subscribe</button>
	</div>

	<p><small>We will never sell or misuse your email address.</small></p>

</form>

<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script type="text/javascript">
  KlaviyoSubscribe.attachToForms('#email_signup', {
    hide_form_on_success: true
  });
</script>

This form will be default email form used anytime you use a feature of MD that asks for an email code. You can overwrite email forms, like we will in the sidebar below, to add custom forms anywhere on your site.

Step 3: Creating the Sidebar

Before adding any Widgets to the sidebar we need to enable it to all posts and pages. Login to your WordPress dashboard and navigate to Appearance > Customizer > Layout and enable the sidebar on Posts and Archives.

sidebar-posts-pages

Save and Publish your changes, then exit from the Customizer by clicking the “x” icon at the top left.

Now, still in the dashboard, go over to Appearance > Widgets and begin dragging the Widgets you want into the “Main Sidebar” Widget area.

Email Signup Widget

The easiest way to place an email signup form in your sidebar is to use MD’s built-in “Email Signup Form” Widget. Drag the widget into the Main Sidebar and open it.

There will be an option to create a custom email form, and you should enable it then click “save” to show the custom form options.

custom-email-form

I formatted the sidebar email form a little differently than the default (it has background colors) so use this form code when creating a sidebar optin:

<form id="email_signup" class="email-form box-dark block-single" action="//manage.kmail-lists.com/subscriptions/subscribe" data-ajax-submit="//manage.kmail-lists.com/ajax/subscriptions/subscribe" method="GET" target="_blank" novalidate="novalidate" style="background-color: #5DB9C2;">

	<p class="small-title">Join our doggy newsletter</p>

	<p>Enter your email below to receive my FREE 1-hour critique video, downloadable Cheat Sheet, and 7-day email course to kickstart your growth!</p>

	<input type="hidden" name="g" value="mxsTTC">

	<div class="klaviyo_field_group mb-half">
		<input type="email" value="" class="form-input form-input-email" name="email" id="k_id_email" placeholder="Your email" />
	</div>

	<div class="klaviyo_messages mb-half">
		<div class="success_message" style="display:none;"></div>
		<div class="error_message" style="display:none;"></div>
	</div>

	<div class="klaviyo_form_actions mb-half">
		<button type="submit" class="form-submit klaviyo_submit_button">Subscribe</button>
	</div>

	<p><small>We will never sell or misuse your email address.</small></p>

</form>

<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script type="text/javascript">
  KlaviyoSubscribe.attachToForms('#email_signup', {
    hide_form_on_success: true
  });
</script>

Content Spotlight Widget

To create these linked colored boxes in your sidebar, drag the Content Spotlight widget into the Sidebar.

Screen Shot 2016-06-28 at 1.27.29 PM

There are a few options you can fill out to fill the widget with text and a link to a post/page:

content-spotlight

You can drag as many of these Widgets in your sidebar as you want.

Email Lead (in Footer)

Finally, to create the email signup form in the Footer we can head over to the Appearance > Page Leads > Email Lead section in the WordPress dashboard and set the Email Lead up as our site’s footer.

The Email Lead (you can read more about Page Leads here) is an email block that can be used throughout your site.

From the Email Lead settings panel you can configure the following settings below and fill out the text you want to use it as your footer:

(click for a larger view)

(click for a larger view)

Changing Colors

In the Child Theme’s style.css file you’ll be able to change the colors of various elements around the site. In Appearance > Editor you can scroll down the small CSS stylesheet and swap out existing hex code colors with new colors you’d want. I’ve left comments in the file to show you where to make code changes in the file.