BETHANY THEME INSTALLATION & SETUP

Thank you for choosing a Stylish Design Theme to build your site. Once you’re set up, we’d love to have you submit your site for us to see. Should you run into any problems along the way please contact us. Below are the instructions on getting your new theme installed and set up to appear the same as the demo. Here is a link as well to the demo that you can view for reference.

Using the Kadence Theme

Extensive documentation on using the Kadence theme can be found here.

Using Kadence Blocks

Extensive documentation on using Kadence blocks can be found here.

We have compiled some basic Kadence tutorials HERE.

Design elements

The following fonts and colour have been used throughout the theme.

Fonts

Colours

  • Dark Dusky Pink #AA7F7C
  • Dusky Pink #C9ABA0
  • Dark Grey #514F48
  • Medium Grey #6B6960
  • Dark Green #646848
  • Light Green #9A9C7E
  • Light Dusky Pink #EBDDD6
  • Light Pink #FBF5F4

**Important before you begin**

I HIGHLY recommend using the theme on a fresh install of WordPress.
If you are not staring with a new install, I suggest you create a backup of your current site. Always keep an unaltered and updated copy of your theme files stored on your computer, in the event that you accidentally make a mistake and need to use that copy to start over. You can also download a copy in your account area  at any time.

Blog featured images sizes

It is a good idea to always have your Featured Images for your posts be the same size or as close as possible, particularly if you are displaying them in a grid. If you intend using the slider, you will want your featured images to be at least 1200px wide. The two recommended sizes are 1200×1500, or square of 1200×1200. If you are not using the post slider, then you can do a smaller image width.

Getting Started

Creating your first website can be a daunting prospect, with so many options available to choose from. Which hosting provider to go for? What is the best domain name for my business? How much will it cost?

Most of these questions are answered best by the team over at WPbeginner.com and here is a great article covering these topics.

BEFORE YOU BEGIN

  1. It’s recommended that you update your site to the latest version of WordPress before installing your theme.
  2. Always make sure you have a backup of your site before installing a new theme! Your hosting most makes daily site back-ups for you, but if not, you might want to consider a backup plugin like Updraft plus.
  3. I recommend that your PHP version be at least 7.0.  

After you have downloaded your files, find the folder with “UNZIP” me in the file name (e.g. UNZIP-ME_bethany.zip) and go ahead and unzip that folder. Once you have unzipped this folder, you will notice that the child theme is in a zipped folder, “stylishdesign_bethany” DO NOT unzip this folder as you will be uploading it to WordPress.

  1. Navigate to your WordPress dashboard and go to Appearance > Themes
  2. Click “Add New” at the top and in the search box type in “Kadence”. Install the Kadence theme but DO NOT activate it.
  3. Navigate to the Plugins page and click the “Add New” button at the top.
  4. Search for “Kadence” again and find the “AI Powered Starter Templates by Kadence WP” plugin. Install and activate the plugin. This plugin will facilitate the install of your child theme template.
  5. Navigate back to Appearance > Themes and click the “Add New” button, and then click “upload”. Search your computer for the Kadence child theme you purchased and upload it. (e.g. stylishdesign_bethany.zip)
  6. Activate the theme.
  7. Lastly navigate to Appearance > Starter Templates. You should now see the preview of the child theme template you purchased OR if you see a page with “Choose your builder”, click on the Studio Chem Logo and you will then see a preview of your purchased theme.
  8. Click on the child theme template preview and then click the “Start Importing” button. This step can take a few minutes to complete.
  9. Wait for the import to finish and then click to view your site, which should now look like the demo!

If you already have an existing website with your own blog posts, you may not wish to have the demo posts that come with the importing of your Kadence Child Theme and you can delete them by doing the following:

  1. Navigate to your WordPress dashboard, go to Posts.
  2. Select all of the posts you would like to delete by clicking in the box.
  3. At the top, in the bulk edit dropdown, select “move to trash” and click the Apply button.
  1. Kadence Blocks – Gutenberg Blocks for Page Builder Features
  2. Genesis Blocks – Gutenberg Blocks Collection
  3. Reusable Blocks Extended
  4. Smash Balloon Instagram Feed
  5. Starter Templates
  6. WooCommerce
  1. Kadence Theme

You will need to assign specific pages to show as your Homepage and blog.
Navigate to your WordPress dashboard Settings > Reading then choose what your homepage displays will show, check Static page and in the dropdown, find and select Home.
For your blog archive, do the same and choose Blog page.

The URLs of the content you publish on your site are called Permalinks. Permalinks are what people enter into their browser to view a specific page on your website. Search engines and other websites also use permalinks to link to your website.

You should avoid changing your permalinks on an established site as this can cause problems with your pages. If you have a fresh instance of WordPress, which we HIGHLY recommend, then you can configure your permalinks at the very start.

To change your Permalinks, go to your WordPress dashboard > Settings > Permalinks.

A navigation menu, which can be set up to show in the header, footer or anywhere else, enables your visitors to easily move through your sites pages and content. Menus are very easy to create from pages, categories, posts, custom links, and you can customize where in your theme you want your menu to be displayed.

In your WordPress dashboard, go to Appearance > Menus.

The Menu screen has a column on the left which has your pages, categories, and custom links tab. The right hand column is where you can add and arrange your menu items.

Under Menu Name, give your menu a name (such as “Main Menu”) and then click Create Menu. This will enlarge the menu area and give you some more choices.
To add pages to your menu, check the pages in the left column that you want to add. Then click Add to Menu.
The pages you added will now appear in the column on the right under Menu Structure.

To add categories to your menu, the same steps apply, namely, click the Categories tab in the left column. Check the categories you want to add. Then click Add to Menu.
The categories you added will now appear in the column on the right under Menu Structure.

If you’d like to link from your menu to a page or site away from your website you can easily do this with the Custom Link.
Click on the custom link on the left. You will see two fields. The first field is for your URL of the page you want to link to, and the second field, Link Text, is where you’ll add the text for your link that will be displayed in your menu. 

To re-arrange menu items so they show as you want, rather than in the order they were added, drag, move and drop a menu item to adjust its position up and down within the menu.

To create a Submenu or Dropdown Menu, simply drag the menu item under a parent item and slightly to the right before dropping it. Dropdowns make your navigation tidier and less cluttered.

It’s super easy to copy any section from one page to another and even to copy entire pages to a new page.

In you WordPress Dashboard, navigate to Pages > The page that has the section you wish to copy. Find the section you want to copy, click on the outside of it until it is bound by a blue box. Then click on the 3 dots.

You will now see a drop down, click on ‘copy’ and it will show a copied to clipboard message in the left hand corner of your screen.

Now go to your dashboard > Pages > Add new and create a new page OR go to an existing page, and scroll to the bottom. Click on the page and either right click ‘paste’ or cmd-v to paste your selection on your new page. If you have added a section to an existing page, simply click on the arrows to place the section wherever you want it to appear on the page.

To copy an entire page and all of it’s content, simply go to the page you wish to copy, find the 3 dots in the right hand corner and click on them. This will show a drop down with the option to ‘copy all content’ near the bottom. Click on this and you will see you have copied the entire page.
Then go and create a new page and once you have named it, simply click on the page and right click ‘paste’ or cmd-v to paste all of the content from your previous page. It’s that simple!

  1. Global Page Settings

In your dashboard, navigate to Appearance > Customize > Page Layout

Here you will find the global settings for your pages, and the settings you choose here will apply to all of your pages.

You can, should you wish to, override some of the global page settings if you would like certain pages to have different settings. Each individual page has a Page Settings section where you can make your changes and override the global page settings.

An example of where you might override your global settings could be where you have your page layout set to fullwidth in the global page settings. On your contact page you may like to have a left sidebar. Go to your Contact page and edit the page settings to set the page layout to ‘Left Sidebar’. The result is that your Contact page has a left sidebar whilst all other pages still use the ‘fullwidth’ page layout.

To make these changes to your page settings on an individual page you will click on the Page Settings icon (page with pencil) and open up the settings panel. Any changes made to these settings will override any global page settings you’ve set in the customizer.

help with kadence

Kadence Documentation

Pretty much everything can be customised in Kadence. It is a powerful framework that gives you complete control of your website and you can easily do the following:

  • Change all of the fonts
  • Select your own colors
  • Customize page layouts or create custom layouts using Kadence Blocks
  • Design and customize pages using a live page editor with zero code!
  • Modify the header and navigation layout using the Kadence Header Builder
  • Change the footer layout using the Kadence Footer Builder
  • Copy and paste sections from one page and one section to another
  • Easily move & rearrange sections on any page
  • Customise your single posts – choose to include a featured image, related posts, author box
  • Tweak margins, padding, borders, font sizes, letter spacing, line height, and more
  • Control tablet and mobile responsive settings separately from desktop
  • Plenty of WooCommerce settings for a beautiful e-commerce store
  • And much much more. Your website is your oyster with Kadence!

Kadence features a drag and drop Header Builder that allows you to easily customize the layout of your header and navigation. Here are some helpful tutorials to get you started:

You also have access to a wealth of tutorials in the Kadence Help Center. We recommend checking out the Kadence Theme and Kadence Blocks sections.

BEFORE YOU BEGIN

There are a few important steps you’ll need to complete before starting the installation process.

1. Update your site to the latest version of WordPress before installing your theme, as well as update any plugins installed on your site. Whenever updating WordPress software, plugins, or themes, be sure that your site has a backup in place.

2. If you are currently using the Classic Editor plugin, please deactivate it prior to installing your theme. Kadence is built for the Block Editor and does not support the Classic Editor.

OPTIONAL PLUGINS

The demo import process will only install plugins that are essential to the function of your Stylish Design theme. However, there are a couple other plugins shown in the theme demo that are optional. If you’d like the demo content to be set up for these plugins, please install and activate these plugins BEFORE installing your theme.

  • WooCommerce – Install if you’d like to have an e-commerce shop on your website

TROUBLESHOOTING

  • Import time: The Demo Import process to take 5 to 10 minutes to fully finish. Do not exit the page or click the back button until the import has completed. The import process is slower on lower quality hosts so do bear this in mind. On SiteGround, the import should only take a minute or two.
  • Bluehost sites seem to really struggle to import the demo content compared to other hosts. If you receive an error and you are using Bluehost, reach out to Bluehost support with the following message: “Please disable Cloudflare on my website and increase my WordPress memory limit to 512M.” Once that is complete, try the import again. This is usually enough to import the demo.
  • If you continue to receive an error message deactivate all plugins on your site, apart from any plugins that are related to Kadence (i.e. Kadence Starter Templates and Kadence Blocks). Then start the import process again.
  • Starter Templates prompt didn’t appear? Go to Plugins > Add New and install/activate Kadence Starter Templates. Once activated, go to Kadence > Starter Templates > Stylish Design to start importing the demo.

QUICK THEME SETUP

  1. Go to Appearance > Themes. Search for the Kadence theme and install it (Do Not activate).
  2. Upload the child theme file that you purchased (eg. stylishdesign.me/angeline.zip) and activate the theme.
  3. Install the Kadence Starter Templates plugin.
  4. Go to Kadence > Starter Templates > Stylish Design and follow the prompts to import the theme demo. All of the default import settings can be left as they are. The demo content should be imported on all sites, including sites with existing content.
  5. Now it’s time to customise your theme by setting up your navigation menus, adding your own content to the homepage, uploading a logo, products etc.
  1. Go to your WordPress dashboard > Appearance > Customize.
  2. Click on the Header tab, then select Logo.
  3. Type your desired site title into the Site Title field. A tagline (optional) can be added to the Tagline field.

To edit the site title font, click over to the “Design” tab and select your font under Site Title Font.

ADDING A LOGO

  1. Follow the instructions above to navigate to the Logo area.
  2. Under Logo, click Select Logo.
  3. Select your logo image. If prompted to crop your image, click Skip Cropping.
  4. Under Logo Layout, you have the option to display your logo on its own, or with the site title.

SITE ICON (FAVICON)

  1. Go to your WordPress dashboard > Appearance > Customize > Site Identity.
  2. Under Site Icon, click Select Site Icon to choose your favicon image. If you already have a favicon in place, click Change Image instead to select a new image.

Kadence allows you to conveniently set your social icon links site-wide. To set your social links, go to Appearance > Customize > General > Social Links. Add your social profile URLs to any fields you’d like. Be sure to include the full URL, including https://

NAVIGATION ICONS

Depending on which theme you are using, you may see four social icons in the top navigation menu. Please note that adding your social links (above) does not automatically add additional icons to areas that currently contain icons.

More information regarding Social Icons can be found HERE.

  1. To add additional icons, go to Appearance > Customize.
  2. Hover your cursor over the social icons (in the live website preview) and click on the blue pencil icon that appears. That will take you directly to the Header Social section.
  3. Click Add Social + to select a new icon.

FOOTER ICONS

Depending on which theme you are using, you may see four social icons in the footer. Please note that adding your social links (above) does not automatically add additional icons to areas that currently contain icons.

  1. To add additional icons, go to Appearance > Customize.
  2. Hover your cursor over the social icons in the footer (inside the live website preview) and click on the blue pencil icon that appears. That will take you directly to the Footer Social section.
  3. Click Add Social + to select a new icon.

CREATING FORMS

Kadence Blocks includes an Advanced Form Block that makes it super easy to create contact forms and any other types of forms on your website. To set up a contact form on your site, follow this tutorial from Kadence.

EMAIL NOTIFICATIONS

After you have created your form, be sure to add your email address in the “Email Settings” field so that you are notified via email when you receive contact form submissions. It’s a good idea to test your contact form on your site to make sure you are receiving emails properly.

TROUBLESHOOTING

If you’ve double checked that your email settings are correct and you’re still not receiving emails, you may need an SMTP plugin to handle email sending. We recommend WP SMTP.

Please note that our themes customer support does NOT include help with setting up or troubleshooting forms, but you can reach out to Kadence here, should you have any issues.

To change the colors in your theme, navigate to Appearance > Customize > Colors & Fonts > Colors.

Under Global Palette, you can select your new colours. You can either replace all of the colours with your own, or replace some and leave others. It’s also fine for colours to repeat within the palette. Please note that the position and order of colours is very important — click here to learn more about how to properly use the Kadence Global Palette.

Note: If there are any parts in your theme that do not change  (i.e. a certain section on a certain page) after changing the colours in the Global Palette, a custom colour may have been set for a specific block. You can change its colour directly in the block settings.

We recommend checking out the Documentation here.

The Scroll to Top button should be enabled on your site by default as part of the theme.
If not, it can enabled by going to Appearance > Customize > General > Scroll to Top > Enable Scroll to Top.

CUSTOMISE THE SCROLL TO TOP BUTTON

To customise the Scroll to Top button, go to Appearance > Customize > General > Scroll to Top. You can change the icon style, icon position, and lots more.

You can also click over to the Design tab for even more options, such as colours and borders.

DISABLE THE SCROLL TO TOP BUTTON

Go to Appearance > Customize > General > Scroll to Top and uncheck “Enable Scroll to Top.”

We recommend checking the documentation HERE.

Kadence Blocks includes an Advanced Gallery Block that makes it super easy to create beautiful galleries and portfolios on your website. To set up a gallery on your site, follow this tutorial from Kadence.

The Row Layout Block significantly improves the column functionality within the new blocks editor. With the Row Layout Block, you can create responsive layouts for your pages and posts easily.
To set up your Block Defaults, follow this tutorial from Kadence.

Kadence provides the Section block to help design sections of content. The Section block is automatically included in Row Layout blocks and can also be used outside of Row Layout blocks. You can add any block to the section and design it using block settings.
To set up a section on your site, follow this tutorial from Kadence.

The Advanced Image block allows you to add an image that can be highly customized. There are settings to configure the image, allowing you to adjust the photo size, padding, and margin, add a mask, and more. The block lets you insert images from your media library or Pexels.
To set up your Image (Adv) Block, follow this tutorial from Kadence.

Sometimes, you need to add a block many times and need them to have identical styles. In these cases, you can save the block’s current settings as default settings for new blocks of the same type. For example, if you use the Advanced Text block throughout your content, you might find it helpful to save default settings so that new Advanced Text blocks have them by default.
To set up your Block Defaults, follow this tutorial from Kadence.

In Kadence Blocks 3.1.16 a new feature was added that allows you to easily search and download images from Pexels (a popular free image source) within your WordPress media library. If enabled you can open the media library modal, and you will see a new tab next to the media library for pexels. For more information check this tutorial from Kadence.

The Posts Block is a part of the free version Kadence Blocks. It allows you to display your posts as a beautiful grid anywhere on your site.
To set up your Posts Block, follow this tutorial from Kadence.

The table of contents block allows you to quickly navigate to the headings within your post or page by automatically creating anchor links to those headings.
To set up your Table of Contents Block, follow this tutorial from Kadence.

The Text (Adv) Block allows you to add and customize Text across your website. You can use a Typed Text Effect, Highlighted Colors, customize advanced typography settings, and much more with the Kadence Text (Adv) Block.
To set up your Text (Adv) Block, follow this tutorial from Kadence.

The testimonial block allows you to configure super customizable testimonials for your site. Add customer feedback and client praise to any block enabled area of your site!
To set up your Testimonial Block, follow this tutorial from Kadence.