Toggle navigation

Backstreet Documentation

Version 1.0

First of all, we’re very thankful for you for buying Backstreet theme. We hope this documentation help you to understand how this themes work.

If you find this documentation not covering your issues, please don’t hesitate to send your question to our ticket support. We also open for suggestion to make this documentation better.

And if you enjoy using this template and our support, please rate this template on ThemeForest.

Download Mag Theme

In order to download the theme, log into your ThemeForest account and go to your account profile. Then click on the download link. This is where you will find all of your ThemeForest purchases. Find Backstreet Theme, click on the download button and select the All files & documentation.

Wordpress Information

To install this theme you must have a working version of WordPress already installed. You should ALWAYS be running the latest version of WordPress anyway; otherwise you put your whole site at risk for potential threats in case using an outdated version of WordPress.

If you need help installing WordPress, follow the instructions in WordPress Codex. Below are all the useful links for WordPress information.

PHP Configuration limits

Many issues that you may run into such as; white screen, demo content fails when importing and other similar issues are all related to low PHP configuration limits. You can using WordPress PHPInfo plugin to check it. The solution is to increase the PHP limits, you can do this on your own or contact your web host and ask them to increase those limits to a minimum as follows:

  • max_execution_time 600
  • memory_limit 512M
  • post_max_size 256M
  • upload_max_filesize 256M
  • max_input_vars 2000

Files Included In The Package

Below is a full list of everything that is included when you download the main files, along with a brief description of each item.

  • backstreet.zip: main theme file that needs to be uploaded to host to install Backstreet theme.
  • backstreet-child.zip: basic child theme of Backstreet theme. It is created for people who want to customize code of the Backstreet theme.
  • Documentation: this folder contains the offline documentation.

Site Speed

There are many things can slow down your website or speed it up. As a side note, these are not ordered by importance or any criteria, We’ve just gathered everything we’ve learned around how to speed up WordPress page loads and listed them all here.

This is what we done on our demo site to improve the loading time. You could try to follow it to improve your website’s speed.

  1. Choose a good host.When starting out, a shared host might seem like a bargain if you don’t have too many visitor. We are using a hosting of DigitalOcean for our demo site.
  2. Use an effective caching plugin.WordPress plugins are obviously quite useful, but some of the best fall under the caching category, as they drastically improve page loads time, and best of all, all of them on WordPress.org are free and easy to use.We are using WP Super Cache for our demo site. Beside this plugin, W3 Total Cache is also another good choice.
  3. Combining CSS, JS and HTML.Using Autoptimize for combining CSS, JS and HTML. Even the cache plugin supports combining those files, but sometime it break JS scripts. Therefore we usually using this plugin for better combining and minifying files.
  4. Use a content delivery network (CDN).Essentially, a CDN, or content delivery network, takes all your static files you’ve got on your site (CSS, Javascript and images etc) and lets visitors download them as fast as possible by serving the files on servers as close to them as possible.
  5. Optimize images (automatically)Yahoo! has an image optimizer called Smush.it that will drastically reduce the file size of an image, while not reducing quality. However, if you are like me, doing this to every image would be beyond a pain, and incredibly time consuming. Fortunately, there is an amazing, free plugin called WP-SmushIt which will do this process to all of your images automatically, as you are uploading them. No reason not to install this one.
  6. Add Expires headers to your files.If you test your webstie speed on some tools, like GTmetrix, you will get a notice about adding expires headers. You can follow this tutorial to add it to your website.

Other resources

You could easily found many tutorials on internet that telling about how to optimize your website’s speed. There are some we found:

  1. https://www.sparringmind.com/speed-up-wordpress/
  2. http://www.wpbeginner.com/wordpress-performance-speed/
  3. https://premium.wpmudev.org/blog/speeding-up-wordpress/
  4. https://websitesetup.org/how-to-speed-up-wordpress/
  5. https://www.keycdn.com/blog/speed-up-wordpress/

Licence

When purchasing Backtreet from ThemeForest, you have two licensing options. The Regular License, and the Extended License. The billing, licensing terms and process is purely handled by Envato (the company who owns ThemeForest), and we have no control over these aspects. To learn more about what each License is for and which one to purchase, please visit this License article.

Common Questions

  1. If I need to use Backstreet on a second site, do I need a second license? Yes. One purchase of Backstret allows you to use the theme on one finished site. If you need to use it on a second site, it requires you to make a second license purchase.
  2. Can I use Backstreet on a test site, then move it to a live site when finished? Yes, you can. You can keep the theme on a test site to build it, then move it to the live site once you’re finished.
  3. Can I keep a test site and a live site with one Regular License purchase? According to the licensing rules set by Envato, this is not allowed. If it is installed in two places permanently, then it requires two licenses.

Included Plugins Licenses

There are two premium plugins are bundled with Backstreet and do not require additional licensing in order to use with Backstreet. They are Visual Composer and ACF Pro plugins. We purchased them and included them in the theme package. We are not allowed to include the license key for each of them. If there is any update, we are accountable for updating the theme with the newest version of plugins. In fact, the license key will not help you anything even updating plugins to the newest version. Only direct buyers can do this. Because we provide those with the themes; therefore, we will take care of updating them for our customers. Just take a look at the link by the author of plugins to see more.

Common Questions

  • I see messages require me to enter the license key to active Visual Composer and ACF Pro plugins

In fact, this these plugins reuqire license key to active the automatic update feature. Once you activated them in the Plugins menu, they are fully ready to use. You can ignore those messages.

  • How dow I update the premium plugins

Backstreet does include updates for our premium plugins (Visual Composer & ACF Pro). However, this does not mean that you will receive an individual license for these premium plugins. Due to Envato’s licensing rules, we can only issue updates for these plugins when we issue a theme update. This also ensures that we fully test the plugin to make sure there are no critical bugs that will conflict with our own update.

Install Theme via WordPress

  1. Navigate to WordPress Dashboard > Appearance > Themes.
  2. Click the “Add New”button on top of the page, then the “Upload Theme” button.
  3. If you’ve downloaded the installable WordPress file, then you do not need to unzip the file. If you’ve downloaded the Full Theme Package, you have to unzip the master theme file, you will see the backstreet.zip file, this is the one you select to install.
  4. Click “Choose File” and select the mag.zip file
  5. Once the file has uploaded, to activate Backstreet go to WordPress Dashboard > Appearance > Themes and click the “Activate” button.
If you get the “Are You Sure You Want To Do This” message when installing backstreet.zip file via WordPress, it means you have an upload file size limit that is set by your host. If this happens, please install the theme via FTP or contact your hosting company and ask them to increase the limit.

Install Theme via FTP

  1. Log into your server installation via FTP. You can use software such as Filezilla for this.
  2. If you have downloaded the Full Theme Package from ThemeForest, please unzip the master file and then unzip the backstreet.zip file which will give a backstreet folder.
  3. Upload the extracted mag folder to the wp-content > themes folder on the server. Make sure the folder name is “backstreet”.
  4. Log in to your WordPress Dashboard and navigate to Appearance > Themes and clicking the “Activate” button, for the Backstreet theme.

Plugins Installation

Backstreet have required and recommended plugins. Required plugins, like the Backstreet Core, Visual Composer and ACF Pro are important and must be installed and activated at all times for Backstreet to work properly. Lastly, there’s Backstreet’s recommended plugins which are plugins that we use in our demos and are fully integrated with Backstreet. You can choose not to install these plugins if you’re not going to use them.

Please read the note about included premium plugins:

  • The theme includes a license for required plugins so you don’t have to buy it.
  • You don’t have to activate the plugins license, it’s already activated.
  • You can’t update the plugins directly from it’s producer.
  • You don’t have to worry about the plugins update warning.
  • We provide updates on a regular basis, after we test the plugin for theme compatibility we include it in the latest theme update.

After activated the theme you will get notification to install the plugins. Follow this steps:

  1. Click Began Installing Plugins or Navigate to the Appearances > Install Plugins tab. There you’ll found Backstreet’s required and recommended plugins.
  2.  To install a plugin, simply click the Install button. Wait for it to finish installing, then click the Return to Required Plugins Installer link to return to the Plugins page.
  3.  Click the Activate button to activated the plugin.

You must installed and activated the required plugins. If you still get notification to install the recomended plugins, you can click button Dismiss this notice.

Troubleshooting

The Backstreet theme should be installed without any errors, but here are the most common errors and the solutions:

The package could not be installed. The theme is missing the style.css stylesheet.

One of the most common reasons people have issues is because they try uploading the full zip that includes demo content, theme, documentation…etc which displays the “The package could not be installed. The theme is missing the style.css stylesheet.” error. Please make sure you are uploading only the installable theme which is called backstreet.zip.

Are you sure you want to do this?

It means you have an upload file size limit. You need to install the theme or plugins via FTP, or contact your hosting provider to increase the limit.

White Screen Of Death or PHP Error Notice

A “white screen of death” happens when there is a PHP error on the site but WP_Debug isn’t enabled on the server. So the first thing to do would be to enable WP_Debug so you can read what the actual error is and thus fix the problem.

Our importer will give you all pages and posts, widgets, theme options, assigned pages, and more. This is recommended to do on fresh installs. It will not replace content like posts, pages, etc and it will not delete current menus or sliders. It will, however, configure and use our demo menus, add sliders and replace Theme Options, Reading Settings and Widget Settings.

Before you import any of our available demos, please make sure to check the items listed below. All of these are important and will ensure that your demo import goes smoothly.

  • Required Plugins – Install Backstreet’s required plugins, Backstreet Core, Visual Composer and ACF pro. Also make sure you’ve installed the recommended plugins like Contact Form 7.
  • PHP Configuration – Check the PHP configuration limit to ensure your server meets all requirements for a sucessful import. See the recomended PHP Configuration Limit for your site.

One Click Demo Import

If for some reason, you skipped the demo content import in the theme onboarding wizard, when you first activated the theme, then you can import the demo content with the One Click Demo Import plugin.

You can import demo content from our demo site with a single click of a button. First install and activate the One Click Demo Import plugin, then go to Appearance > Import Demo Data, select the demo you want and click on the import button.

Import Troubleshoot

Demo Content Not Complete

When you import our demo content, it can take several minutes depending on the speed of your server. When you reload the page when demo importing still on progress, the importing proccess will stopped so maybe you losing some contents. You need to reset your site and begin to import again. I give you 2 method to reset your site.

Method 1: WP Reset Plugin – This plugin is the fastest way to get rid of content. However, it will remove all content from your database and leave the default theme activated. It does not remove plugins, but will deactivate them and remove all pages, posts, menus, sliders, widget data, Theme Options, etc. Basically it removes all the content that you imported from our theme. Only do this if you are able to start over. Click Here To Download.

Method 2: Manual Removal – This method will take longer and simply involves manually removing items. For example, go to the Appearance > Menu and delete items one by one. Same thing for pages, post, sliders, etc.

This theme may be updated periodically in order to add new features and fix bugs. When a new update be avilable an update message will appears on your blog dashboard . As a customer, you can download the most current version from your ThemeForest account.

Updating Theme Automatically

Envato have developed the Envato Toolkit Plugin for WordPress. You can use this to receive notification of updates to themes purchased from ThemeForest and to automatically update (upon clicking) directly from within your WordPress admin area.

  1. Download the plugin zip file to your computer.
  2. In your WordPress admin area, go to Plugins > Add New then click Upload.
  3. Click Choose File, select the plugin zip file you downloaded and click Install Now.
  4. After installation, click Activate.
  5. Click the new Envato Toolkit link in the menu and follow the instructions to configure the plugin.

Updating Theme Manually

  1. Download the most current version from ThemeForest in the “Downloads” area of your account.
  2. Unzip the package and locate deus.zip in the theme folder.
  3. Go to Appearance > Themes and activate another theme such as the default WordPress theme.
  4. Delete the mag theme which is now inactive.
  5. Go to Install Themes > Upload then install and activate deus.zip from the new package.

Plugins Updating

After upgrade the theme maybe there is plugins that need to be upgraded. For the non pre-package plugins like contact form 7, you can upgrade automaticly from plugins > installed plugins menu.

Updating Pre-packaged Plugins Automaticly

  1. Afer upgrading the theme, you will get notification if the pre-packaged plugins required to be upgraded, like the picture below.
  2. Click Begin updating plugins and you will be redirected to menu Appearances > Install Plugins > Update Available Tab.
  3. Click the update button to update the plugin.
Sometimes, the upgrade notification doesn’t appear after you upgrade the theme when there are plugins that should need to be updated. You must check it manually, just go to the Appearances > Install Plugins > Update Available Tab.

Updating Pre-packaged Plugins Manually

  1. Afer upgrading the theme, navigate to Plugins > Installed Plugins then deactive the pre-packaged plugins that required to be upgraded.
  2. After you deactive that plugins, please delete that plugins.
  3. Navigate to Appearances > Install Plugins
  4. Install and Activate the plugins which you deleted and deactivated before.

If you are migration from a theme which used the native featured images functionality of WordPress. Please use the Regenerate Thumbnails plugin to resize all the thumbnails. Click the link above and download the free plugin, and read through the steps it contains, it has all the information you need.

Within this section, you’ll find everything you need to localize and internationalize the Deus theme into your language. You can translate the theme in many different ways:

Using Deus's built-in translation panel

Deus lets you translate all the strings which are present on the front end of your website via the built-in translation panel in the theme settings page.

  1. Go to Appearance > Theme Options > Translations.
  2. Add the translation for each element or just for the desired elements.
  3. Make sure you click Save Changes button, then you’re all done!

Using The Loco Translate plugin

The  Loco Translate plugin provides in-browser editing of PO files used to localize WordPress plugins and themes. check this tutorial for how to translate the theme via Loco Translate 

Using PoEdit

The translation file deus.pot is in the Languages Files folder in the theme folder. Edit the .po file using POEdit, and use the translation field to make replacements.

From the file menu, save the file with your language name e.g de_DE.po. It will generate both a .po and .mo files for your translation. Place these files into the languages folder /wp-content/themes/deus/languages.

Using the WPML Plugin

Deus is WPML compatible theme, you can translate a template to a language of your choice. You will need to purchase a recent version of  WPML, including the String Translation and Translation Management modules.
Follow the  Getting Started Guide after installing the core WPML plugins.

To initiate translation, go to  WPML > Theme and Plugin Localization. Click on Scan the theme for strings. You will see the theme strings and which ones are translated. Then select WPML > String translation and a list of the strings in the theme will be available. Choose the string you need to translate and select the translation link to add translations to languages.

Widget Area

Backstreet comes with 2 pre-defined widget areas that you can use to decorate your website. Backstreet also has a very powerful built-in system for creating custom widget areas and controlling your sidebar output. Have a look at the guide how to add Custom Sidebar Areas.

Here’s the list of pre-defined widget areas :

  1. Global
    This is widget area for all pages sidebar exclude footer widget area.
  2. Footer 
    This is widget area for footer.

Custom Widget Area

This is very simple, just go to Appearance > Widgets and use the function to add a new widget area.

 

Advanced Management

Selecting Widget Area & Sidebar Layout Settings

You can select the sidebar layout and widget area for pages/posts, taxonomy, and global sidebar. Just go to the Appearances > Theme Options > Sidebar

 

Selecting Widget Areas Per Page/Post

For simple edits you can select your specific widget area on a per page/post basis via the page settings (see screenshot below). You also can change the post/page sidebar layout be left, right sidebar or one column, fullwidth layout.

Selecting Widget Area Per Category/Taxonomy

You can also select your custom widget area for a specific taxonomy/category/tag on your site and this sidebar will not be applied to all the posts inside this taxonomy.

Page Template

Backstreet includes a few page templates that you can choose from.

  1. Default Template – This is normal page template. But when you select the WPBackery Page Builder for create page element, the template will be custom page. We use that for create homepage on demo site.
  2. Contact – This is the contact page template, you can settings the Maps and Contact Form 7.
  3. Sitemaps – Page template for create sitemaps page.

How To Select A Page Template

  • Create a new page or edit an existing one.
  • On the right side of the page, you’ll find the Page Attributes box.
  • Under the Template option, choose your desired Page Template from the dropdown field. To learn more about what each page template is for, please refer to the section above.
  • Once finished, click Save Draft or Publish.

Setting Up Home Page

Setting up your home page is the same as setting up any other regular pages, except that you need to specify in the settings which page will be your Main Home Page.

  1. Navigate to Settings > Reading tab.
  2. Select A Static Page option.
  3. Choose the page you want as your home page from the Front Page dropdown list.
  4. This is also the same spot you select the blog page as the Posts page.

Post Format

With Backstreet, we provide 4 kinds of post format that you can use for your post. There are Standard FormatGallery Format, Audio Format and Video Format.

1. Standard Format

This is the default option for post format. With this format, you can also add featured image for your post. The featured image will show on single post and  each post list.

2. Audio Format

If you want to show audio on featured post, you can use this format. You can put the audio by soundcloud url, embed audio and self hosted audio.

3. Gallery Format

If you want to show image gallery on featured post, this post format will fit in your need. With this format, you just need to simply upload several images into gallery format field as gallery items and everything’s set.

 

4. Video Format

You can also use video for featured post by using video post format. You can put the video by video url, embed video and self hosted video.

Primary Category

A category is one of important thing for post. With Backstreet, you will notice post category appears on several place such as on block post, hero, slider, breadcrumb and etc.

On certain post, you might use more than one categories. In this case, only the first post category will be used by default. However, if you personally want to use a certain category instead of the one selected by the system, you can setup Primary Category manually for your post.

Primary category will show on several place as category badge on post block module, post slider and breadcrumb category on single blog post.

Adding Favicon

Since WordPress 4.3, you can add a favicon to your site by following these seven simple steps:

  1. Log into the WordPress Admin.
  2. Click Appearance > Customize.
  3. Click Site Identity.
  4. Click Select File under where it says Site Icon.
  5. Once you’ve selected your favicon file, click the Select file button and upload.
  6. Your favicon will appear under the Site Icon heading of the Site Identity dialog.
  7. Click the Save and Publish button.

Retina Display

Backstreet is Retina Ready so the theme will look fantastic on High Resolution displays like the iPad or iPhone Retina devices. The most important thing to understand is that there are two different sets of images/graphics that can be Retina Ready.

The general rule is that a Retina Ready image needs to be 2x the normal size. So if you have an image that is going in a space that is 100px x 100px, you would need to upload a 200px x 200px image. The easiest way to ensure that your User Images are Retina Ready is to use the WP Retina 2X Plugin created by Jordy Meow. So you need to install & activated that plugin.

The WP Retina 2x plugin is a fantastic plugin and is the best option for users to ensure their images are Retina Ready. It tells you if the images you are uploading are large enough to ensure Retina Resolution. And it can also convert your current media library to be Retina Ready. It will automatically create the necessary 2x images that are needed for every area of the site, and will warn you if your images are not large enough to be Retina Ready.

Images Logo

Some images such as the Logo need to be uploaded via the Appearence > Theme Options > Logo. We have created the necessary fields to ensure those images are Retina Ready. Users will need to upload the extra files that are 2x the original size. For example, you will need to upload your regular size logo file in the Logo field, then upload the 2x Logo file in the Retina Logo field.

Adding Contact Forms

Contact forms are not built into a theme (for many reasons) so we recommend using a 3rd party plugin for this. The free one we like is Contact Form 7. It can be used to add forms anywhere on your site with the Visual Composer!

In our demos we’ve used Contact Form 7.

-----------------------------------------------------------------------------------------
Version 1.0
-----------------------------------------------------------------------------------------

- Release