Getting Started: Driftwood
Getting Started: Driftwood
Are you're ready to get started with Driftwood? We've created this easy to follow how-to guide that will get you up and running in no time! Need to skip to a particular section? Use the index links below.
- Theme Install
- Required Plugins
- Home Page Setup
- Social Media Icons
- Featured Post Slider
- List & Grid Layouts
- About Widget
- Social Icons Widget
- Widget Areas
- Instagram Feed
- Copyright Info
- Typography & Colors
- Additional Support
If you currently have a Wordpress site, we recommend making a copy of all content. The new theme will not affect your data, but it’s best to do this every time you install anything new.
To make a backup:
1) Login to your Wordpress dashboard.
2) Go to Tools→Export
3) Select All Content.
4) Click on Download Export File. A file will be downloaded to your computer.
To install the Driftwood Theme you will need WordPress v4.3 or newer. Make sure to update your Wordpress to the latest version before installing the theme.
IMPORTANT: In the Driftwood-Docs folder located the theme file called "driftwood.zip". This is the file you will upload to Wordpress.
1) Go to Appearance→Themes.
2) Click Add New.
3) Click Upload Theme.
4) Click the Browse button and locate the driftwood.zip file in the Driftwood-Docs folder. Make sure you select the .zip file.
5) Next click Install Now. When prompted, activate the theme.
Upon installing the theme, you will receive notification at the top of your Wordpress Dashboard stating "this theme recommends the following plugins: Contact Form 7 and WP Instagram Widget".
Click "Begin installing plugins". You may also access the recommended plugins by going to Appearance→Install Plugins.
On the next screen, select the check box next to each of the plugins. Under the Bulk Actions drop down, select Install. When prompted, click Return to Required Plugins Installer.
Repeat step 2, but this time from the Bulk Actions drop down, select Activate.
Contact Form 7 and WP Instagram Widget is now installed and ready for use.
By default the home page/front page displays your latest posts. This is the first page your visitors see when the visit your site.
To check if your home page is showing your latest posts, go to Settings→Reading and make sure Front page displays is set to "Your latest posts".
If you'd like to create a static page for your home page and have your
latest posts display on another page, check out our
Create a Static Home Page & Separate Blog Page.
To customize your home page including layout, title/logo, menu bar, colors, etc., go to Appearance →Customize.
On the left of the screen, you will find drop-down tabs with many options for customizing your site. On the right, you will see a live preview of what your site will look like if an option is changed in the customizer.
If you haven't added a blog title/description, you can do so by clicking the Site Identity tab. Additionally, you can upload a logo, a retina ready logo, a favicon and adjust the header padding in the Header and Logo tab.
The theme menu bar displays your sites navigation menu and social media icons. Before customizing the menu bar, we need to setup a primary menu.
Go to Appearance→Menus. Click create a new menu.
Next, you will find these options on the left: 1. Use pages that already exist; 2. Add posts that already exist; 3. Create your own custom link, such as an external URL; 4. Use categories that already exist.
To add a page, post, or category to the menu structure, select the check box next to the item then click Add to Menu. For custom links, enter the destination URL, add a menu title and click Add to Menu.
You can change the order simply by dragging and dropping. You may also create a drop-down by dragging a menu item slightly to the right of the menu item above it.
Before saving, please make sure to select the check box under your menu labeled Primary Menu.
Click on Save Menu.
Now that the menu has been setup, navigate back to the Customizer.
Go to Appearance →Customize→Menu Bar.
Under the Menu Bar and Mobile Menu tabs, you will find options such as background color, border color, menu font size, etc.
Next lets setup the social media icons that appear in the menu bar.
Social Media Icons
These icons appear at the top of your site. Later we will cover adding icons to your sidebar.
Go to Appearance →Customize→Social Media Icons.
Under the Social Media Icons tab, enter your username for each of your social media sites. With exception to LinkedIn, RSS and Email, you do not need to include the full URL, just your username. Once you enter your username, the corresponding social icon will appear in the menu bar. If a field is left blank, that social icon will not appear.
For LinkedIn, enter your full profile URL.
For RSS, enter your feed URL.
For email, enter "mailto:youremailaddress" without the quotes.
If you wish to disable the Social Media Icons in the Menu Bar you can do so by checking the "Disable Menu Bar Social Icons" option.
You can begin adding blog posts by going to Posts→Add New. Use the post editor and toolbar to add text, images, HTML and even embed video.
The post editor also contains options for adding post categories, tags, a featured image.
To assign a category to your post, click +Add New Category. Categories can be useful for organizing your content and helping your visitors find what they're looking for. You can even create a page showing posts from a specific category.
Please note: to use the featured slider, you will need to create at least one category (more on that later).
>> Featured Images
To set a featured image for your post, click Set Featured Image. You can upload a new image or use any images in your media library. Once you've selected your image, click Use as featured image.
Recommended image size for your featured image is 1080px by 650px. Once uploaded, Wordpress will automatically resize the image to fit the thumbnail sizes throughout the theme.
>>Continue Reading/More Button
While in the post editor, place your cursor where you'd like to end the excerpted content of your post and click the more button in the post toolbar.
>> Limit Number of Post Displayed
Go to Settings→Reading. Change the number located next to Blog pages show at most.
>> Customize Post Settings
Be sure to check out Appearance →Customize→Posts & Pages to customize your post settings.
First you need to enable the featured post slider. Go to Appearance→Customize→Featured Post Slider. Make sure the check box next to Enable Featured Post Slider is selected.
IMPORTANT: For posts to display in the Featured Post Slider, each post must have a featured image assigned. Check out the Post section of this article for more info.
>>Choosing What Posts Display
Within the Featured Post Slider settings, you can choose which posts appear in the slider. To select a specific category of posts, click the drop-down menu under "Select Featured Post Category".
If you would rather show specific posts instead of an existing category, we recommend creating a new category called Featured. Then assign your specific posts with the Featured category.
>>How to Use the Featured Posts Slider as a Photo Slider
To use the Featured Area as a photo slider, you can disable/hide the Featured Post Title Overlay. Go to Appearance→Customize→Featured Post Slider. Make sure the check box next to Hide Featured Post Title Overlay is selected.
Images for the slider will still pull from your posts. So you will need to create a post with a featured image and category such as "Featured" for each "photo" in the slider.
Recommended image size for your featured image is 1080px by 650px.
List & Grid Layouts
Driftwood features several layout options for displaying your posts. To choose a new layout for the home page recent posts or for your archive/category pages, go to Appearance→Customize→Layout.
The options available are described below.
Classic Post - full posts + sidebar
Grid Post - featured image above post content in grid format + sidebar
List Post - featured image left of post content in list format + sidebar
Full Post then Grid - first post is classic format followed by grid format posts + sidebar
Full Post then List - first post is classic format followed by list format posts + sidebar
Below the homepage layout section in the customizer, you can choose to display the post layout full width by disabling the sidebar. The options available are disable sidebar on homepage, posts (single post view) and archives (which is also category pages).
The Archives layout options are the same as the homepage. If you setup a page to display a specific category of posts (see instructions below), use the archive layout options to set how your posts will appear on the archive and category pages.
To add a new page, go to Dashboard→Pages→Add New.
Enter a title for your page and type your page content in the text box below.
Under the Page Attributes section on the right hand side, click the down arrow next to Template and select either:
Default Template - content + sidebar
Full Width Page - full width content + no sidebar
Page with Slider - slider + full width content + no sidebar
Page with Slider & Sidebar - slider + full width content + sidebar
You do not need to create a separate page (as mentioned above) for your categories. Wordpress takes care of this for you and displays all of your post that are assigned with a specific category.
To setup a category page, make sure your posts have a category assigned to them. How to assign categories to posts.
Next, go to Appearance→Menus and click the drop-down arrow next to Categories on the left. Your categories will be listed below. If you don't see your category, click the link that says "View All". Then select the check box next to your category and click "Add to Menu".
Click Save Menu.
Now you will see the category appear in the menu on your site and your posts assigned to that category will now be displayed on a page.
To add widgets to your sidebar go to Appearance→Widgets. You can add any widget you'd like simply by dragging the widget on the left under Available Widgets and dropping into the Sidebar on the right.
Drag & drop widgets above or below each other to arrange or re-order.
You can disable/enable the sidebar widget on the homepage, archives and category pages by going Appearance→Customize→Layouts.
>>About Me Widget
In order to add your photo to the sidebar, you will first need to upload your photo to the Media Library. Go to Dashboard→Media→Add New.
Click Select Files and upload your photo. Width should be no larger than 300px. You can choose to make your photo a circle in the About Me widget settings (more on that later).
Once uploaded, select your photo and a new window will pop up. Copy the URL on the right and paste into a Word document or somewhere easily accessible.
Next, we will add the About Me Widget to your sidebar.
Go to Appearance→Widgets.
Locate the About Me - NMD widget on the left side under Available Widgets. Drag & drop this widget into the Sidebar area on the right. You can expand the widget settings by clicking the arrow next to the widget title.
Here are the available settings.
Title - the title will display above your about photo.
Image URL - this is where you will paste the URL to your photo that you uploaded to the Media Library (see instructions above).
Make a circle - select this check box if you'd like your photo to automatically be displayed as a circle.
About Text - you can add a short description here. This will display below your about photo.
>>Social Icons Widget
To add the social icons to your sidebar, go to Appearance→Widgets.
Locate the Social Icons - NMD widget on the left under Available Widgets. Drag & drop this widget into the Sidebar area on the right. You can expand the widget settings by clicking the arrow next to the widget title.
Next, select the check box next to each social network you'd like to appear as a clickable icon in your sidebar.
You will need to add your social network username in order for the the icons to appear. Go to Appearance→Customize→Social Media Icons.
Driftwood comes with several widget ready areas that you can use to customize the look of your site.
A brief description of each is listed below.
Sidebar Widget - this widget area appears across your entire site except for pages that are assigned with the Full Page Width layout. You can disable/enable the sidebar widget on the homepage, archives and category pages by going Appearance→Customize→Layouts.
Before Content Widget - this widget area appears on the front page above your post content. In the theme demo, we are using the Jetpack Blog Subscription widget. If you'd like to add this widget, you will need to activate the Jetpack plugin through Wordpress.
After Content Widget - this widget area appears across your entire site just above the footer. Again, in the theme demo, we are using the Jetpack Blog Subscription widget in the After Content Widget area.
Banner Ad Widget - this widget area appears on the front page when Full Post then List or Full Post then Grid layouts are enabled in Appearance→Customize→Layouts. If you plan to display advertisements on your site, this is a great place to add a 728 x 90 banner ad.
Single Post Widget - this widget area appears in the single post view below the post content. Again, this is a great place to add a 728 x 90 banner ad or the Jetpack Blog Subscription widget.
Instagram Widget - this widget area appears in the footer. Here you can add the Instagram Widget to display a feed of your latest Instagram photos (more on that below).
To add widgets to any of these widget area go to Appearance→Widgets.
The footer area is located at the very bottom of the theme and appears across your entire site.
>>Instagram Feed Widget
To add your Instagram feed to the footer, go to Appearance→Widgets.
Locate the Instagram widget on the left under Available Widgets. Drag & drop this widget into the Instagram Footer area on the right. You can expand the widget settings by clicking the arrow next to the widget title.
Enter a title such as Follow Us On Instagram (or leave blank), then add your Instagram username. For best results, we recommend setting the number of photos to 6 and choosing Large for the photo size.
If you're having trouble with your Instagram photos not showing, check to see if your Instagram account is set to "private". If it is, please change this and the feed should now appear.
You can add you copyright info to the theme footer in the Wordpress Customizer.
Go to Appearance→Customize→Footer.
You can choose to enter text left, text right or both (as shown in theme demo).
Customize the look and feel of your site by making changes in the Wordpress Customizer. With Driftwood the possibilities are endless! Are you ready to get creative? If so, head on over to Appearance→Customize→Typography & Colors.
Here you can choose new colors and adjust font size, even preview them live before saving!
Be sure to check out all other tabs in the Wordpress Customizer for more color and font size options.
When a shortcode is added to a post or page, it instructs WordPress to find the macro that is in square brackets ()and replace it with the appropriate dynamic content.
The usage is pretty simple. Let’s say we want to show two equal columns. We could use this shortcode:
[one_half]Your content here[/one_half][one_half_last]Your content here[/one_half_last]
Check out the theme demo for all available shortcodes.
Dimensions - this theme is responsive and is designed to scale according to screen size, however use the sizes below as a guide for adding content.
- Theme: max-width of 1080px
- Post and Default Page: max-width of 730px
- About and Full Width Pages: max-width of 1080px
- Sidebar: max-width of 300px
- Featured Post Slider: recommended 1080px by 650px
Need help troubleshooting?
Check out all of Driftwood's FAQ articles here: https://nudgemediadesign.ticksy.com/articles/9883/