You can install Wordpress themes one of two ways:
- FTP: Extract the sin21-wp-tb101.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-tb101.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.
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.
- Light Sidebar: A built-in toggle button that will activate alternative CSS styling that will turn the sidebar theme from dark to light with just a click.
- #D77B62 Theme Accent: Change the accent color used on the theme. Applies to text, background and border colors as styled in the coding.
- #ffffff Theme Accent Text Color: Text accent color used on the theme.
- #E2E2E2 Theme Background: Background color used on the entire theme.
- #222121 Top Bar Background: Background color used on the top bar.
- #737373 Top Bar Text Color: Text color used on the top bar.
- #2F2F2F Navigation Bar Background: Background color used on the navigation bar.
- #D4D4D4 Navigation Bar Text Color: Text color used on the navigation bar.
- #575479 Header Widget Area Background: Background color used on the widget area featured above the content.
- #E2E2E2 Header Widget Area Text Color: Text color used on the widget area featured above the content.
- #222121 Footer Background: Background color used on the footer bar.
- #737373 Footer Text Color: Text color used on the footer bar.
Theme Options:
Hide/Show Elements:
- Header: Site Name
Applies to the website name on both layout styles.
- Header: Site Tagline
Applies to the website tagline on both layout styles.
- Header: Master Header
Applies only to the header seen when using the "Full Header" layout style.
- Sidebar: Header
Applies only to the sidebar header seen when using the "Default" layout style.
- Sidebar: Welcome Widget
Applies only to the "Default" layout style.
- 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
Content Options
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.
- Sidebar Header: Seen when using the "Default" layout style.
- Full Header: Seen when using the "Full Header" layout style.
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.
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.
This theme supports widgets for
3 types of areas: sidebar, welcome widget and latest images widget.
Both the Welcome widget and Latest IMGS widget areas will not appear unless you create an active widget within the assigned widget area.
- 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.
- Latest Imgs 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.
Full Header Layout: Latest IMGS Widget Style #01
This style works well if you aren't using the welcome widget. This will allow the Latest IMGS widget to fit the entire widget area, and therefore you can feature one long row of thumbnails.
CPMFetch PHP Code:
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
Full Header Layout: Latest IMGS Widget Style #02
This style ONLY works if you adjust the amount of rows and thumbnails to show in the CPMFetch include. This will allow the Latest IMGS widget to push to the right of the welcome widget and you can display your thumbnails in two rows rather than one.
CPMFetch PHP Code:
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(2,5,$options);
$objCpm->cpm_close();
?>
The ideal numbers for this theme would be
2,5
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 Latest IMG Widget panel.
- Add the PHP code to the widget and save it.
- Sidebar Header Image: 400w x 565h (height is flexible, so choose your own height.)
- Full Header Image: 1300w x 375h (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)