Beyond Madison

Please follow the tutorials below to create your site just like the demo. If you run into problems or have questions while following the tutorial please let us know. Don’t forget to submit your site to our Showcase page when you are done. We would love to see how your site looks!

Please note: after you install the design… the watercolor image (in the header) will not appear. You will need to add the watercolor image to the header. This step is below under “Header”.

Installation Service

Want us to install it for you? Sit back, relax, and let us do the work for you with our Installation Service. 

Start Here

• How to Install the Theme
• How to Setup the Menu Bar
• Plugins Used – if you would like to see a complete list of plugins used please see the bottom of this tutorial. If you are new to ‘plugins’ just follow the next steps below and it will show you.

Header

• Header Background Image – this is the watercolor image on the demo site – demo is using “Peony”. You do not have to use the watercolor image unless you want to.
• How to Add Your Own Logo – this is optional. You do not have to use a custom logo unless you want to. The best logo size is 800×400. If your logo is a different size please let us know, we can help you with that.

Homepage

The Homepage is created with widgets in the Front Page widget sections.

• Set Homepage and Blog Page
• Front Page 1 – How to setup the Photo Slider
• Front Page 2 – How to Setup the “Subscribe to Newsletter”
• Front Page 3 – Shop Products (must have the shop setup first – see “Setup WooCommerce Shop” below)
• Front Page 4 – How to Setup the Featured Posts on the Homepage (what’s new on the blog)
• Front Page 4 – “More From The Blog” button – while in Appearance >> Widgets… click on the “Custom HTML” widget then choose Front Page 4 from the dropdown. Copy/paste the following code into that widget and change the info to your info. Click “Save” when done.

Sidebar

• Welcome Image and Message
• Social Media Icons
• Subscribe Box
• Categories – while in Appearance >> Widgets… click on “Categories” and choose Primary Sidebar from the dropdown.

Blog Posts

• Note – A good image size for your blog post’s “Featured Image” is 800 x 550. If you want to use a different size… click on Appearance >> Customize. Next click on Theme Settings >> Content Archives. Change the image size where it says “Featured Image Size”. Click “Publish” when done.
• How to Add the “Share This” Buttons
• After Entry widget – you can place any widget in this widget area such as user profile, advertisement, or instagram widget. It will show at the bottom of every post, before the comments. I used the “Genesis – User Profile” widget on the demo site. Find the After Entry widget in Appearance >> Widgets.

Ad Between Posts

This ad space shows after the second post on every blog page. To use this ad space click on Appearance >> Widgets. If you have an:

• HTML/Javascript code for your ad – Click on “Custom HTML” widget and choose “Ad Between Posts”. Place your code in the Content box then click “Save”.
• Image and Link for your ad – click on “Image Widget” and choose “Ad Between Posts”. Click “Select an Image”, choose your image, insert the link, then click “Save”.

Footer Widgets

How To Use Footers 1, 2, & 3 – place any widgets in these Footers. But note: Footer 2 & 3 will not show unless you have something in Footer 1 first. To get to the Footer Widgets click on Appearance then Widgets.

• Footer 1 – The Beyond Madison theme is using a Text Widget and Social Media Icons in Footer 1.
• Footer 2 – is using a “Custom HTML” widget. Copy/paste the following code into a “Custom HTML” widget and change the info to your info. Click “Save” when done.

• Footer 3 – The Beyond Madison theme is using a Text Widget for this section.

Instagram Feed – Widget Above Footer

Please follow this Instagram Widget tutorial to finish this setup.

Contact Page

• Using a Contact Form

Category Page

Follow this tutorial on how to create a category page. The category page on Beyond Madison looks like this. You can also follow along in the video tutorial here.

To add a description to the Category page… click Posts >> Categories. Click on the category you would like to add a description too. Add your description where it says “Archive Intro Text”. Click “Update” at the bottom then view your Category page.

Page Templates (these are optional)

• Category Index – the Beyond Madison category index page can be seen here.
• Instagram Page – the Instagram Page looks like this.
• Portfolio Page – the portfolio page on Beyond Madison looks like this.
• Archive Page
• Landing Page

Setup WooCommerce Shop

If you would like to add a shop to your site please follow this tutorial.

Customize

• How to Change the Colors of your Theme

Images Used on Demo Site

All the images shown on the demo site came from Haute Stock (affiliate). Haute Stock updates their images regularly. We can not guarantee that you will be able to find the exact same images that are shown on the demo site.

Theme Information

---