Offline Documentation

After your Purchase:

After your purchase, unzip the file you will download and upload the file madrid.zip through your wordpress admin panel.

To upload the Theme

• Go to Appearance -> Themes
• Choose Install Themes tab
• Choose Upload mini-tab
• Choose the file and upload it, then click activate.

Or you can see the WordPress installation details here.

After Theme Installation, you can find The standard Skin and Header is Applied, Your homepage should be featuring Latest Posts with Slider for the latest posts.

It’s very basic for you to go and create your skins and headers the way you like according to the documentation.

In this Tutorial, I will Guide to on how to install your website like our demo, this will help you to make your first steps on the right foot.

Unzip Your Download PackageUnzip Your Download Package

Unzip Your Download Package from Themeforest and You will the following:

Install the themeInstall the theme

First of all Go to Appearance -> Themes -> Install Themes -> Upload madrid.zip

After Uploading the theme Click Activate.

Import the demo dataImport the demo data

Go to Tools -> Import -> WordPress -> Add the file demo.xml and Click Upload file and Import

Assign A user to the imported posts and Check on Download and Import file Attachments

Then Wait Few Minutes till you see this screen

Import Theme OptionsImport Theme Options

In Your Download Package, Please Open Options.txt and copy it content.

Then Go to Appearance-> Import/Export Theme Options -> Import tab

Paste the content you copied and Click Import

Import Sidebar Settings Import Sidebar Settings

Go to Tools -> Widget Settings Import -> Select a file and Add widget_data.json file located in your download package

Then Click Show

Widget Settings and Check on Select All Active Widgets

Then Click Import Widget Settings 

Assign menus Assign menus

Go to Appearance -> Menus and assign the menus

That’s it you should see your website like the demo.

If you are wondering about how to create your Header, Please follow this article.

In Madrid, We designed the header to be flexible enough to cover most of header layouts out there and give you the options to tweak it to your style and look to reflect your unique implementation of Madrid.

Creating a new Header templateCreating a new Header template

• In Your Admin Panel, Go to Headers Templates-> Add New Template
• Add the Header template Name

The following options is divided in 5 sections:

• Background Section
• Logo Section
• Content Area Beside Logo
• Top Bar Section
• Below Logo Bar Section
• Floating Bar Section

1-Background Section1-Background Section

• Use custom Background: This will Enable/Disable this feature
• Header Background: In case you choose the previous to yes, upload your background.
• Background Style: Choose the light/drak to automatically adjust the colours for your header.

2-Logo Section2-Logo Section

• Use Default Logo Settings: The Default is Yes,
• If No You will Upload the Logo in the settings below

3-Content Area Beside Logo3-Content Area Beside Logo

• Content Beside Main Logo: Add the shortcode or html for what you want to appear beside the logo
• You can use[menu location="main-menu"] and [social_bar] for the main elements you might want to show

4-Top Bar Section4-Top Bar Section

•  Top Bar Enable: Enable/Disable Top Bar
• Top Bar style: Color Style Light/Colored/Dark
• Top Bar content: Add the shortcode or html for what you want to appear in the top bar
• You can use [float_left]Content[/float_left] and [float_right]Content[/float_right] to float your content right or left

5-Below Logo Bar Section5-Below Logo Bar Section

• Below Logo Bar Enable: Enable/Disable Top Bar
• Below Logo Bar style: Color Style Light/Colored/Dark
• Below Logo Bar content: Add the shortcode or html for what you want to appear in the top bar
• You can use [float_left]Content[/float_left] and [float_right]Content[/float_right] to float your content right or left

6-Floating Bar Section6-Floating Bar Section

• Floating Bar Enable: Enable/Disable Top Bar
• Floating Bar style: Color Style Light/Colored/Dark
• Floating Bar Logo: Add Logo to the floating bar, leave it blank and it will be disabled.
• Floating Bar content: Add the shortcode or html for what you want to appear in the top bar
• You can use [float_left]Content[/float_left] and [float_right]Content[/float_right] to float your content right or left

After You choose your options, click Publish/Update and Go to Skins Section to know how to use your created header.

In this Section, you will learn about Shortcodes available in your website and its generator.

AlYoum comes with 90+ Shortcodes, All fo them Available in the shortcodes Generator.

Using the Shortcodes GeneratorUsing the Shortcodes Generator

In Any Edit Page you can find our little magic button, click it and the shortcodes generator pop up will appear.

You will find the pop with dropdown menu of all the available shortcodes, choose any ro display it’s settings

Add it’s parameters and Click Generate.

In this Section, you will learn about the layout Builder in your theme.

In ANY Page Edit you will find section called: layout Builder.

• First, Turn the Dropdown to Yes to enable the Layout Builder for this Page
• Click Add New
• Choose one of the templates you created
• Click Update page.

Create a template

create a new templatecreate a new template

• Go to Appearance->Page Builder
• Add the template name and Click Create template.
• You will find the available shortcodes as blocks and categorizad by its usage “to make it easier to find your shortcode”
• Below the blocks you will find the layout blocks, first you will build your layout then add the shortcodes block to it
• Build your layout and click Save Template.

That’s it

In this Section, you will learn about Creating your Footer.

• In Theme Options -> Footer Settings.
• Click Add New Template
  

• Add the Footer Name and slug and add the content for the below bar and choose the template for the main footer area

Click Save Changes

In Skins template you will assign the Footer to skins to be assigned to pages and articles.

In this Section, you can edit Social Accounts of your website.

• Add facebook username.
• Add facebook application ID for share. More info about Facebook App Here
• Add Default facebook Image for homepage and if the page dont have featured image
• Add twitter username
• Add rss link

Add Icons to social_bar shortcodeAdd Icons to social_bar shortcode

Click Add new icons to the array and arrange them and define them if they are link/account/search/language

Click Save Changes

In Madrid you can built unlimited locations menu

There is 2 menu by default (Main menu location, Footer)

Create New Menu LocationCreate New Menu Location

To Create a new Menu location, Please follow the following instructions:

• Go to the main Admin panel
• Go to Appearance-> Menus
• Click on Theme Options
• Click on Menu Locations-> Add new 
• Add Menu Location Name and Slug
• Important … Slug must be unique and lowercase and doesn’t contain space
• Click on Add new then Save Changes

Assign Menu to this locationAssign Menu to this location

• Create New Menu and Build it as a Normal Menu
• Assign it to the new Location

Showing the menu in theme.Showing the menu in theme.

You Have 3 Options to show your Menu

• Code125 Menu Widget
• Shortcode menu
• Layout Builder element menu

Each of them have the following Options

• Menu Location: Choose the Menu Location that you will show.
• Background Color Mode: Choose the background color mode if it is light, dark or colored
• Menu Style: Choose the Menu Style “All explained below aided with screenshots”
• Responsive: Choose if the menu rendered responsive or not

Available Menu StylesAvailable Menu Styles

Adding Icon Menu IconAdding Icon Menu Icon

• Go to Appearance -> Menu and Open any Menu item 
• Add the Icon Class to the input field “Icon Class”

In this Section, you will learn about Assigning your Homepage.

• In Theme Options -> General Settings.
• You will find HomePage Option.
• Choose the Page you want to display as your Homepage.
• Click Save Changes.

Note: You will have the exact copy of the page selected in homepage.

That’s it

Building BlogBuilding Blog

To Build your Blog page, Please follow the following instructions:

• Go to the main Admin panel
• Go to Pages-> Add new page
• Click on Insert shortcode 
• Select posts
• Choose your settings (we will explain below)
• Click on Generate
• Copy the generated code ana paste it in the content area
• From General Settings choose your Layout Style as Full width in blog style 2, 4 and 5
• Click on Puplish / Update

Posts SettingsPosts Settings

• Post Type: Select the post type you need “Normal Post, Portfolio or Team”
• Category ID: Add the Category ID to show posts from a certain category, leave for all categories
• Blog style: you can see them in the Blog main menu
• Number of Posts Per page: Choose the Number of Posts Per page of your layout
• Paging Method: Select the Paging Method you need “False (No pagination), Ajax load (load more posts without reloading the page), Numerical (regular pagination method)”
• Order Direction: Select the Order Direction you need “Ascending, Descending”
• Order By: Choose the parameter you want to order based on “to order based on likes, votes, rating  choose Meta Value Based and choose the other parameter below”
• Meta Value: Select the Meta Value you need “Views Count, Likes Count, Rating Average”
• Show Author in meta settings: Show Author in meta settings or not
• Show Time in meta settings: Show Time in meta settings or not 
• Show Comments Count in meta settings: Show Comments count in meta settings or not
• Show Category in meta settings: Show Category in meta settings or not
• Show Like Count in meta settings: Show Like Count in meta settings or not
• Show View Count in meta settings: Show View Count in meta settings or not
• Show Review Starts in meta settings: Show Review Starts in meta settings or not

Madrid comes with unique feature that enables you to create UNLIMITED Post Types and deal with that as a regular blog or portfolio.

Creating New Post TypeCreating New Post Type

• In your Admin Panel Go to Madrid Theme Options -> Custom Post Types
• Click Add New
• Add the Post type Name “For Example: Recipes”
• Add the Post type slug”For Example: recipes”
• If you want you can add the Post type Name “For Example: Recipes Categories”
• If you want you can add the Post type slug”For Example: recipe_cat”
• Choose Header, Footer, Color, Layout, Backgrounds for the article page of this post type
• Click Save Settings
• Go to Settings ->  Permalinks: and choose Post Name “Preferably”  And click Save Changes  (We are just refreshing the permalinks settings to cope with the new custom post)
• That’s It, Go Create your articles

In this Section, you can edit The Sidebars for your website.

Madrid comes with 6 Ready Sidebars:

• Default Sidebar: This Shows in the Search, Author or Categories Pages

To Create a new Sidebar:

• Go to Theme Options Page, Then Sidebars tab
• Click Add New, then Enter the Title and Slug and Description.
• Click Save Changes.
• Go to Appearance -> Widgets and you will find the new Sidebar there.

To Assign Sidebar:

• Go to Page/post Edit Page.
• You will find A Box Called General Settings below the content Area.
• Choose the Layout to be Right or Left.
• Choose your customised Sidebar for this Page/Post
• Click Update

If you recently bought our theme AlYoum and found some troubles making the website work, we recommend to check the following:

• Please Make Sure that you have installed madrid.zip not the package you got from Envato, Extract it and Upload madrid.zip
• Please Make Sure that you have WordPress 3.5.1
• Please Make Sure that you Disable All the Plugins as any of them might be causing a conflict with our Page builder or content.
• Please Make Sure that you Host have allow_url_fopen is set to 1 to be able to use the social  count widget
• Please Make Sure that you Host have  mb_strlen() is enabled not to get fatal error. Or contact your hosting to activate it
• Please Make Sure that you followed Install Like Demo Exactly even if you dont want all the options, make sure that the website is like our demo and then start editing.
• Please Make Sure that you followed Our Page builder Tutorial and how to setup a page using the Page Builder.

In this Section, you will learn about Translating your website.

To translate your website, use the files located in library/languages/defauklt.po and open it using POEdit and translate the theme strings to your local language, I only supports now the Arabic translation as it is my native language, any help to translate the website will be appreciated.

After that save it and upload them to library/languages/, for example you saved it as fr_FR.po, a new file will be also created fr_FR.mo, You must upload both of them to the folder

Now open your WordPress site root and open wp-config.php and make sure that WP_LANG is like this

If your website language is supported via RTL, you should enable the rtl from the Theme Options Page.

That’s it, your website is ready for your local language.

Note: You can use PoEdit program to edit the po file.