Overview
Information described in this documentation will give you an idea of how to setup your site to look and function like the theme demo. View the changelog for more a detailed record of all the changes made to Obsidian.
Note: This documentation is for the self-hosted version of Obsidian sold on AudioTheme.com. If you purchased Obsidian on WordPress.com, support is available here.
Getting Started
After activating Obsidian, you can jump in and start customizing your theme right away by going to Appearance → Customize. You’ll find options for adding a logo, changing colors, assigning custom menus, and front-page settings.
Detailed instructions for working with the theme’s unique features are included below, but if you run into any issues or have a question and have an active support license, you can get in touch through the priority support form.
Obsidian requires WordPress 4.1+
Adding a Logo
By default, Obsidian will use your site title in the header. Alternatively, an image can be used in place of the site title by going to Appearance → Customize → Site Title & Tagline → Logo.
Homepage Setup
Create a Page titled “Home” to use as your homepage if you don’t already have one.
Once your homepage has been created, you can head to Settings → Reading in your WordPress dashboard. Here you can set the homepage by changing “Front page displays” setting to the following:
- Choose the “A static page” radio button.
- In the “Front page” dropdown, select your “Home” page.
- Click “Save Changes”.
The page set as the “Front Page” should now be displaying as your homepage. Continue reading to learn how to make this page display a large background image, audio player, videos, and upcoming gigs like the theme demo.
Background Image
To display a large background image on the homepage, you’ll need to set a custom background image via the Customizer.
Background Overlay Opacity
To ensure visibility, we’ve added a setting to increase or decrease the background color over the image. This overlay color can be adjusted by changing the “Background Overlay Opacity” slider under the “Background Image” section.
Site Wide Player
The site wide player in Obsidian relies on the Cue and CueBar plugins, which gives you the ability to easily create custom playlists and display a site wide player.
Once Cue is activated, go to Playlists → Add New to create a playlist. After creating at least one playlist in Cue, you can assign it to the CueBar player area by going to Appearance → Customize → Cue Players. Select a playlist for the “CueBar Playlist” setting.
Content and Widgets
Adding content to Obsidian’s Home page is done by using Widgets. To start adding widgets to the homepage, go to Appearance → Widgets and look for the widget area labeled “Home.” Widgets can also be added to the homepage via Appearance → Customize → Widget: Home.
Blog
Similar to the homepage, you’ll need to create a page where your blog can be accessed. Create a new page titled “Blog” then head to the Settings → Reading and select your blog page in the “Posts page” dropdown. Be sure to save your changes.
Gig, Record, & Video Archives
Be sure to read the documentation about setting up your archives to add links to your discography, gig, and video pages.
Photos
The photos page in the theme demo is displayed using a WordPress gallery shortcode. To display the photos in a tiled grid, you will need to install and activate the Jetpack plugin, then enable its Tiled Gallery module.
Once Jetpack is activated, you can create your Tiled Gallery by following these steps:
- Go to Jetpack → Settings
- Activate the Tiled Galleries module
- Edit an existing page or create a new page
- Create a new gallery with the “Tiles” option selected
- Optional: To make all of your galleries tiled by default, go to Settings → Media in your site’s dashboard and select the checkbox next to “Display all your gallery pictures in a cool mosaic”
Menus
Menus provide granular control over the links that appear in the various navigation elements on your site. Obsidian supports four different menu locations out of the box, which generally work like menus in standard themes if you’re familiar with them. If not, brush up on their use in the WordPress Menu User Guide in the Codex.
Start creating and assigning menus via Appearance → Menus.
Archive Menus
Obsidian has menu locations for the Gig and Record archive pages. These menus can be used to add additional navigation for past gigs or maybe display different record types (e.g. Albums, Singles). An example of an archive menu can be seen on the theme demos Upcoming Gigs page, where we use the menu to display past gigs by year.
Adding a menu to one of these archive pages is the same as assigning a menu to the main navigation via Appearance → Menus.
Social Menu
The Social Menu in Obsidian allows you to display links to your various social media profiles, like Twitter and Facebook, as icons. Each menu item should be added as a custom link. Obsidian will automagically display the correct icon based on the link URL. For example, a link like http://twitter.com/audiotheme/ will display a Twitter icon because the theme has detected it is a twitter URL.
The following icons are bundled in Obsidian for use in your Social Menu: Amazon, Apple/iTunes, Bandcamp, Facebook, Flickr, Google Play, Google+, Instagram, Last.fm, LinkedIn, Pinterest, Rdio, ReverbNation, SoundCloud, Spotify, Tumblr, Twitter, Vimeo, WordPress, and YouTube.
Footer Widgets
Above to the Social icons menu you can also add all your widgets to the three-column footer widget area. Just go to Appearance → Widgets to add widgets to the Footer widget area.
NOTE: The footer widget is desiged to display one widget in each column of the footer. Any additional widgets will wrap around, clearing the tallest widget.
Custom Backgrounds
To customize the main background image and color — the default color is black — you can go to Appearance → Background and either choose your own color or upload a background image. The background color should be a darker color or dark image to make sure the light text will still be visible.
Full Width Page Template
With the Full Width Page Template option, you can create a full width page with a maximum width of 1100px. Just choose the page template under Page Attributes → Template when editing a page in your dashboard.
Customizing Obsidian
Custom CSS
For making minor CSS customizations, we recommend using a plugin that allows you to easily add your snippets in the WordPress admin panel. If you’re already using Jetpack, it ships with a Custom CSS module, otherwise, Custom CSS by Dev7studios is a good standalone option.
Child Theme
When looking to customize Obsidian, you’ll want to make your changes via a child theme. You can download a sample child theme here.
If you need help customizing your theme, you can always fill out the customization request form.
Need Customization Help?
If you need help customizing your theme, you can find help in the following places
- Contact Anna DiTommaso for WordPress Services for Musicians.
- Fill out the customization request form.
Plugin Support
Obsidian also has built-in support and styles for the plugins listed below. Each plugin can be installed and activated from the Plugins screen in your WordPress dashboard.
WooCommerce
We’ve added basic support for WooCommerce to ensure its templates load correctly within Obsidian, however, you will need to customize the WooCommerce styles if you want a more seamless integration.