Welcome to the installation guide of Madrid WordPress Theme. Madrid is a clean and minimalistic theme for fashion and lifestyle bloggers who want to focus on their content and monetize their blog in many different ways. It features seven different homepage layouts, a custom made shopping experience and compatibility with all major affiliate networks. Follow the guide below to install Madrid Theme or shoot us an email for professional help with the setup: email@example.com
1. Theme Upload and Installation
Navigate to your WordPress Dashboard and click on Appearance > Themes.
Now click on the Add New button on top of the page and then click Upload Theme.
Choose the Madrid.zip file from the MadridTheme folder you downloaded.
Important! Don’t upload the whole MadridTheme.zip folder! If you get a ‘Theme is missing the style.css stylesheet’ error you have probably uploaded the wrong folder.
Click on Install Now and once it is installed, click the Activate button.
2. Quick Setup Wizard
Once you have sucessfully activated the theme, our Quick Setup Wizard will walk you through the basic setup of your new theme. It takes only five clicks to get you started.
Install Child Theme
If you ever want to make changes to your theme you should always use a child theme. It’s really helpful, because changes won’t get overwritten by updates and you can safely customize your theme.
Madrid requires a few plugins to be installed so the theme works without problems. There are also some plugins that we recommend to use all functions Madrid offers (but they are optional).
Required Plugins: MPS Plugin, …
Recommended Plugins: ContactForm 7, WP Instagram,…
For an advanced setup, click ‘Advanced’ to see all plugins and select the ones you would like to install.
Madrid comes with demo content that helps you get started with an optimal setup.
Important! Only use the demo content importer on a NEW WordPress installation. Running it on a blog that already has some content may cause issues with your existing posts and widgets. In this case, skip the import step.
If you want to start a fresh new blog, you can use the demo content (images, posts, categories etc.) to get familiar with the theme and its functionality. Click on ‘Advanced’ to select which content should be imported.
That’s it! Your new WordPress Theme is now ready for customizing and adding your personal info.
3. Setup Navigation + Header
Set up the Menu
Navigate to Appearance > Menus.
Click the „Create a New Menu“ button and choose a menu name. Madrid offers you three menu’s – one on the top right, one on the top left and one at the bottom of footer.
On the left side you can choose between adding Pages, Posts, Custom Links or Categories to the menu. The box here shows how to add the different links.
Pages/Posts: Use this item to add previously created pages and posts to the menu. This is the way to add e.g. an About page to the navigation.
Custom Links: Use this option to add a link to your homepage or a custom third-party site. Enter your homepage’s URL into the box and give it a title, such as „Home“.
Categories: Use this option to add a category page to the menu that displays all posts from one category. Read here how to create categories and assign them to your posts.
Sub Menu: If you want to create a dropdown menu, drag the items you want in the submenu below the other menu items. To create an empty parent element, select „Custom Links“ and put a „#“ into the URL box.
Once you menu is ready, check either the „Header Left“ or “Header Right” box at the bottom of the page to display the menu.
Repeat the above steps to add a menu to the other header location and bottom location as well.
Set up the Social Media Icons:
The theme comes prepackaged with ten of the most relevant social media icons.
Navigate to Appearance > Customize > Madrid Theme Options.
In the left menu select „Social Media Icons“.
Add your relevant social media URLs in the input boxes. If you leave a box blank, the particular icon will not appear.
Add a custom logo/image as header
Navigate to Appearance > Customize.
Select Header Image on the left and click the „Add new“ button to upload a new header image.
Navigate back to Madrid Theme Options and click on Footer Layout.
Here you can upload your Footer Logo as well as style the Footer Section of your Theme. You can decide Footer Background Colour, Footer Font Colour and you can give your Footer a Copyright Description.
4. Homepage Layout
With our Madrid Theme you have a lot of styling options for the homepage. You can add widgets, featured page boxes and choose between different post options.
Fullwidth Sticky Post/Featured Slider
On top of the homepage, you can choose between adding a static sticky post or a dynamic slideshow with featured posts.
Navigate to Appearance > Customizer > Madrid Theme Options > Homepage Layout and choose one of the two options below Featured Section.
Fullwidth Sticky Post: Navigate to Posts, hover over the post you would like to make sticky and click Quick Edit. On the right, there is a checkbox with “Make this post sticky“. The featured section will always display the latest sticky post if there is more than one.
Featured Post Slider: If you want to have a featured post slideshow on top, you have to assign the category featured to at least 3 posts. The sldieshow will always show the latest posts with the category ‘featured’.
Featured Box Section! You can display your 3 favourite Categories (or whatever you come with up) under the Slider / Featured Post. Just upload your preferred image for the box and give it a title as well as a valid URL link.
Homepage Post Layout
Full Width, Left or Right?
Madrid Theme gives you the option to style the Homepage Post Layout individually. You can choose between full width, left thumbnail or right thumbnail alignment. You find this feature at the top right corner of your Post Editor. We recommend that you always set a featured image to your posts. The featured image functions as the preview thumbnail pic for your homepage.
Homepage Widget Areas
The Theme comes equipped with four widget areas, where you can add any widget you like. You can use the default WordPress widgets or the widgets that come with our MPS Plugin, like a custom youtube widget. Madrid Demo Version displays for example a Shopping Widget, the Youtube Widget, Instagram Widget and a Mail Chimp Subscribe Widget.
Navigate to Appearance > Widgets and drag the YOUTUBE widget into your desired widget area. In the demo version it is placed in the After Content Widget Area.
Fill out the required Forms and click on save. Hurray! You made it.
For Madrid we use the Sign Up Form from Mail Chimp. Make sure you have the recommended Mail Chimp Easy Forms Plugin activated and ready for use.
Navigate to Appearance > Widgets and drag the Easy MailChimp Forms widget into your desired widget area. In the demo version it is placed in the After Content Widget Area. Fill out the required fields and give your Subscribe Widget a title. Don’t forget to click on save!
Navigate to Appearance > Widgets and drag a Custom HTML widget into the widget area Shopping Section between Posts. There you paste your Shopping Widget code into the content field. Give your Shopping Widget a title and click on save.
To emphasize one part of the title and display it in the handwritten font, wrap it in [span] shortcodes, like in the picture below.
To display your latest Instagram pictures, make sure you have the WP Instagram Widget installed and activated.
Navigate to Appearance > Widgets and drag the Instagram widget into your desired widget area. In the demo version it is placed in the Before Footer Widget Area.
Now you only have to add your username and how many posts you would like to display (recommended for two rows: 12).