A Child Theme is a theme that inherits the functionality and styling of another theme, called the Parent Theme. Child Themes are the recommended way of modifying an existing theme. Therefore, we strongly recommend that you use Child Theme instead of Parent Theme.
There are few good reasons, why we recommend you to use a Child Theme:
All SingleStroke's themes are packaged with a sample Child Theme. You can directly install the Child Theme along with the Parent Theme, and then activate the Child Theme. No additional setup is required, as our sample Child Theme already contains pre-defined scripts to make it works out of the box with the Parent Theme.
If you have been using Parent Theme and at certain point you need to migrate to Child Theme, you can easily activate the Child Theme. All the configurations would remain safe, the only things you need to re-configure is Menus location. Please go to Appearance > Menus and re-assign your menu to the appropriate location.
Before you get started with our themes, please note that all SingleStroke's themes ONLY work for WordPress.org (self-hosted WordPress) and can't be used for WordPress.com installation. If you are new to WordPress.org, please follow these few steps to setup WordPress on your hosting.
WordPress.org application needs to be installed on your own hosting. If you don't have any host yet, you can take a look at our Recommended WordPress Hosting list, which has high quality hosting plan to run WordPress.
** We strongly suggest you to use one of our recommended hosting, as some other hostings have issues and aren't completely compatible to run the lastest version of WordPress.
After activated your hosting, the easiest way to install WordPress is using the "1 Click Install" feature that might be available on the hosting features. But if you want to take control of the process by yourself, you can use this 5 Minute Install which has detailed instructions to setup your WordPress. We recommend you to do it manually as it's good to make you more familiar with the platform itself.
After installed your fresh WordPress site, you could log into the admin pages, by going to your site URL and add "wp-admin" next to the site URL, e.g. http://domain.com/wp-admin. Use the username and password you just created, and you would be redirected to the Dashboard page.
Simply log into your ThemeForest account you used to initially purchase the theme and navigate to your Downloads page and find the theme in the list. Click "Download" button and choose "All Files & Documentation". Extract the package .zip file and you would find two .zip files: the Parent Theme and Child Theme. The filenames should be in
[theme-name].zip and [theme-name]-child.zip
First, log into your new WordPress installation and go to Appearance > Themes, and click "Add New" button on the top part of the page. After that, click "Upload Theme" button and upload the Parent Theme .zip file, [theme-name].zip.
Child Theme is optional, however there are few good reasons why using a Child Theme is recommended when it comes to advanced customizations. To use Child Theme, you should upload the bundled Child Theme from the package as well, click the "Add New" button and then "Upload" the Child Theme .zip file, [theme-name]-child.zip. After uploaded, please activate the Child Theme or the Parent Theme.
After activated, you need to install all the required & recommended plugins. It's necessary to install and activate all the plugins, since some of theme's functionality really depends on those plugins. Please navigate to Appearance > Required Plugins. You would see a list of all the required & recommended plugins. Check all the plugins, select "Install" and "Apply".
It would take a while installing all the plugins, after finished you would be redirected to a success page, click the "Return to Required Plugins Installer" link, and you would be back at the required plugins list page. Check all the plugins, select "Activate", and click "Apply". Done! Your theme would have full functionality now.
Some of our themes are bundled with demo data import feature. This could be really helpful if you want to start your site quickly or you want to have the same looks as our demo site. Learn more about demo data import feature on this article.
All the theme's settings are available on Appearance > Customize. Browse into each section and try to change or modify the options. You can change layout, colors, or even typography that fits your business / personal branding.
In case you hit problems when installing and setting up the theme, please create a new support ticket. While creating a new ticket, it's important to include as much information as you have on the issues, like: the page URL where issue appears, the theme version, or your login details. Our support team would get back to you and help you. Cheers!
Demo data import feature is intended for fresh installation only. Before running demo data import, please make sure you have these conditions:
Before you import the demo data, it is recommended to turn on the WP_DEBUG mode on wp-config.php file on your WordPress installation directory. It's useful when the improt process hit errors, you need to know the type of the error occured for resolving it. You should turn off this WP_DEBUG mode after you finished with the demo data import.
If you find any error while importing, there are chances that it's because of your hosting configuration. Please read this article to get the quick solution.
This feature is only available on some of our themes, because not all of SingleStroke's themes require complex demo data. Themes which are using this feature are:
The One Click Demo Data Import feature allows you to clone our demo site content into your own site with only ONE CLICK. This could be really helpful if you want to start your site quickly or you want to have the same looks as our demo site. Make sure you have already installed all the required plugins list, otherwise the One Click Demo Data Import menu can't be found. After you installed the plugins, please follow these steps:
The process would take a while, please wait and don't close the browser tab. After finished, you can check your home page. Voila!
** Please note that some images might be converted to gray images due to a copyright policy from the owner.
There are some cases, the import proces might fail. This is usually caused by your hosting configurations which might conflict with the way WordPress running the import. Luckily, we have a few tips to fix these issues.
Some servers have short execution time limit by default. In some cases, the import process is aborted due to this time limitation. You can adjust the time limit from your PHP server configuration, or you could use WP Maximum Execution Time Limit Exceeded plugin.
That means some recommended plugins which is mandatory for the data haven't been installed. That's why we suggested that you install all the required plugins before you import the demo data.
There are chances, that you have installed all the required plugins and still got a long list of "Failed to import ..." errors. In this case, there is a tricky solution:
It is usually caused by PHP error. If you have activated the WP_DEBUG mode, and see this error message on your Tools > Import page:
Strict Standards: Redefining already defined constructor for class WXR_Parser_Regex in xxxxx\wp-content\plugins\wordpress-importer\parsers.php on line 408 Strict Standards: Declaration of WP_Import::bump_request_timeout() should be compatible with WP_Importer::bump_request_timeout($val) in xxxxx\wp-content\plugins\wordpress-importer\wordpress-importer.php on line 38
You need to go to Plugins > Editor and select WordPress Importer plugin. Edit 2 files as mentioned here: https://core.trac.wordpress.org/attachment/ticket/24373/24373.diff. Please change the red block into the green block.
Try to import the demo data again.
Updating your theme to the latest version is really important and highly recommended. Each update might contain bug fixes, new additional features that may be available, also new implementation of WordPress new features and plugins.
** By updating a theme, normally you won't lose any data, because they are kept in the database. But it's a good idea to backup your database before updating a theme, just in case.
** All hardcoded changes on your Parent Theme would be gone upon updating. That's why we don't recommend any hardcoded change on the Parent Theme. Please use Child Theme if you want to override template, add hooks, etc.
Manual theme update requires you to re-download the theme package from the marketplace and then re-upload the new version to replace the old one. This method is simple but need a bit of works and attention to details.
Simply log into your ThemeForest account you used to initially purchase the theme and navigate to your Downloads page and find the theme in the list. Click "Download" button and choose "All Files & Documentation". Extract the package .zip file and found if there is special note text file included. If yes, please read the text file, as we include specific guidelines which needs your attention before updating the theme.
Inside the package, you would also find two .zip files, which are the Parent Theme and the Child Theme. You only need to upload the Parent Theme, as the new version core changes are applied to the Parent Theme only. Whether you are using Child Theme or not, you don't need to re-upload the Child Theme. Otherwise, your hardcode changes on your Child Theme would be gone.
** If your site is already live and get high traffic, you might want to use WP Maintenance Mode plugin when updating the theme. That way, users won't notice any misbehavior from your website while updating.
Log into your WordPress Dashboard and navigate to Appearance > Themes. Please note, if you are using Child Theme, it's not necessary to update the Child Theme, you only need to update the Parent Theme.
This method is way faster for long run, you would get notification when a new update has been released. But you need to install an additional plugin and do some configuration on it.
Envato Market is one of recommended plugin we have listed on Appearance > Required Plugins. If you have installed and activated the plugin, you should be able to find "Envato Market" menu on your Dashboard. In that page, you should connect your website with Envato API so that every released updates, you would get a notification to update your theme.
There are two kinds of Token key:
We recommend you to use Single Use Token, as we want to keep your website connected to only the theme you are using. This is used when you build the website for your client, and you want the client to have access to only the theme they are using, not other themes you have purchased.
What's the theme ID?
You can find the theme ID from ThemeForest's page URL. e.g. Jack & Rose has the following URL: http://themeforest.net/item/jack-rose-a-whimsical-wordpress-wedding-theme/13722583. The theme ID is 13722583.
How to generate token?
If you have sucessfully connected the token, a new tab would appear on the Envato Market settings page, titled "Themes". You can do automatic update whenever the update is
You might need to configure how many posts would be displayed on posts index page, when users would need to navigate to the next page after seeing a specific amount of posts. This option would also be very useful if you have custom posts layout, e.g. 3 Columns Grid Layout, or 4 Columns Grid Layout, etc. The configuration is very easy.
Go to Appearance > Reading, and there would be "Blog pages show at most" option, set the number to your liking. Done!
Some of SingleStroke's themes integrates with other custom post types, e.g. Primrose integrates with "Products" post type. In some cases, you would also need to configure how many products you would like to display in the "Shop" page. WordPress doesn't have dedicated option for custom post types. So you would need to install Custom Posts per Page plugin. After installed and activated, go to Settings > Posts Per Page, you would find a list of post types along with the option to set the number of posts per page.
By default, WordPress would use blog posts index as the front page. But you can use other custom static page as the home page. First, you need to create your static page, fill it with content. Or if you have used demo data impor, you could directly go to Settings > Reading.
There would be a "Front page displays" option. Set the value to "A static page", and then set the "Front page" option to your custom static home page. You would also need to set the "Posts page" option to a new custom page. This new custom page will replace the default Blog posts index page.
"Read more" link is used to cut long content of a blog post when displayed in posts index page (blog home page, category page, or other archive pages). Users would need to click this "read more" link to go to the full version of single post page.
All SIngleStroke's themes are compatible with "read more" tag and you could manually where to cut your content and insert the "read more" link.
Go to your post editor page, in the editor box, there would be an icon like this:
Set your cursor to where you want to cut the content, and then click "Insert Read More tag" icon. You might cut your content after your first paragraph, or second paragraph, or anywhere you see fits. Example of how it's done:
To get the optimum performance, we have some guidelines on your media files size. Each theme has different design, therefore you have to adjust your media files size to the optimum size. Some issues that might occurs if you upload wrong size media files:
Those issues above are NOT considered as a theme's issue. Uploading the wrong size of media files doesn't mean the theme is "bad designed", or "slow". Please follow these guidelines below:
If you are using video background for your hero section, you need to convert your videos into 3 formats: mp4, ogv (or ogg), webm. These 3 formats are recommended since some browsers has their own video support preferences. Each format should have same filename. e.g.:
It is also recommended to keep your file sizes at the optimal minimum size, so it's bandwidth friendly. you can try change the frame width/height, lower the bitrate, etc.
By default, WooCommerce product images are presented using an interactive lightbox (popup gallery) module. Since version 1.2, Primrose comes with 3 options of product images gallery model:
To set global galelry model (affects all product posts), you can find the configuration under Appearance > Customize > Shop > Product images gallery model. Optionally, you can also use different gallery model for each product. To do so, please edit your product, find the metabox on the sidebar with the "Gallery Mode" option. You can choose whether the product would follow the global configuration (from Customizer) or use specific model.
You can disable / enable the lightbox feature from WooCommerce > Settings > Products > Display. Find "Enable Lightbox for product images" option and make sure it's checked if you want to enable the lightbox module.
Custom Product Page is a feature that lets you use a custom static page as your single product post. As we all knew, by default all single product posts has the same page template, the default one from WooCommerce. In some cases you might want to present your products in a custom landing page, with sections, various elements, etc. That's when you need Custom Product Page feature.
Setting up the Instagram Feed block on the footer section is easy. Please navigate to Appearance > Customize > Footer and you would find some options to setup the instagram feed. Done.
By default, the number of products per page follows WordPress's posts per page settings (Settings > Reading). If you want to change this setting specifically just for product posts, please install Custom Posts Per Page plugin. After installed and activated, you can go to Settings > Posts Per Page settings page. There would be a new section named "Custom Post Type Specific Settings", find and change the number on "Products" text option.
If you didn't use the Theme Demo Data Import feature available from the theme, you might need to setup your Shop pages (WooCommerce) manually. If you are new to this, if might be a bit difficult to know how it works. Luckily, WooCommerce has a very nice Setup Wizard feature which would be prompted when the plugin is first time installed.
** If you used Demo Data Import, you need to skip the Setup Wizard. Our demo data import already included the shop pages for you.
The setup wizard screen looks like this:
If you happened to skip this window before, you can still run this wizard by doing this:
The wizard has 4 main settings: Page Setup, Store Locale, Shipping & Tax, and Payments. You could change these settings again later from the WooCommerce > Settings page.
Evey online shop has different image size setting for their products. A fashion online shop might want to have portrait orientation size. WooCommerce allows you to set product images size right from the settings page. However a manual "regeneration" action is required after you made changes to the image sizes.
Navigate to WooCommerce > Settings > Products > Display, you would find a section called "Product Images". There are 3 options there:
You can set the height to blank or zero (0) which means you allow dynamic height size of your product images, WordPress won't crop your image and keep the size ratio. And the "hard crop" option lets you choose between to crop your uploaded images precisely to the specified size, but it's recommended to have this option enabled to get you consistent image size after automatically cropped by WordPress.
After changing the image size on the settings page, it's required that you run this action. Otherwise, your previous uploaded images won't have the new image sizes. To do so, please install the Regenerate Thumbnails plugin first. After activated, please navigate to Tools > Regenerate Thumbnails, and run the process by clicking the "Regenerate" button.
All SingleStroke's themes are built using the best practice to ensure you have best loading performance on your website. But there are many factors why your website runs slow and most of them are caused by non-theme factors, like:
There are some plugins out there that work really well for WordPress optimizations. We have been using these plugins on our demo site, and it works well with our themes (with correct configurations). Plugins we recommend are:
There is FREE and PRO version of the plugin, the FREE plugin works well and is enough for standard optimizations. If you have the FREE version installed, you can copy these configurations on your own setting page:
You should pay attention to Autoptimize configurations. Wrong configurations could lead to site errors. We suggest you to only enable the safe basic options unless you know what you are doing exactly. The basic options are:
All SingleStroke's themes are transatable. If you need to translate all text in the theme into non-English language, there are two ways to do it:
This method is way easier. First, you need to install Loco Translate plugin, which is a free plugin. After installed and activated, the plugin will automatically detects all translatable texts in the theme. Go to the new Loco Translate menu from your Dashboard, and find the Theme you want to translate. Click the "+ New Language" link, select the new language, and start tranlsating the texts in the list.
_) instead of dash (
Multi-language feature allows you to more than one variation of all your pages / posts. Users can switch between languages, and your content would automatically switch to the chosen language version. Some of our themes that are compatible with multi-language feature:
WPML is the most popular multi-language plugin for WordPress. The plugin is premium and NOT included in our theme package. Please purchase the plugin and install it on your website.
You should also install the WPML addon: WPML String Translation plugin which would help you add multi language version of each theme's translatable text.
If your website has WooCommerce integration on, you can optionally integate your WooCommerce with WPML by installing WooCommerce Multilingual - run WooCommerce with WPML plugin.
For further documentation about how to use WPML, please read their documentation which is available here.