# San Francisco Theme Documentation

## Clean Blog & Magazine WordPress Theme

Live Preview Video Documentation Support Portal

- created: 08/24/2016
- latest update: 08/26/2016
- by: Aggressive Motions
- email: contact@aggressivemotions.com

Welcome to the San Francisco 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.

### Installation

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: sanfrancisco-demo.xml)
- sanfrancisco.zip (Main theme)
- sanfrancisco-child.zip (Child theme)

There are two possible ways to install the theme:

##### Install via Wordpress (Recommended)

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

##### Install via FTP

Extract the sanfrancisco.zip file
Upload the extracted sanfrancisco 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.

### Recommended Plugins

In order to extend theme functionality, Sanfrancisco. theme comes with several plugins.
You can install and activate the plugins in Appearance → Install Plugins

- Flex ADS: This plugin adds more ads options with ads add wizard (simple and easy) functionality for the theme
- Smart GIF: This plugin adds fully GIF 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 Sanfrancisco. 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 Sanfrancisco. theme supports.
- Mashshare Social Networks Add-On: This Mashshare Add-On brings you 23 additional social networks and services.
- Mashshare Share Buttons: Mashshare is a Share functionality inspired by the the great website Mashable for Facebook and Twitter. More networks available.

### Regenerete Images

If you install Sanfrancisco. 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 Sanfrancisco. theme supports.
If you didn’t install Force Regenerate Thumbnails plugin, check "Recommended Plugins" section.
To regenerate images, follow this steps:

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

### Update Theme

##### Auto Update (Recommended)

Sanfrancisco. 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:

1. Go to Appearance → Install Plugins
2. Hover over “Envato Wordpress Toolkit” and click “Install Plugin”
3. 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

1. Download the latest version of the theme on Themeforest.net and extract it
2. Deactivate current version of Sanfrancisco. theme (Simply activate another theme)
3. 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.

### Demo Content

The package you downloaded from Themeforest.net includes a file named sanfrancisco-demo.xml. This file contains demo content except licensed images which are replaced by placeholders.
To import sample data, follow these steps:

1. Go to Tools → Import
2. In the import page screen click on Wordpress in the list.
3. If this plugin didn’t installed yet
   - On the popup window click Install Now
   - After installed successfully, click Activate Plugin & Run Importer
4. Select sanfrancisco-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)

### Menu Setup / Mega Menu

Sanfrancisco. theme has 2 different theme locations to assign your menus:

- 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 Footer Menu from the Theme Options.

##### For Footer Menu

1. Go to Theme Options → Footer
2. See Display Footer Menu section

##### Menu Typography

Sanfrancisco. theme has too many options of Main Menu typography. You can change all typography options.

1. Go to Theme Options → Typography → Main Menu
2. See all options for Main Menu customization.

For more information about Wordpress Menus, here is good guide for you:
http://codex.wordpress.org/WordPress_Menu_User_Guide

### Theme Options

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

- General (General theme options.)
- Header (Style of header, logo options and trending menu settings)
- Footer (Style of footer, show/hide footer sidebars and footer menu, copyright line settings)
- Sidebars (Default sidebar position and sticky options)
- Blog (This is global Single Post, Page, Category, Author, Search Results, Tag and Archives sections all layout options)
- Typography (Here you can change all global font features. Like size, family, transform, weight/style etc.)
- Skin (Here you can change background, link colors, logo color, heading colors and too many color and style options)
- Custom Codes (Here you can add/edit Custom CSS, Header Custom Code or Footer Custom Code. Like Google Analytics, Yandex Metrica or Other Counter services codes.)

### Post Layouts / Archive Settings

Sanfrancisco. 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.

- Single Post (Go to Theme Options → Blog → Single Post)
- Pages (Go to Theme Options → Blog → Page)
- Category Page (Go to Theme Options → Blog → Category)
- Author Archive (Go to Theme Options → Blog → Author)
- Tag Archive (Go to Theme Options → Blog → Tag)
- Search Results (Go to Theme Options → Blog → Search Results)
- Latest Posts Page (Go to Theme Options → Blog → Posts Page)
- All other archives (Go to Theme Options → Blog → 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.

##### Meta Data

In this section you can change meta data options.

- Excerpt
- Date
- Author Name
- Views
- Likes
- Comments
- Category Name
- Trending Icon

##### 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.

##### Display Title

Here you can change title visibility.

##### Display Subtitle

Here you can change sub-title visibility.

##### Display Tags

Here you can change tags block visibility.

##### Background

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

### Page Builder / Home Page

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

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

Here you can create sections or modules to compose a page. To do this, click Add New Page Section to create a section. After, you can click Add New Module button 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.

### Categories Setup

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

1. Go to Theme Options → Blog → Category

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

### Post Setup

Sanfrancisco. 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:

1. In the post edit or new post screen, find the meta box named “Format” and select “Audio”.
2. A new meta box will appear above text editor with the name of “Audio Post Options”.
3. Select placement type as "Audio Placement Type" selectbox.
4. If you select External, Paste your audio embed code into the textbox named "Audio Embed Code".
5. If you select Self-Hosted, choise your audio source via "Upload" button or Paste your audio source URL into the textbox named "Audio URL".
6. Update/Publish the post.

##### Video Post

In order to make video post:

1. In the post edit or new post screen, find the meta box named “Format” and select “Video”.
2. A new meta box will appear above text editor with the name of “Video Post Options”.
3. Select placement type as "Video Placement Type" selectbox.
4. If you select External, Paste your video embed code into the textbox named "Video Embed Code".
5. If you select Self-Hosted, choise your video source via "Upload" button or Paste your video source URL into the textbox named "Video URL".
6. Update/Publish the post.

##### Gallery Post

In order to make gallery post:

1. In the post edit or new post screen, find meta the box named “Format” and select “Gallery”.
2. A new meta box will appear above text editor with the name of “Gallery Post Options”.
3. Click Create Gallery or Edit Gallery to compose a gallery.
4. 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:
<!--nextpage-->
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:

1. In the post edit or new post screen, click “Add Media” button above text editor.
2. In the popup window click “Create Gallery” on the left.
3. Select images to compose a gallery and click “Create a new gallery”.
4. 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

### Page Setup

Sanfrancisco. theme gives you plenty of options to customize your pages. You can manage default page options by navigating Theme Options → Blog → 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:

1. If you didn’t install this plugin before:

1. Go to Appearance → Install Plugins
2. Hover over “Contact Form 7, click “Install Now” and after "Activate"
3. Go to Contact on the left menu
4. There will be a default contact form created, simply copy shortcode of it.
5. Add/Create a new page and paste the shortcode into the text editor.
6. Publish/Update Page

Sanfrancisco. theme comes with predefined styles for Contact Form 7.
For more information about wordpress pages, check the link below.
https://codex.wordpress.org/Pages

### Sidebars

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

1. Default Sidebar (Default Sidebar for all pages)
2. Footer Sidebar 1 (Footer first column sideabar)
3. Footer Sidebar 2 (Footer second column sidebar)
4. 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:

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

To assign custom sidebar to a page or post:

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

To assign custom sidebar to a category

1. Add/Edit a category
2. Select sidebar for this category
3. Add/Save category

To assign custom sidebar to a tag

1. Add/Edit a tag
2. Select sidebar for this tag
3. Add/Save tag

You can also assign any custom sidebar as default for posts, pages, search results, tags or categories globally in
Theme Options → Blog → Single Post | Page | Category | Author | Search Results | Tag | Posts Page | Archives
For more information about wordpress sidebars, check the link below.
https://codex.wordpress.org/Sidebars

### Widgets

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. Sanfrancisco. theme comes with 7 widgets.

##### Sanfrancisco - Posts

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

##### Sanfrancisco - 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.

##### Sanfrancisco - Google+ Box

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

##### Sanfrancisco- Instagram Feed

This widget shows latest instagram images from your instagram profile.

##### Sanfrancisco - Social Media Icons

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

##### Sanfrancisco - About Me

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

##### Mashshare - Most Shared Posts

This widget shows most shared posts of social network sharing.
For more information about wordpress widgets, check the link below.
https://codex.wordpress.org/WordPress_Widgets

### Advertisements

Flex ADS details here.

### Custom Background

You can change your site background with Sanfrancisco. theme more customizable than default wordpress background functionality.
To change global site background:

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

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

1. Add/Edit a post, page, tag or category
2. In the Post Options meta box, select "Custom Background" in “Background” selectbox
3. Manage background of this post/page/tag or category
4. Publish/Update post/page/tag or 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 → Blog → Single Post | Page | Category | Author | Search Results | Tag | Posts Page | Archives

### Translation / RTL

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

1. Download and install POEdit translation editor (https://poedit.net/)
2. Go to the theme translation folder (sanfrancisco/languages/)
3. Make a copy of the file “sanfrancisco.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
4. Open POEdit and load the file. (i.e de_DE.po)
5. 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)
6. Upload these files to sanfrancisco/languages/
7. For WordPress 4.0 and above, go to Settings → General and select Site Language
8. 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’);

Sanfrancisco. 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.

### FAQ

##### 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.

##### How can i add Google Analytics Code to my site?

Simply go to Appearance → Theme Options → Custom Codes and paste your code into the “Header Custom Code” textfield.

##### I composed a page with using Page Builder. How can i set this page as default home page?

1. Go to Appearance → Customize
2. Click Static Front Page
3. Select your page in the Front Page

### Support

If you have any issues about installation or find any bugs related with Sanfrancisco. theme, you can open a ticket from the link below.
http://support.aggressivemotions.com
Please provide your envato purchase code, purchased theme name (Sanfrancisco for this theme) and your envato username in your ticket.

### Credits

##### Front-End

Bootstrap - http://getbootstrap.com
Theia Sticky Sidebar - https://github.com/WeCodePixels/theia-sticky-sidebar
jQuery lockfixed - http://www.directlyrics.com/code/lockfixed
Backstretch - http://srobbin.com/jquery-plugins/backstretch
FitVids - http://fitvidsjs.com
Boxer - http://classic.formstone.it/boxer
cookie.js - https://github.com/florian/cookie.js
retina.js - https://github.com/imulus/retinajs
Picturefill - https://github.com/scottjehl/picturefill
OwlCarousel2 - https://github.com/smashingboxes/OwlCarousel2
Font Awesome - http://fontawesome.io
Javascript-Equal-Height-Responsive-Rows - https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows

#####

##### Back-End

TGM Plugin Activation - http://tgmpluginactivation.com
Hybrid Media Grabber - http://themehybrid.com/hybrid-core
Mobile Detect - https://github.com/serbanghita/Mobile-Detect
All images used on live preview purchased from shutterstock and these are not included in the theme package.
If you want to report any license issue, please contact us on contact@aggressivemotions.com