Wordpress Premade TB102: Documentation • Sin21 Designs

InstallationBack to top

You can install Wordpress themes one of two ways:

FTP: Extract the sin21-wp-tb102.zip file and upload the extracted theme folder to the ~~/wp-content/themes/~~ directory of your WordPress installation.
WordPress dashboard: In your admin panel, go to Appearance → Themes and click the Add New button at the top of the page. Then click the Upload button at the top of the page. Choose the sin21-wp-tb102.zip file from your computer and click Install Now.

After installing the theme, you must activate it. In your admin panel, go to Appearance → Themes and hover over the theme's preview thumbnail. Click the Activate button next to the theme's name.

▸ Recommended plugins: Classic Editor and Classic Widgets
▸ Gutenberg Editor Disclaimer: This theme disables the following default Wordpress styles, including relating styles for the Gutenberg Block Based Editor: wp-block-library, wp-block-library-theme, wc-blocks-style, global-styles, classic-theme-styles.

Tip: To read more about installing themes correctly: WordPress Adding New Themes.

CustomizerBack to top

This theme is customizable via the WordPress Customizer. Here, you can change the available theme options, manage your menus, and add widgets to your sidebar. To access the theme customizer, click Appearance → Customize in the WordPress Admin menu.

Tip: You can use the following HTML tags in all the fields in this section: <em>, <b>, <a>, <span>.

Site Identity

Blog Title: The site title/name to appear on your theme. Use the <i> tag to use alternating accent color on the text in the title.
Blog Tagline: Display your website's tag line, slogan or description.
Site Icon: This icon is used for a variety of purposes. Most well known for being a "fave icon" which displays in your browsers bookmark bars, browser tabs and more.

Colors

Make sure to use high-contrast colors for your text when changing your background colors for the elements with the option. This ensures the text's readability. Colors that are too similar in contrast make it harder for visitors to read your content.

#99D6C3 Primary Accent: Change the accent color used on the theme.
#ffffff Primary Accent Text Color: Text accent color used on the theme.
#A1325C Secondary Accent: Change the accent color used on the theme./li>
#ffffff Secondary Accent Text Color: Text accent color used on the theme.
#A1325C Gradient Color #01: First color used for elements using a gradient for styling.
#393939 Gradient Color #02: Second color used for elements using a gradient for styling.
#E5E5E5 Gradient Text Color: Text color used for elements using the gradient as a background.
#99D6C3 Overlay Color #01: Overlay color used on the master header.
#99D6C3 Overlay Color #02: Overlay color used on the sidebar header.
#A1325C Welcome Widget Overlay Color: Overlay color used on the welcome widget area.
#ffffff Welcome Widget Text Color: Text color used on welcome widget. Applies to the background color and overlay color. Whichever you're using.

Theme Options:

Hide/Show Elements:

Header: Site Name
Header: Site Tagline
Header: Master Header
Header: Latest IMGS Widget
If you have no use for this area then you can simply remove it altogether.
Sidebar: Header
Content: Welcome Widget
If you have no use for this area then you can simply remove it altogether.
Content: Post Author
Post author is visible on homepage, archive and single post view.
Content: Post Categories:
Post categories can be seen on all posts and single post view.
Content: Post Tags
Post tags appear only when viewing a single post.
Content: Related Posts
Related posts appear only when viewing a single post.
Content: Share Buttons
Social share buttons appear below the content when viewing a single post or page.
Footer: Disclaimer
Appears below the footer links at the bottom of the design.

Layout Options

Blog Layout: Choose the way the posts will be displayed on the homepage and archives.
▸ Styles Included:
- Full Post (Default)
- Grid
- List
- 1 Full Post then Grid
- 1 Full Post then List
Sidebar Position: Display the sidebar on the left or right to the posts and pages.

Content Options

Excerpt & More Link Text

Footer Options:

Blog Name
Additional Footer Links
Disclaimer

Mobile Layout Options:

Background/Overlay Color: This applies to the overlay color on the header image AND the background color when the mobile header image is hidden.
Text Color: This is the color of the text of your blog name and slogan.
Mobile Header: Upload your own image to replace the default one being used.
Hide Mobile Layout Features:
- Background Image (Text Only)
- Background Image Opacity
- Overlay Color
- Blog Title (Name)
- Blog Tagline (Slogan)
- Social Navigation
- Hide Social Navigation

Headers:

Choose your header image by uploading a new photo, or selecting one already uploaded in your Wordpress media library.

Master Header: The full-wdth header at the top of the theme.
Sidebar Header: The sidebar image at the top of the sidebar content.
Welcome Background: The background image underneath the text in the welcome widget.

Other Sections

Menus: You can manage your menus in this panel, including setting their location.
Widgets: You can configure your widgets in this panel and see your changes live.
Homepage Settings: Set a page to be your homepage and/or a location for your posts.
Additional CSS: Add your custom CSS here to overwrite/add to the theme styling.

Tip: To read more about using the WordPress customizer: WordPress Appearance Customize Screen.

MenusBack to top

This theme supports 2 types of menus: a primary menu and a social icons menu

Primary Menu

This menu allows for link children. If a link as children it will allow for a dropdown menu to appear when the link is hovered over in Desktop mode and a clickable slide-out feature in Mobile.

Anything deeper than one level of link children will not show and/or break the menu.

WordPress menus can be found under Appearance → Menus.
If you don't have a menu already, click create a new menu to create one.
On the left side of the Menu page, choose the pages/posts/links/categories to add to your menu and click Add to Menu.
Now that you have the menu created, you need to assign it to the Primary Menu in the Theme Locations section.
Save the menu when finished.

Social Icons Menu

To add a social icon menu, go to Appearance → Menus.
If you don't have a menu already, click create a new menu to create one.
On the left side of the Menu page, click the Custom Links menu item to add to your social links.
Add the URL for each of your social profiles and a label for the link. The theme will do the work for you by detecting which site you are linking to and display the matching icon accordingly.
▸ 33 Supported Sites: email (/contact/, /contact or mailto:), RSS Feed (rss, feed=, /feed/ or /feed), apple.com, blogger.com, dailymotion.com, deviantart.com, discord.com, dropbox.com, ebay.com, etsy.com, facebook.com, flickr.com, google.com, pay.google.com, plus.google.com, goodreads.com, instagram.com, messenger.com, patreon.com, paypal.com, skype.com, snapchat.com, soundcloud.com, spotify.com, tiktok.com, tumblr.com, twitter.com, twitch.tv, vimeo.com, vk.com, yahoo.com, youtube.com, weibo.com, wikipedia.com, wordpress.com, x.com
Now that you have the menu created, you need to assign it to the Social Icons Menu in the Theme Locations section.
Save the menu when finished.

Tip: To read more about using the WordPress menus: WordPress Menu User Guide.

WidgetsBack to top

This theme supports widgets for 3 types of areas: sidebar, welcome widget and latest images widget.

Sidebar: (Max Widgets: Unlimited)
Appears on every page and single post view.
Welcome Widget: (Max Widgets: 1)
How to use: Create one TEXT widget and write up your welcome message.
This widget can be seen on both layout styles.
Header CPMFetch Widget: (Max Widgets: 1)
How to use: Create one TEXT widget and then paste your CPMFetch PHP Include code.
PHP is allowed in text widgets.

CPMFetch PHP Include:

Copy and paste this code into a PHP-enabled widget in the assigned area for latest images:

<?php include "../cpg/cpmfetch/cpmfetch.php";
	$objCpm = new cpm("../cpg/cpmfetch/cpmfetch_config.php");
	$options = array('windowtarget' => '_blank', 'tablestyle' => 'cpmfetchtable', 'imagestyle' => 'tooltip image');
	$objCpm->cpm_viewLastAddedMedia(1,9,$options);
	$objCpm->cpm_close();
?>

The ideal numbers for this theme would be 1,9

How to install and use CPMFetch

To display the latest uploaded images from your Coppermine Gallery installation you will need the help of the free Coppermine plugin CPMFetch.

Install and activate the plugin in your gallery following the instructions below:
- Download the copperminefetch_2.0.1.zip file from the link above. Unzip the package and upload the files into a new folder named cpmfetch within your gallery directory where you installed Coppermine.
- Open up a new tab in your browser. Type in your gallery URL followed by /cpmfetch/install.php and press enter. You should see a page that looks like this.
- Click the link that says: ~~Click here to run the install [OPTIONAL]~~
  You should see a page that looks like this.
- Pay attention these two codes:
  include "./gallery/cpmfetch/cpmfetch.php";
  $objCpm = new cpm("./gallery/cpmfetch/cpmfetch_config.php");
  
  Your install will automatically configure the correct path to your gallery on your server. So when using the example code shown below, make sure the path to your gallery (aka your gallery folder name) is correct and matches what was shown on your install page otherwise it won't be able to connect with your gallery and may cause issues with your theme.
- Tip: This part of the coding: ~~$objCpm->cpm_viewLastAddedMedia(1,9);~~ is also important.
  The number 1 represents how many rows of photos you wish to display.
  The number 9 represents the amount of photos you want to display in that row.
Once CPMFetch is installed, go to Appearance → Widgets.
Add a PHP-enabled widget to the Header CPMFetch Widget panel.
Add the PHP code to the widget and save it.

FontsBack to top

Body Font: Poppins
Heading Font: Oswald
Icons Font: Font Awesome Free 6.5.1

Image SizesBack to top

Master Header Image: 1300w x 300h (height is flexible, so choose your own height.)
Sidebar Header Image: 400w x 565h (height is flexible, so choose your own height.)
Mobile Header Image: 1000w x 350h
Featured Images: 850w x 325h (1000w x 400h or larger recommended)