Hello there and welcome! So glad you are here with us as we explain how you can setup your new Madeline Theme just like our live demo. So let’s go ahead and get started.
Begin by logging into your WordPress Dashboard. From there you will want to navigate to Appearance » Themes. In the upper left hand corner you will see a button that says “Add New“, go ahead and click on it.
First, upload your Genesis Framework zip file(it will be titled genesis.zip). Then repeat to upload your new Madeline themes’ zip file(it will be titled madeline.zip). Next, navigate back to the themes section of your Dashboard and locate the Madeline theme and click on the blue “Activate” button.
Your new theme is now active and live on your website. However, we still have plenty of ground to cover before it actually looks like the live demo.
Blog Title & Tagline
You will want to head on over to Settings » General. As you will see below, it is pretty self-explanatory. However, we wanted to point you in the right direction so you may modify these if you wish.
To upload your own header image/logo navigate to Media » Add New or you may upload to your themes’ images folder via FTP, it is up to you. Your image/logo must be 320px by 100px. However, if your logo needs to be bigger you may adjust the width and height as explained below. Please note, that 320px in width is a mobile friendly width. If you choose to upload your image via Media, once uploaded you will see a link to the right that says “Edit”, click on that. You will need to grab the images’ url, which can be located on the right hand side.
Now lets cruise on over to the style.css file by going to Appearance » Editor, you will find that you have landed on the stylesheet css file. Next search the css for this line of code:
You will want to replace “images/logo.png” with your image/logo url and change the height and width if your logo is larger than the align defined perimeters. Then scroll to the bottom and click the “Update File” button.
Next we want to make sure our image/logo shows instead of the default website text. So we will need to head on over to Genesis » Theme Settings in order to accomplish this. Once you find yourself there, scroll down until you see the section titled Header. Click on the arrow of the dropbox and select the “Image Logo” option.
Be sure to scroll either to the top or the bottom of the page and click the “Save Settings” button. And that’s it you now have your own header image/logo up!
Go to Appearance » Background. You can either upload your own background/pattern image. Which from there you can choose how you will like it to display such as repeat horizontally/vertically or tile.
There are two menus present in the Madeline theme. When you go to name your menus you need to name them Primary Navigation and Secondary Navigation in order for them to be mobile responsive when viewed on other devices.
You will want to install and activate the following plugins:
Genesis eNews Extended
Genesis Responsive Slider
Genesis Simple Share
Simple Social Icons
jQuery Pin It Button For Images
Alpine PhotoTile for Pinterest
For those of you who are WordPress “virgins”, we will go ahead and explain how and where to upload these plugins. There are two options.
You will want to navigate over to Plugins » Add New. In the upper left hand corner you will see a button titled “Upload Plugin”, go ahead and click on it. You will need to upload the plugins one at a time. After each upload is complete it will ask you if you want to activate. Yes, click the activate link for each plugin!
Like the first option find your way over to Plugins » Add New. From there you can enter the name of the plugin into the search bar on the right hand side and hit enter and click on the “Install Now” button next to the plugin image. After it has installed it will ask you to activate, go ahead and do this.
jQuery Pin It Button For Images
You will want to navigate to Settings » jQuery Pin It Button For Images. Then you will want to click on the “Visual” tab. You will want to apply these settings. You can find your themes’ pin it button image in your themes’ images folder.
Genesis Responsive Slider
Go to Genesis » Slider Settings. These are the exact slider settings that are used in the demo. Just be sure to click the “Save Settings” button when finished.
You can change the height to what you wish.
Genesis Simple Share
To configure this plugin simply go to Genesis » Simple Share. Set the Icon Size to Small Bar, the Icon Appearance to Filled and the Icon Display Position to After the Content. Choose which social networks you wish your content to be shared on and save!
Setting up your Posts Excerpts
To do this, you will need to navigate to Genesis » Theme Settings. Scroll down until you find the section labeled “Content Archives” and apply these settings and remember to click the “Save Settings” button when finished.
Modifying the Number of Posts to be Displayed on Homepage
Go to Settings » Reading and change the number next to the “Blog pages show at most” option and save!
Widgets & Widget Settings
Yay! We are finally here. You are practically done, just a bit further. Let’s get moving, shall we?
Come on and follow us on over to the Widgets Section by going to Appearance » Widgets. You will notice there are widgets on the left and widget areas on the right. Also, you will see that there are little arrow heads in the upper right hand corners of each widget area. You simply click on them to expand and collapse each widget area.
Moving forward, we will begin with the Primary Sidebar widget area. Go ahead and click on the arrow head expanding the area. In this area we will place a Text widget, our Simple Social Icons widget, Genesis-Featured Posts widget, Alpine PhotoTile for Pinterest widget, a Categories widget(optional), Calendar widget(optional),and another text widget(optional). To do this, you will locate each widget on the left and drag them over to the Primary Sidebar widget area and configure them as explained below.
We are going to use this instead of the standard User Profile widget, so we can spice it up a bit. You will need to open your media area in another tab. Simply hover over Media » Add New and while hovering over Add New, right click and select the Open Link in New Tab option. Upload your favorite selfie and have the url standing by.
This is what the text widget looks like in the demo.
Here is the code that is used in the bigger text area. Just be sure to place your image url where it is indicated as well as your About page url. You can remove the brief bio provided and replace it with your own.
SIMPLE SOCIAL ICONS
Simply replicate our settings as below. Fill in your URL in the appropriate areas and remember to save!
GENESIS – FEATURED POSTS
Here are the settings used in the demo. However, you can choose the category of your choice, choose the order you want them in, and also how many are to be displayed. Just click save when finished.
ALPINE PHOTOTILE FOR PINTEREST
Simply replicate these settings and save. You can choose just to have it show all your recent pins or just recent pins for a certain board.
CATEGORIES & CALENDAR WIDGETS
Now remember these to widget areas are optional. However, if you would like to add them here are the settings. Just remember to save after adjusting each one.
This is also an optional widget area. This was used as an ad space in the demo. So if you wish to add a Text widget for the same purpose, simply drag over a text widget and paste your ad code into the box.
Alright, moving on to the Below Navigation widget area. In this area we will be placing a Genesis Extended eNews widget. So go ahead and open up the widget area and place this widget within.
GENESIS – eNEWS EXTENDED
We use MailChimp in conjunction with plugin. Don’t know how to do this? Then click here and visit Restored 316 Designs to find out how!
However, if you still use feedburner then this will be a piece of cake for you(you will see the area to enter your username)! And save when finished.
AFTER POST WIDGET AREA
In this area we have placed a text widget with an ad within. This seems to be a high turn over area for ad placement. So as we did above, simply drag over a Text widget and place your ad code within and remember to save!
SLIDER WIDGET AREA
This one is a piece of cake! Open up your Slider widget area and place your slider widget within and Viola! That’s it for this area.
FOOTER WIDGET AREAS
Alright, let’s go ahead and wrap this baby up. Simply add the widgets shown below to their widget areas and duplicate their settings. Just remember again to save after adjusting each one.
We hope you have found this walk through on setting up your new Madeline theme helpful. We wish you the best of luck in your endeavors! Enjoy!