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.

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)

Go to Appearance → Themes → Add New
Click Upload Theme (on the top)
In the uploader screen choose sanfrancisco.zip from your computer.
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.

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.

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:

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

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:

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

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

Go to Theme Options → Footer
See Display Footer Menu section

Menu Typography

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

Go to Theme Options → Typography → Main Menu
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

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

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)

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

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.

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

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.

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:

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 “Audio Post Options”.
Select placement type as "Audio Placement Type" selectbox.
If you select External, Paste your audio embed code into the textbox named "Audio Embed Code".
If you select Self-Hosted, choise your audio source via "Upload" button or Paste your audio source URL into the textbox named "Audio URL".
Update/Publish the post.

Video Post

In order to make video post:

In the post edit or new post screen, find the meta box named “Format” and select “Video”.
A new meta box will appear above text editor with the name of “Video Post Options”.
Select placement type as "Video Placement Type" selectbox.
If you select External, Paste your video embed code into the textbox named "Video Embed Code".
If you select Self-Hosted, choise your video source via "Upload" button or Paste your video source URL into the textbox named "Video URL".
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 “Gallery Post Options”.
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

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:

If you didn’t install this plugin before:

Go to Appearance → Install Plugins
Hover over “Contact Form 7, click “Install Now” and after "Activate"
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

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

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.

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 → Sidebars
In the first section (Default Sidebar) you can select your default sidebar globally.
In the second section (Sidebars) click “Add New Sidebar” 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

To assign custom sidebar to a tag

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

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

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

Flex ADS details here.

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

To change global site background:

Go to Appearance → Customize
On the left menu click
Background Image to set an image to the background or
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:

Add/Edit a post, page, tag or category
In the Post Options meta box, select "Custom Background" in “Background” selectbox
Manage background of this post/page/tag or category
Publish/Update post/page/tag or category.

Sanfrancisco. 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 (sanfrancisco/languages/)
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
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 sanfrancisco/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’);

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.

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.