Barcelona. Theme Documentation

Wordpress News & Magazine Theme

created: 10/14/2015
latest update: 10/14/2015
by: Aggressive Motions
email: contact@aggressivemotions.com

Welcome to the Barcelona Wordpress Theme by Aggressive Motions. Thank you for choosing us. In this documentation, you’ll find almost everything related to this theme. If you find something that we missed to explain or have any questions, please contact us on contact@aggressivemotions.com or create a ticket on Aggressive Motions Support.

Extract the contents of the zipped package downloaded trom Themeforest.net to your computer. In the contents of the package, you’ll find these files below:

Documentation Folder (Contains this document)
Demo Content Folder (Contains demo xml file: barcelona-demo.xml)
barcelona.zip (Main theme)
barcelona-child.zip (Child theme)

There are two possible ways to install the theme:

Install via Wordpress (Recommended)

Go to Appearance → Themes → Add New
Click Upload Theme (on the top)
In the uploader screen choose barcelona.zip from your computer.
Click Activate after upload process.

Install via FTP

Extract the barcelona.zip file
Upload the extracted barcelona folder to /wp-content/themes/ folder on your server using with any FTP software.

If you are not familiar with FTP or looking for any FTP software, FileZilla is easy to use.

In order to extend theme functionality, Barcelona. theme comes with several plugins.

You can install and activate the plugins in Appearance → Install Plugins

Barcelona. Shortcodes: This plugin adds shortcode functionality for the theme
Contact Form 7: This plugin can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup.
Entry Views: This plugin keeps track of the number of views a post has.
Envato Wordpress Toolkit: This toolkit plugin establishes an Envato Marketplace API connection and recommended for update theme automatically.
Force Regenerate Thumbnails: If you install Barcelona. theme on a website that already has images uploaded, this plugin allows you to delete all old images size and regenerate the thumbnails for image attachments as Barcelona. theme supports.

If you install Barcelona. theme on a website that already has images uploaded, this plugin allows you to delete all old images size and regenerate the thumbnails for image attachments as Barcelona. theme supports.

If you didn’t install Force Regenerate Thumbnails plugin, check "Recommended Plugins" section.

To regenerate images, follow this steps:

Go to Tools → Force Regenerate Thumbnails
Click on Regenerate All Thumbnails and wait until it is finished.

Auto Update

Barcelona. theme recommends some plugins after installation. One of them is “Envato Wordpress Toolkit” which automatically alert you on your dashboard when a new version of the theme is available.

If you didn’t install the plugin yet, follow these steps:

Go to Appearance → Install Plugins
Hover over “Envato Wordpress Toolkit” and click “Install Plugin”
After you install the plugin you’ll see “Envato Toolkit” button on the left menu.

To establish an Envato Marketplace API connection navigate to the “Envato Toolkit” page and insert your Marketplace username and secret API key in the designated input fields. To obtain your API Key, visit your “My Settings” page on any of the Envato Marketplaces.

The best tutorial about this plugin can be found at: http://wpmu.org/envato-wordpress-toolkit-a-themeforest-auto-updater/

Update Manually

Download the latest version of the theme on Themeforest.net and extract it
Deactivate current version of Barcelona. theme (Simply activate another theme)
Delete the old version of the theme, and upload latest version. (If you are using child theme, keep it as is, delete parent theme only)

It’s always recommended to create a backup of your site before update. If you encounter an issue during update, do not panic. Try to update manually again.

The package you downloaded from Themeforest.net includes a file named barcelona-demo.xml. This file contains demo content except licensed images which are replaced by placeholders.

To import sample data, follow these steps:

Go to Tools → Import
In the import page screen click on Wordpress in the list.
If this plugin didn’t installed yet
- On the popup window click Install Now
- After installed successfully, click Activate Plugin & Run Importer
Select barcelona-demo.xml file and run the import process

After successfully import, go to Appearance → Menus and assign “Main Nav” menu to the “Main Navigation Menu” theme location. (More info about menus)

Barcelona. theme has 3 different theme locations to assign your menus:

Top Bar Menu
Main Navigation Menu
Footer Menu

To setup the menus, navigate to Appearance → Menus

Once you create the menu, add pages or custom links to it and assign the menu to any theme location as shown below.

Also you can show/hide Top Bar Menu and Footer Menu from the Theme Options.

For Top Bar Menu

Go to Layout Settings → Header
See Display Top Bar Menu section

For Footer Menu

Go to Layout Settings → Footer
See Display Menu on Footer section

For more information about Wordpress Menus, here is good guide for you:

http://codex.wordpress.org/WordPress_Menu_User_Guide

Mega Menu

In order to enable mega menu, simply check Show Mega Menu checkbox in the category menu item. This option can only appear in category menu item at level 1.

Also you can change the order of posts in mega menu from Theme Options → Layout Settings → Mega Menu

Barcelona. theme has plenty of options to customize the appearance of the theme. Navigate to Apparance → Theme Options to make changes.

Logos & Icons

In this section you can either add an image or input text as logo for header and footer. Also you can add your icons for different apple devices and set a favicon for your website.

Layout Settings

General (General layout options.)
Header (Style of header, show/hide top bar menu and social icons)
Footer (Show/hide footer sidebars and footer menu)
Single Post (This is global single post layout options)
Page (This is global page layout options)
Category (Here you can change global category page layout)
Author (Here you can change author archive layout)
Search (Here you can change search results page layout)
Tag (Here you can change tag archive layout)
Posts Page (Here you can change “Latest Posts” page layout)
Archives (Here you can change all other archive pages layout. Date archive, custom post type archive etc.)

Sidebar Settings

In this section you can choose global default sidebar and create custom sidebar to use certain post, page or category.

Social Settings

In this section you can add your social media links and api credentials of facebook and twitter to use in certain parts of the theme.

Typography

In this section you can select one of Google font for body or headings.

Custom Codes

In this section you can add your custom css code and custom codes for header and footer (like Google Analytics, Yandex Metrica, Conversion Tracking code etc.)

Color Scheme

In this section you can choose either dark or light version of main nav menu, mega menu and footer. Also you can change the color of selection of your website.

In this section you can add your ad code to header for different screen sizes.

Barcelona. theme has a lot of options to change the style of various archive pages. Here is the list of the pages that you can customize.

Category Page (Go to Theme Options → Layout Settings → Category)
Author Archive (Go to Theme Options → Layout Settings → Author)
Tag Archive (Go to Theme Options → Layout Settings → Tag)
Search Results (Go to Theme Options → Layout Settings → Search)
Latest Posts Page (Go to Theme Options → Layout Settings → Posts Page)
All other archives (Go to Theme Options → Layout Settings → Archives)

In every single layout settings page mentioned above has these options:

Posts Layout

In this section you can change the way posts are displayed on the page.

Default Sidebar

Here you can change default sidebar of the page.

Sidebar Position

Here you can set the position of sidebar either left or right, or make it invisible.

Display Breadcrumb

Whether to display breadcrumb on the page or not.

Header Ad

Here you can add your ad code to the header for different screen sizes spesifically for the page or inherit from global settings. (Theme Options → Advertisement)

Background

Here you can set background for the page or inherit from global settings. (Appearance → Background)

With Barcelona. theme you can easily create your own page with using several different module layouts. To do this:

Go to Pages → Add New (or edit any existing page)
In the Page Attributes meta box on the right, select “Page Builder” as Template.
You’ll see Page Builder meta box right under text editor.

Page Builder meta box has two sections:

1. Featured Posts

Here you can add featured posts at the top of the page.

2. Modules

Here you can create modules to compose a page. To do this, click Add New to create a module and configure settings for that module. You can re-order modules that you add with drag & drop.

Here is a short video demonstrating the use of Page Builder.

Barcelona. theme allows you to manage your categories more customizable than default wordpress category functionality.

You can add featured posts, select post layout, put a custom background and header ad, set sidebar position and so on. Check category add/edit screen to manage these options.

Barcelona. theme gives you plenty of options to customize your posts. You can manage your default post options by navigating Theme Options → Layout Settings → Single Post

Also you can customize any post spesifically from the meta box named Post Options right under text editor in post edit or new post screen.

Audio Post

In order to make audio post:

In the post edit or new post screen, find the meta box named “Format” and select “Audio”.
A new meta box will appear above text editor with the name of “Post Format Options: Audio”.
Paste your audio embed code into the textbox.
Update/Publish the post.

Video Post

In order to make video post:

In the post edit or new post screen, find meta the box named “Format” and select “Video”.
A new meta box will appear above text editor with the name of “Post Format Options: Video”.
Paste your video embed code into the textbox.
Update/Publish the post.

Gallery Post

In order to make gallery post:

In the post edit or new post screen, find meta the box named “Format” and select “Gallery”.
A new meta box will appear above text editor with the name of “Post Format Options: Gallery”.
Click Create Gallery or Edit Gallery to compose a gallery.
Update/Publish the post.

Paginated Post

You can split a post/page up into different web pages so that is has pagination. All you have to do is type:

into the text editor where you would like your page breaks to appear. You must be in “Text” view when you make changes.

Using Gallery Inside Post

To put a gallery inside your post:

In the post edit or new post screen, click “Add Media” button above text editor.
In the popup window click “Create Gallery” on the left.
Select images to compose a gallery and click “Create a new gallery”.
In the gallery edit screen manage gallery options and click “Insert Gallery”.

For more information about wordpress posts, check the link below.

https://codex.wordpress.org/Posts

Barcelona. theme gives you plenty of options to customize your pages. You can manage default page options by navigating Theme Options → Layout Settings → Page

Also you can customize any page spesifically from the meta box named Page Options right under text editor in page edit or new page screen.

Contact Page

You can create a contact page with using “Contact Form 7” plugin. To do this:

If you didn’t install this plugin before:
1. Go to Appearance → Install Plugins
2. Hover over “Contact Form 7” and click “Install Plugin”
Go to Contact on the left menu
There will be a default contact form created, simply copy shortcode of it.
Add/Create a new page and paste the shortcode into the text editor.
Publish/Update Page

Barcelona. theme comes with predefied styles for Contact Form 7.

Authors Page Template

In order to make author page

In the page edit or new page screen select “Authors” in Template meta box
Update/Publish Page

For more information about wordpress pages, check the link below.

https://codex.wordpress.org/Pages

Sidebar is a vertical column contain widgets that you can customize. Barcelona. theme gives you ability to create unlimited number of sidebars. You have 4 predefined sidebars by default.

Default Sidebar (Default Sidebar for all pages)
Footer Sidebar 1 (Footer first column sideabar)
Footer Sidebar 2 (Footer second column sidebar)
Footer Sideabar 3 (Footer third column sidebar)

To manage sidebars, navigate to Appearance → Widgets

You can create custom sidebar to use in pages, posts, categories, tag pages and more. To do this:

Go to Theme Options → Sidebar Settings
In the first section (Default Sidebar) you can select your default sidebar globally.
In the second section (Sidebars) click “Add New” to create custom sidebar.
Save Options

To assign custom sidebar to a page or post:

Add/Edit post or page
In the Post/Page Options meta box choose “Sidebar”
Select sidebar for this page/post
Update/Publish page or post

To assign custom sidebar to a category

Add/Edit a category
Select sidebar for this category
Add/Save category

You can also assign any custom sidebar as default for posts, pages or categories globally in

Theme Options → Layout Settings → Single Post | Page | Category

For more information about wordpress sidebars, check the link below.

https://codex.wordpress.org/Sidebars

WordPress Widgets add content and features to your Sidebars. They can be added, removed, and rearranged on the Theme Customizer (Appearance → Customize) or Appearance → Widgets in the WordPress Administration Screens. Barcelona. theme comes with 8 widgets.

Barcelona. Posts

This widget shows the posts with a lot of options that you can customize.

Barcelona. Slider Posts

This widget is similiar as Barcelona. Posts widget. But displays in the style of slider.

Barcelona. Facebook Box

This widget shows Facebook’s page plugin with its options that you can customize. Add this widget to get more likes to your Facebook page.

Barcelona. Google Plus Box

This widget shows Google+ Badge in your site with its options that you can customize. Add this widget to promote your Google+ page.

Barcelona. Instagram Feed

This widget shows latest instagram images from your instagram profile.

Barcelona. Social Media Icons

This widget allows you to add social media icons of popular social networks to your website.

Barcelona. About Me

This widget allows you to add your image and a short description about you.

For more information about wordpress widgets, check the link below.

https://codex.wordpress.org/WordPress_Widgets

Barcelona. theme comes with 3 different shortcodes. Barcelona. Shortcode plugin have to be activated in order to make shortcodes work.

Accordion Menu

Adds accordion menu. Use agg_accordion tag to wrap agg_accordion_item tags.

Example of use:

[agg_accordion multiselectable="false"]

[agg_accordion_item title="Title 1"]

Item Content 1

[/agg_accordion_item]

[agg_accordion_item title="Title 1"]

Item Content 2

[/agg_accordion_item]

[agg_accordion_item title="Title 1"]

Item Content 3

[/agg_accordion_item]

[/agg_accordion]

Custom Image Ad

You can add your custom image ads with this shortcode.

Example of use:

[agg_ad url="AD_URL" image="AD_IMAGE" width="728" height="90" target="_blank"]

Tabs

Adds a box that has clickable tabs with title and content.

Example of use:

[agg_tabs theme=”dark|light”]

[agg_tab title=”Section A”]

Content A

[/agg_tab]

[agg_tab title=”Section B”]

Content B

[/agg_tab]

[agg_tab title=”Section C”]

Content C

[/agg_tab]

[/agg_tabs]

Columns

Adds shortcodes to create columns in your posts or pages.

Example of use:

[agg_row]

[agg_col size=”1/3”]

Column Content 1

[/agg_col]

[agg_col size=”1/3”]

Column Content 2

[/agg_col]

[agg_col size=”1/3”]

Column Content 3

[/agg_col]

[/agg_row]

Here is all available column sizes:

Icons

Adds icons to add your icons in your posts, pages or nav menu.

Example of use:

[agg_icon icon="bars"]

You can find the list of icons here:

http://fontawesome.io/icons/

For more information about wordpress shortcodes, check the link below.

https://codex.wordpress.org/Shortcode

Barcelona. theme allows you to add your custom ad code in many ways. (e.g. Google Adsense, custom image ad, shortcode of ad etc.) Let’s focus on them section by section.

Header Ad

You can add your custom ad to the header section.

Go to Theme Options → Advertisement and add your ad code for large and small screens. (Also you can put the shortcode of ad here.)

Besides, you can display different header ad for any post spesifically. To do this:

Add/Edit a post
In the Post Options meta box, click “Advertisement”
Select “Custom” from selectbox in “Header Ad” section
Put your ad code into the textfields that has been appeared below.
Publish/Update post

Also you can do it in the same way for any category spesifically. To do this:

Create/Edit a category
Select “Custom” from radio boxes in “Header Ad” section
Put your ad code into the textfields that has been appeared below.
Add/Update category

Similarly, you can put your custom header ad code spesifically for categories, author archive pages, search result pages, tag pages, post archives or globally for single posts from Theme Options → Layout Settings

Post Content Ad

You can put your custom ad right under your posts. You can do it in two different ways.

1. Add default ad globally for posts

This allows you to display same ad for every post by default
Go to Theme Options → Layout Settings → Single Post
Set “On” to the “Display Post Content Ad”
Put your custom ad code into the textfields.
Save Theme Options

2. Add spesifically for any post

Add/Edit a post
In the Post Options meta box, click “Advertisement”
Select “Custom” from selectbox in “Post Content Ad” section
Put your ad code into the textfields that has been appeared below.
Publish/Update post

Besides, you can add your custom ad code inside text editor.

Using “Custom Html” Module of Page Builder to put your ad

When you compose a page with using page builder, you can use “Custom Html” module to add your custom html or shortcodes.

Simply put your ad code or shortcode of your ad into the textbox as shown below.

You can change your site background with Barcelona. theme more customizable than default wordpress background functionality.

To change global site background:

Go to Appearance → Customize
On the left menu click
1. Background Image to set an image to the background or
2. Colors to set a background color to your site.

You can set different background for any post or page spesifically. To do this:

Add/Edit a post
In the Post Options meta box, click “Background”
Manage background of this post
Publish/Update post

Also you can set a custom background for any category spesifically. To do this:

Create/Edit a category
Select “Custom” from radio boxes in “Background” section
Manage background of this category
Add/Update category

Similarly, you can set your custom background spesifically for categories, author archive pages, search result pages, tag pages, post archives or globally for single posts from Theme Options → Layout Settings

Disqus is a networked community platform used by hundreds of thousands of sites all over the web. With Disqus, your website gains a feature-rich comment system complete with social network integration, advanced administration and moderation options, and other extensive community functions.

You can add disqus comment system to your website easily. First, you need to create a site from disqus. Follow the instructions below:

Click https://publishers.disqus.com/engage (If you didn't create a disqus account, signup before)
Click Install on Your Site on the top right.
Add your site name and disqus url. Then click "Finish Registration".
Go to Theme Options → Layout Settings → General and add your disqus url here.

Barcelona. theme allows you to translate the theme into any language. To translate the theme:

Download and install POEdit translation editor (https://poedit.net/)
Go to the theme translation folder (barcelona/languages/)
Make a copy of the file “barcelona.po” and rename the file to the locale of your language. For example, German would be de_DE.po. See language code list here. http://codex.wordpress.org/WordPress_in_Your_Language
Open POEdit and load the file. (i.e de_DE.po)
Translate all the strings in the list and save changes. After you save, you will have two files. (i.e. de_DE.po and de_DE.mo)
Upload these files to barcelona/languages/
For WordPress 4.0 and above, go to Settings → General and select Site Language
For WordPress 3.9.2 and below, open your wp_config.php file in the root, and find this line: define(‘WPLANG’, ‘’); Change it into your language code. For example, define(‘WPLANG’, ‘de_DE’);

Barcelona. theme has full support of RTL (Right to Left) version of your site. If your language is RTL, the theme automatically detects it and loads RTL css file.

How can i change or display author/user avatar?

To change user avatar (seen on author box, author archive page or author page template etc. ) you have two options:

Wordpress fetches user avatar automatically from your Gravatar.com by default. Create a free account on gravatar.com and make sure the email of the user is the one used to create the Gravatar account.
You can install some plugin which will allow you to change the user avatar instead of registering gravatar. For example, check this plugin called Simple Local Avatars