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”.
Want us to install it for you? Sit back, relax, and let us do the work for you with our Installation Service.
- 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 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.
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.
- Welcome Image and Message
- Social Media Icons
- Subscribe Box
- Categories – while in Appearance >> Widgets… click on “Categories” and choose Primary Sidebar from the dropdown.
- 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:
- 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”.
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.
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.
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.
- Poppins (body font) – found on Google Fonts
- Questrial (site title and menu bar font) – found on Google Fonts
- Satisfy (script font) – found on Google Fonts
Color Codes Used
- Pink – #f9b1ab
- Black – #333333
- Grey – #f5f5f5
List of Plugins Used
- Genesis eNews Extended
- Genesis Simple Share
- Image Widget
- Instagram Feed
- Ninja Forms
- Soliloquy Slider
- Simple Social Icons
- Portfolio Post Type (optional – if you plan to use the portfolio)
- WooCommerce (optional – this is the shopping cart)
- Genesis Connect for WooCommerce (this is for the shopping cart)
These tutorials are not necessary but only optional for those who are looking to customize their themes further.
- How to Change your Site Title and Tagline
- Change the Page Layout to Sidebar/Content or Full Width Content
- How to Change the Favicon
You can also find more tutorials on our blog.
If you have questions about your theme and can’t find the answer above please feel free to submit a support ticket.
Please note: support is only provided for setup and installation, questions and concerns. Support is not provided for personal customizations to our themes.
New to WordPress?
Need a little help on how to use WordPress? Become more comfortable and confident with WP101 video tutorials. Watch this sample tutorial to get a quick introduction to WordPress.