Theme Requirements

To use this theme you must be running WordPress 5.0 or higher, PHP 5.6.20 or higher. If you use hosting with limited resources (for example GoDaddy and other lowcost shared hosting providers), you may experience issues with one-click demo data installation feature.

We recommend you to contact your web hosting service provider to make sure that your server PHP configuration limits are as follows:

• max_execution_time 600
• memory_limit (up to) 256M
• post_max_size 32M
• upload_max_filesize 32M

If you are running unmanaged dedicated server or VPS, you should check your php.ini file. Alternatively, you can edit .htaccess file in the root of your website and add the following values:

php_value max_execution_time 600
php_value memory_limit 256M
php_value post_max_size 32M
php_value upload_max_filesize 32M

Setting these values will ensure you will not get error messages during the installation. To safeguard your website, please use secure passwords and the latest version of WordPress and plugins.

IMPORTANT! To avoid any errors that might come up during the installation we recommend to have memory limit set up to 512M.

Here is the list of other recommended web hosting services:

• Bluehost (Exclusive Offer for our Customers: -70% OFF)
• SiteGround
• InMotion Hosting

Installation

Unpacking the theme

Before installing the theme, please make sure you unpacked the archive and extracted theme files. After unzipping the archive, you will see the following files:

If you try to install the wrong files, you will get missing style.css file error. This is the most common error that means you are trying to install an incorrect package.

To install "StreetStyle Blog" theme, you must have WordPress installed. For information regarding WordPress platform installation, please check the WordPress Codex or check this great video tutorial.

Update WordPress: To ensure a positive user experience, we highly recommend updating your WordPress to the latest stable version. This will help utilizing all of the latest features of WordPress.

If you have questions regarding theme installation, we recommend reading a detailed instruction below.

You can install the theme in two ways:

• via FTP:
  1. Log into your web server with FTP client software.
  2. Unzip streetstyle-blog.zip file and ONLY use the extracted /streetstyle-blog theme folder.
  3. Upload the extracted /streetstyle-blog theme folder into /wp-content/themes folder.
  4. Activate the newly installed theme. Go to Appearance > Themes and activate it.
• via WordPress:
  1. Login to admin panel.
  2. Go to Appearance - Themes and click on the Add New button.
  3. Choose Upload theme option. Click on Browse... (Choose file in Safari/Chrome), select "streetstyle-blog.zip" and click Install Now button.
  4. After the successful installation, click on Activate or go to Appearance - Themes and click on Activate to activate the newly installed theme.
  5. After the theme is activated, you will be prompted to install recommended plugins: ThemeREX Socials, ThemeREX Updater and WPBakery PageBuilder, Contact Form 7 and MailChimp for WP.
     
     
     
     All these plugins are included into the theme archive, or can be installed from the WordPress.org repository.
     The theme can function without any of these plugins. But if you want your website look precisely as the demo page, you have to install all recommended plugins and import demo content. This is a good idea if you are building your website from scratch.
     However, if you have an existing website, you should be very careful with plugin installation and importing demo data: this may affect the website content and structure. Please read the Demo Content article for details.
  6. Attention! If you want to make changes in theme’s templates or functions, we recommend activating a child theme before demo data installation, otherwise the Theme Options will be lost. Please see the Child Theme section for more information.

Plugins Installation

In order to make the theme look exactly as the demo page, you need to install recommended plugins. Click on Begin installing plugins link.

You will be redirected to plugins installation page. Check all listed plugins, select Install option and click on Apply button. Installation may take a few minutes, please be patient and do not refresh the page.

After the installation you will get a notification informing that plugins were installed successfully.

PLEASE NOTE! Our theme is compatible with WP GDPR Compliance plugin, though it is not included into the theme's package.

Gutenberg Compatibility

Our theme is compatible with Gutenberg page builder. You can create new pages using this editor.

All existing demo pages are built using WPBakery Page Builder and should be customized through WPBakery Page Builder ONLY.

PLEASE NOTE! It is possible to switch between the page builders. Please use One page builder for creating/customizing One particular page/post.

Child Theme

Child theme is for developers willing to make changes to core functions and code. If you are not planning to dig that deep, you can just skip this chapter.

IMPORTANT: If you want to make changes in theme templates or functions, we recommend that you install the child theme and apply changes there. To learn more about the purpose and basis of creation of child theme, please visit WordPress Codex.

In the theme package you will see materials for the child theme. It’s located in "StreetStyle-child.zip" archive. You can install the child theme just like you installed the main theme (see above, in the section "Installation").

A few recommendations on how to use a Child Theme from ThemeRex:

• Almost all files from the main theme can be replaced in a child theme. It doesn’t concern only .php-files with templates and basic logic, but also both .js, .css files from respective folders and files with images, icons etc.
• If you want to change some of the theme-related functions or to add new ones, copy/add all the required functions into 'functions.php' in the "streetstyle-blog-child" folder. If our theme contains functions with such names, they will be replaced with yours, if not – your functions will complete our theme logics.
  IMPORTANT: If you want to replace some functions from other files (except functions.php), e.g. from _wp_utils.php or _utils.php, we do not recommend you to copy respective files into the child theme, but you should create the respective functions in functions.php in the child theme. This should be done, so that when updating the theme, new functions from these files are available for use.
  As for other files - put out the templates from the folder 'templates', images from the folder 'images' etc. - to make changes copy theme into the folder 'child theme' and make changes there.

Demo Content

Our themes have simple One click demo data import tool. It's very easy to use and you can get a precise copy of our demo website in just 1 click.

Before installing demo data, please make sure you have installed all the required plugins, please refer to Plugins installation section of this document for details.

To import demo content into a WordPress site, please follow these steps:

1. Log in to your site as an administrator.
2. If you see a message prompting to install the Streetstyle Utilities plugin - click on "Begin installing plugins" and install it on the corresponding page.
   IMPORTANT: The rest of recommended plugins (for example, WPBakery Page Builder, and others) are not mandatory for installation of demo content but recommended.
   
   
   
   
3. Go to Appearance -> Install Demo Data:
   
   
   
   
4. On the page that showed up please set the required parameters.
   
   • Only pages, forms and sliders - Allows you to select the content you need to be imported for a definite page, slider, etc. It is recommended when the site is already built.
   
   
   
   
   • Whole demo-site content - Allows you to import whole demo content. It is recommended for new installations of WordPress.
     IMPORTANT: When installing whole demo-data ALL EXISTING CONTENTS of your website will be deleted and replaced with the new data! We highly recommend that you install demo data only on blank WordPress install.
   
   
5. Click on "Install Demo Data" button.
   IMPORTANT: Please wait while demo data is being copied from our server to your site. It may take a while and depends significantly upon Internet connection speed between your website and our server. Please wait patiently and do not refresh/leave the page.
   
   
6. After the data is successfully imported you will see the "Congratulations" message:
   
   
   
   In 99.9% it works fine, but if something went wrong and data was not imported, please repeat the procedure described above. The system will find the last item imported successfully and you will be able to continue the import.
   
   If you are making the install on your local machine, please check your internet connection and firewall settings, this may affect data transfer.
   
   In case "Demo Data" installation stuck and you see "Error load data from the file ... " error message, you can manually install it by downloading the demo.zip archive from our server. Extract the archive to demo/ folder and upload this demo/ folder to wp-content/themes/streetstyle-blog directory.
   
   Treat the screenshot below as an example only. The list of folders inside a theme package may vary.
   
   
   
   If the issue persists, please contact your hosting provider to make sure that your server configuration meets the Theme Requirements. Otherwise, please contact our support team at https://themerex.net/support/. Our tech support operators will assist you.

General

In this section you can customize the general website look using the following settings.

Body Style

Body Style options allow you to choose the way the page is displayed selecting the width for the website body content:

• Boxed - page body is located in the zone of limited screen width, and you can see the background image behind it:



• Wide - page body occupies the entire screen width (background image is not seen behind it), and the content is placed in the area of limited width, in the center of the screen:



• Fullwide - page body occupies the entire screen width (background image is not seen behind it), the content is stretched to the entire screen with small indents off the window edges:

Sidebar Position

You can choose whether you want to have sidebar on the right or on the left on the page.

• Right - the sidebar is located on the right of the content.



• Left - the sidebar is located on the left of the content.

Top User Panel

You can choose whether you want to have the top panel or not.

Top Menu Panel

Responsive Layouts

Using this setting you can decide if you want to have responsive layouts, adjusted for each screen size and device or to keep the main layout for all of them.

• Yes - To have responsive layouts. The website will be adjusted for each screen size.
• No - To keep the main layout intact for all screen sizes. The users will scroll the page to see the content.

Responsive Menu

In this field you should fill in the window width when responsive menu will be enabled.

On the image below, this parameter is 960 px (by default), so even if you have responsive layouts set to "No", you will get responsive menu when resizing the browser window.

Alternatively, you can select 480 in case you want to have a navigation bar on the small screen devices only.

Add SEO meta

By choosing "Yes" metadata (Google reach snippets, Facebook meta tags, etc.) will be added to a single post. Choose "No" if you are using any of the SEO plugins.

Image dimensions

Choose the necessary image dimensions.

Quality for cropped images

Choose the necessary quality for cropped images.

Show page preloader

This setting allows you to upload an image that will act as your main preloader image.

Title section background

This option allows you to set a background image for category's top title section. Bg image for posts and pages can be set via Customization panel. As for the Categories, bg image should be specified in the categories settings itself.

Text with Privacy Policy link

Specify the text for the checkbox in "Contact Me" form (for Page style "About") for theme version v.1.5.4 and below! This text will be displayed before the Privacy Policy link. Please see "About" page for more information.

In order to add/custimoze the Privacy Policy link, navigate to Settings (WP Dashboard) > Privacy and specify the page that will be used as a Privacy Policy one.

Slider

In this section you can choose the slider engine and slider position:

Slider engine

You have two options here:

• Select slider - If this option is selected, the slider will not be shown on the website.
• Posts Slider (Swiper) - This slider engine will display the featured images of your posts.

In case you install Revolution Slider plugin (it is not included into the package), you will see this slider engine here as well, it is fully integrated with the theme.

As soon as you select Swiper slider engine, you will see a set of additional parameters:

Slider style:

You can select the slider width using these settings:

• Boxed - There is a space on the right and on the left of the slider (as on the image above).
• Fullwide - The slider images are stretched to the window width.

Slides per view - This setting allows you to divide slider into several columns.

Slider height - You can enter any desired slider height here (in px).

Category - This option allows you to select the category of posts which featured images will be shown in the slider. If no category is selected, you will see images from the latest posts in the slider.

Posts - Allows you to enter the category ID, or comma-separated post IDs for the slider images.

Interval - You may customize the slides change interval (pause time) here.

Top panel position - This setting helps you to specify the top menu position. It can be Above slider or Below slider:

Socials

You can add links to social media icons here. If you leave these fields empty, icons will not be shown. Social icons will be displayed in the top right corner of the header:

In the Share section you can specify URLs to share posts in social networks (if you leave the field empty - there will be no sharing).

Logo, Title & Tagline

Settings of this group are responsible for the website logo and title display:

Site Title

The text entered into this field will be displayed as the logo (if the image logo is not uploaded) and as the website title in your browser tab.

Let's dwell on the square brackets you see in the title. They help you to create the logo style as on the demo page:

As soon as you delete the brackets from "Site title" field, you will get the logo text in one style:

Tagline

The text entered into this field will be displayed as the website slogan under the logo. By default, the tagline is used if no image logo is selected.

Site Icon

You can upload/remove your site icon here (must be 512x512px).

Favicon

You can upload/remove your favicon here.

Logo

Logo image is uploaded or selected from the Media Library:

Logo for Retina

Upload special size logo image to make it look better on the Retina displays.

Header Image

This option allows you to add the header background image to your website top panel.

Just click on "Add new image" button and browse the image from the Media Library. Alternatively, you can upload it from your computer. See the screenshot below.

Background Color

This option allows you to apply any custom color to your website's background. Works for "Boxed" body style only.

Background Image

These settings allow you to add the background image behind the content body, when "Boxed" body style is enabled and to manage its position:

Just click on "Select image" button to upload the image from the Media Library or from your computer. After this step you will see a set of other parameters for background.

Color Scheme

The next section of settings allows you to manage the color scheme of your website. Let's consider these parameters.

Color Settings

Here you can select Simple or Advanced option of your color scheme customization.

Color Scheme

Select one of two predefined color schemes: Default or Dark. Check the screenshots below.

Links

Set the necessary color for your links and accented areas.

Links Hover

Set the necessary hover color for your links and accented areas.

In case the capabilities of "Simple" color scheme are not enough you can go with the "Advanced" one and completely change your website's look.

Menus

These settings allow you to manage Menus:

Manage Locations

There are 3 default Menu locations, so now you can choose which one goes where.

• User Top Menu - Responsible for displaying menu in the header.
• Main Menu - Displays menu under the logo image.
• Footer Menu - Responsible for displaying menu in the footer.

Menus are also available for editing through the "Appearance > Menus" options.

This is how the menus are built.

Footer menu

Main menu

Upper menu

Widgets

These settings allow you to manage widgets. Depending on the selected page that is available for editing with Customizer's tools, you can notice a different kind of widgets sets included to a particular page. The same can be done through Appearance (WP Dashboard) > Widgets.

Here you can manage standard sidebars (widget sets) included in the theme.

If you expand one of these widget sets, you will be able to:

1. Add a widget: just click on "Add a widget" button to see the available widgets, then choose the one you want to use:



2. Reorder the position of widgets using 3 icons:
• Move - allows you to move the widget to another sidebar.
• Down - the widget will be moved down.
• Up - the widget will be moved upwards.

After you reorder the position of widgets in the sidebar, please click on "Done" button at the bottom.

You will be able to assign any of these widget sets to the sidebar of Homepage, Blog archive pages, Search results pages, Single post pages and Single pages in the corresponding menu items of Appearance > Customize.

Moreover, you get a few Custom Widget sets that can be managed in Appearance > Widgets:

By default our theme supports 3 widget areas:

• Sidebar
• Footer Top
• Footer

On the same page you will see Available Widgets section which also includes MailChimp SignUp form. In order to add the widget to the Sidebar, just drag and drop it to the needed position, add the content and Save it.

Custom widgets

1. StreetStyle - Advertisement block: Used to insert advertising banners - images with links or arbitrary HTML-blocks. IMPORTANT: Be careful to use extraneous HTML-code not to disrupt the design of the page.





2. StreetStyle - Calendar: A standard WP Calendar showing the current date and the days with available daily archives (posts).



3. StreetStyle - Categories block: Shows the list of available categories.





4. StreetStyle - Most Popular & Commented Posts: Displays the most visited, most commented and most liked articles.





5. StreetStyle - Recent News: Displays the most recent news.





6. StreetStyle - Recent Posts: Displays the most recent posts. Unlike the standard widget, it can display a post featured image, author name, comments, post counters and post category if you enable these options.





7. StreetStyle - Show logo and social links: Shows the links to social network profiles. The widgets for social media icons are added in Appearace - Customize - Socials. Also site logo and short description will be displayed.





8. StreetStyle - Slider: Displays the slides via Posts (Swiper) Slider.



9. StreetStyle - Twitter: This widget shows the last Tweets from your Twitter-feed using the API 1.1 (entered into force in June 2013).
   For its work, this version of the widget requires creating "Twitter Application" and obtaining the appropriate codes. Due to the fact that Twitter from June 2013 switched to the new API 1.1 and discontinued support of out-of-date API 1.0, now to get information out of this social network, you must create an account on the resource https://dev.twitter.com/apps. Then, click the "Create a new application", fill in the required fields and generate "Access token" and "Access token secret". As a result, you will get four important core values to work with Twitter API 1.1:
   • Consumer key
   • Consumer secret
   • Access token
   • Access token secret
   You will need these fields to configure the widget "StreetStyle - Twitter" in Appearance > Widgets.





10. Mailchimp SignUp form: Allows you to add subscribers to your MailChimp lists. Mailchimp for WP plugin should be installed to use this widget.

    In order to configure your Mailchimp widget, please follow these steps:

    • Navigate to MailChimp for WP - MailChimp in your Wordpress admin and enter your MailChimp API key. To do that you should be registered at Mailchimp website:

      

    • Open MailChimp for WP - Forms and fill in Form mark-up. You can see the code for the demo form on the screenshot below:

      

    • Copy the shortcode you see on the same screen, and paste it to the Text widget created in Appearance > Widgets:

      

    Once all these steps are done, you will get the following block in one of your sidebars, where the users can sign up for a newsletter:

    

11. ThemeREX Socials Instagram Feed: This widget requires ThemeREX Socials plug-in to be active. The widget shows the latest photos from your Instagram account or demo photos in a form of a feed on your WordPress website. You can connect to your Instagram account in the Appearance (WP Dashboard) > ThemeREX Socials section (you need a valid Instagram Access Token).
    Demo mode means that the images will be taken from your demo folder (/wp-content/uploads/).
    Alternatively, you can use photos from Instagram without connecting to your account: by using a hashtag #... or by specifying an Instagram username (WITHOUT a hash symbol).

Homepage Settings

This option allows you to display a static page for your main frontend page and for your post pages as well.

Homepage Displays

• Your latest posts - Displays the latest posts.



• A static page - Displays regular static page.
  • Homepage - Set the necessary page to act as front page.

  

  • Posts page - Set the necessary page to act as post page.

  

Additional CSS

Settings of this group allow you to specify additional custom styles.

Footer

These settings allow you to manage the content and layout of your website footer:

Footer top widgets

Here you can select the sidebar for your footer area: Sidebar, Footer or one of Custom widget sets.

Footer widgets

Here you can select the sidebar for your footer area: Sidebar, Footer or one of Custom widget sets. This area will be displayed below the "Footer Top" widgets. In the example below the slider is inserted into the footer widgets area.

Logo for footer/Retina

You can upload your logo image (retina ready) here from the Media Library or from your computer.

Copyright

Feel free to enter your copyright information here. If you leave the field empty, copyright will not be displayed on the site. In order to make the current year change automatically, just paste {Y} instead of the year.

Homepage

Settings of this section allow you to manage homepage style and it's sidebar:

Body style:

Here you can set the necessary body style for the homepage only.

Blog style:

• Excerpt - Posts will contain the featured image, a small excerpt from the post content and "Learn More" button.

  

Sidebar Widgets

Here you can decide whether you want to have a sidebar on the homepage and which one.

Blog archive

This section allows you to control the layout and style of your blog archive pages such as a blog stream page and category pages:

Blog style

Select the necessary post style for your blog archive pages.

Posts content

Select the way to display your posts' content.

Sidebar widgets

Select what sidebar needs to be displayed on a blog streampage.

Animation for posts

Select the necessary animation style for your posts to show up.

Pagination style

Select a proper order for your posts to appear on the page.

Search Results

You can adjust the layout and sidebar for the pages displaying Search results in this section:

Blog style

Select the necessary post style for search results.

Sidebar widgets

Select the necessary sidebar to display on search result page.

Single Post

You can adjust the sidebar for the single post pages in this section:

Sidebar widgets

Select sidebar to show on a single post.

Top title section

Displays an image and post's name.

Post navigation

Displays previous and next posts images with titles.

Single Page

You can adjust the sidebar for pages here:

Sidebar widgets

Select sidebar to show on a single page.

Slider

Displays the slider.

Top title section

Displays an image and post's name.

Footer Info

Displays the footer's info.

Contact Form 7

Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on. More information on how to use this plugin can be found here.

YMore guides are available here (video tutorial) and here. Find a default shortcode below:

MailChimp

This plugin helps you add subscribers to your MailChimp lists using various methods. You can create good looking opt-in forms or integrate with any other form on your site, like your comment form or WooCommerce checkout.

More information on how to properly use this plugin can be found here.

The backend settings can be found in the WP Dashboard menu > MC4WP > MailChimp tab.

ThemeREX Socials

This plugin helps you output Instagram feed or demo photos in a form of a feed on your WordPress website in one of the following ways: through connection to your Instagram account (you need a valid Instagram Access Token), from your demo folder (/wp-content/uploads/), by using a hashtag #... (for taking photos from Instagram) or by specifying an Instagram username.

In order to connect to you Instagram account, please navigate to the Appearance (WP Dashboard) > ThemeREX Socials tab and enter your Instagram Access Token. For demo mode, displaying photos using a hashtag or Instagram username no connection to your Instagram account is needed.

How to get Access Token from Instagram:

• Log into your Instagram account with photos you want to display on your website.
• Visit the Facebook Developer Page, click My Apps to create and set a Facebook application. Please click here to view an official tutorial.
• Fill in the form. For "valid redirect URLs" option use the following link
  https://your_website_name/wp-json/trx_addons/v1/widget_instagram/get_access/.
• Get your "Client ID" and "Client Secret".
• Navigate to Appearance (WP Dashboard) > ThemeREX Socials section and paste "Client ID" and "Client Secret" into the corresponding fields. Click on "Get Access Token" button.
• Approve that you want to grant the application access to your Instagram account.

Now you can proceed to Appearance (WP Dashboard) > Widgets section and locate "ThemeREX Socials: Instagram Feed" widget into any widget area available in the theme. The "Hashtag" field works for both a hashtag (starting WITH a symbol #) and your Instagram username (WITHOUT a hash symbol).

You can also use the "Widget Instagram" shortcode in the WPBakery Page Builder's Back-end Editor (ThemeREX tab).

ThemeREX Updater

This is our self-made plugin that allows you to update the main theme as well as the bundled plugins through the WordPress admin panel. ThemeREX Updater plugin requires a valid purchase code that can be entered in the Appearance > ThemeREX Updater section. To get the code, please navigate to your ThemeForest "Downloads" page and click on the theme download link. Check this guide for more details. Once any plugins or theme updates are available for download, you will receive a corresponding notice in WP Dashboard > Updates. Please view the Theme Update chapter of this documentation file for more information.

WPBakery Page Builder

To make your customization even easier we have added the WPBakery Page Builder to this theme. Before you start, please check these VC related tutorials. They will give you a basic understanding of how to build a page properly.

1. Official WPBakery Page Builder FAQ page.


2. Getting Started With WPBakery Page Builder Guide.


3. WPBakery Page Builder: A Guide To Drag & Drop Page Building


4. How to Add Row and Column with WPBakery Page Builder.


5. How to Add Row or Column Background with WPBakery Page Builder.


6. How to Create Empty Space Between Elements with Custom Height.