WOOLF – Documentation
- Activate Plugins
- Setup Demo
- Building Custom Menu
- Navbar selector
- Blog Layout
- Theme Settings - Options
- Styling and Color Customization
- Home Sections
- Home Slider
- WooCommerce Extra Product Settings
- Contact Page
- About Page
- Social media links
- Single Layouts and Elements
- Extra Pages
- Sources and Credits
Thank you very much for choosing WOOLF, the second theme of RAMSTHEMES. We truly appreciate and really hope that you’ll enjoy our theme and our future updates and improvements. If you have any questions or recommendations, feel free to contact us.
- WordPress 4.6 (or above)
- PHP 5.6 (PHP 7 recommended)
- Basic Knowledge of WordPress (create posts, install plugins, fill fields, etc.)
As you know, you can always visit the demo site here
When you purchase the theme, the downloaded zip file contains:
- demo files (it contains the files for images and exported data for cloning the demo site)
- theme files (it contains the zipped installable WordPress theme file)
Extract the downloaded zip, and select the zip file woolfwp.zip. Now, you have two ways for installing the theme:
1 – Install theme via WordPress Dashboard
> Go to Appearance – Themes section and click Add New
> In the next screen click the Upload Theme button
> Click the Choose File button, select the zip file and click Install Now.
2 – Install theme via FTP
- Open your FTP program (i.e, FileZilla) to browse the folders of your server, and go to wp-content/themes directory.
- Extract the zip file woolfwp.zip on your computer, it extracts on the folder “woolfwp”, which contains al the Theme files. Put (or drag and drop) this extracted folder in the wp-content/themes folder.
- In the WordPress Dashboard, go to Appearance – Themes section. The Theme appears with his featured screenshot, hover it and click the Activate button.
When you install and activate the Theme, there’ll be a message with a list of required and recommended plugins.
Required: Advanced Custom Fields Pro, RAMSTHEMES Addons, WooCommerce
Recommended: Classic Editor, Contact Form 7, Yoast SEO
Optional: All-in-One WP Migration (but required only if you want to import demo content)
You can go to Appearance – Install Plugins section and install them
Import .wpress file from All-in-One WP Migration
If you want to import the demo to your WordPress installation (looks exactly the same as demo site), when you make a clean install of WordPress on your server and before the activatation of theme, download the All-in-One WP Migration plugin and activate them. Now, go to Import page from the all-in-One WP Migration dropdown menu:
Once you have chosen the option, the application takes you to the Import page:
From this page you can select from where you want to import a backup using the dropdown menu:
If you chose ‘File’, the plugin will open a window showing your local files and folders and will let you chose a backup for import from there. Then, extract the zip file woolfdemo.zip from the Demo Content folder. Next, a file called woolfdemo.wpress appears. Choose them to begin the import process:
The import has an additional step which warns you that your website will be overwritten by the new backup including database, media, plugins and the activated theme. This is the last step from which you can cancel the process. After pressing ‘Proceed’ you cannot stop the import process anymore. The amount of time the import process will take depends on the size of the data and the speed of your internet connection.
Note: is important to previously check in your Hosting Service the File Size Upload option (128 MB recommended size, because the size of the import file is 110MB)
When finished, a successful import will display this message:
At this step, it is recommended to click on Permalinks Settings link and save your permalinks twice in order to save them and generate .htaccess file.
Also, because the demo imports the original database, your admin user, mail and password keys will change to:
Please, enter with this keys to your dashboard and change them to whatever you want.
Building Custom Menu
For Navbar Type 1 and Type 2
Go to Appareance – Menu in the Dashboard and build the menu with the elements you like. After that, check the “Display location” in Menu Settings and Save Menu to display it in the sidenav (Type 1) or header bar (Type 2).
For Navbar Type 3
“Main menu” is the general section of the expandable menu
Build menu dragging elements
The first custom link must be “Menu” (or another text). In the “url” field type #0 and add the css class go-back. This creates the back dynamic button on the menu. Also, use it in the submenus, with another name, to create dynamic sub-sections.
The “Secondary menu” is the zone below the button of the general expandable menu. Drag and drop here the other elements.
Results Example: Navbar Type 3 builded menu. The arrows indicates sub-menus.
Inside them are the back arrows.
Responsive menu with sub-menus. “Store” is the general expandable menu. Menu and back button included.
Logo in navbars
In addition to configuring the navbars, you can upload two logos, one for the Normal (light) mode and other for Dark mode, if you wish to enable them. Recommended logos in PNG or SVG format for better definition.
Other options are:
Navbar Shrink: shrink effect when you choose a bigger logo (major navbar and logo heights).
Navbar / Logo height: the height of the header navbar and/or logo in pixels.
Logo align: choose for center or left align (only for Navbar Type 1 and 3)
Mega dropdown custom title: this is the custom text of the “expandable” section of the menu (the “Main menu” on wordpress builder). In the previous example, the title is “Store”. Only available for Navbar Type 3.
The Layouts applies to posts on home, archives (tags and categories), search, blog template and author page. All styles have common options with certain differences.
Filters: enables filter buttons with Isotope. For homepage, choose a large number of posts to display.
All filter text: the custom name for display the filters (i.e, “All news”).
1. RAMS Grid, Four, Three, Two column and Rows
Post qty: number of posts that are displayed (only for home, not using the default WP option!).
Display categories: displays the category of the post (only on home page).
Display Time: shows the date of post, configured on WP settings section.
Display excerpt: shows post excerpt.
Display tags: shows the tags assigned to post. In mobile, when more than 1 tag is displayed, you can navigate them sliding to right or left with your finger!
Display data: show the info of the other buttons Outside (all) or Inside (date, categories and excerpt) the square.
Image percentage: sets the “height” of the square image; when you increase the value in % (i.e, 200%), more rectangular is the aspect ratio. Minor values set more thin images (ideal for Rows layout).
3. Packery grid
Columns: select the column qty (from 2 to 5) for the grid, based on the grid-sizer function of Packery.
Theme Settings - Options
Select container: choose respecting Bootstrap Fluid container (similar to full-width) and default container (spacing on left and right).
Spacing: the external margins or “streets” between the columned-squares of the grid. Select from 0 (no margin) to 3, respecting the Boostrap margin class (4 and 5 not included because it reduces too much the size of the squares).
Search button on header: enable or disable a search box on the top-right corner of header, near the light-dark mode switch.
Use Fade effect for load pages: activate a simple fade effect when a page is loaded.
Activate Load Bar: activate a thin load bar when a page is loaded, similar to YouTube.
Load Bar color: select a custom color for the thin load bar when activated.
Fixed Navbar: changes the header to a fixed position, making the entire navbar visible when scrolling.
Border navbar: adds a border-bottom line to header navbar.
Border sinenav: adds a border-right line to sidenav menu (only for Navbar Type 1)
Side menu font size: sets the size in px of the side menu sections (only for Navbar Type 1)
Sidebar in pages: enables the same sidebar of posts in pages.
Rounded Corners: styles all the images and borders with a little rounded corner style, similar to an “app-like” style.
Featured Images in Pages: includes the page custom featured image in the gray-wide-rectangle area of front end, creating a “banner” format.
Social Media Buttons: used for the default social media buttons. Disable if you’re using another plugin or social share tool (we recommend the ShareThis .js integration and Yoast SEO for metadata).
Logo or image for register/login: allows to upload a custom image on the left of register or login page.
Styling and Color Customization
Styling and Color Customization
In the Styling tab, you can select your fav colors for this sections of the theme and enable or disable two Switches.
Dark Mode Switch: enable or disable the switch for the two modes on the top-right corner of the header.
Hover color for Dark Mode: the hover color for links, only when dark mode is enabled on frontend.
Body text color: the general color of the texts.
Body background: bg color for the whole background of the site.
Hamburger menu color: colorize the hamburger “three line” menu.
Side menu background: bg color for the sidenav displayed when the hamburger menu is pressed.
Navbar background: bg color of the header.
Navbar text color: the general color of the menu buttons on the navbar.
Next/Prev background: bg of the next and prev post section, below comments box.
Slider background: bg of the slider used as gallery on posts.
Link color: color for the links, or the <a> tag.
Hover color: color for the links when hovered.
Buttons background color: bg of the custom button class.
Buttons text color: text color of the custom button class.
Buttons background hover color: bg of the custom button class when hover it.
Buttons text hover color: text of the custom button class when hover it.
General switches turns on or off the sections of the homepage. All with custom main titles and buttons for view all the items in every section.
Featured: the first section used for promotional images. It allows to customize the main title and the height of the square images. Items must be configured in his own tab below:
Categories: the section used to display principal categories with his thumbnails. Items must be configured in his own tab below and selecting the display options.
Products: displays the WooCommerce latest products. Settings for visual display and other options must be configured in his own tab “WooCommerce Product Extra Settings”.
Blog: displays latest posts. Layout and options are previously configured in the tab “Blog layout”.
Elements: displays custom elements as images, titles and short texts, ideal for the typical “services” section of the home. Items must be configured in his own tab below:
Contact: displays the contact info filled on the “Contact” section of the theme settings.
Complementing the Layout Selector, you can enable a slider for the homepage and add the slides what you want, uploading image, setting the titles and description, sets the color of texts (White for colored images or Dark for more light-background images) and linking them to anywhere. You can link featured posts you like or upload your own-designed slide.
Slider Type: “Half” is a “page-like” slider that flips every element, separating texts and images in left and right.
“Full” is the typical slider that covers all the space with text inside.
Slider width: options are Full (covers entire page widely) or “Normal (fits to general container).
WooCommerce Extra Product Settings
Layout: Columned or Packery. Visually based on the previously designed layouts structured for blog posts.
Infinite Scroll: enables the Infinite Scroll effect when scrolling down.
View more button: combines with the previous switch, enabling a button for show more posts.
Note: when the IS and VM buttons are disabled, the default WP paged navigation is automatically enabled.
Product columns: number of columns (2 to 5) for selected layout.
Align Add to Cart Button: align the button to the bottom of every product column.
General example with four columns:
Product qty. on home: the quantitty of products showed on homepage. Ideal for combining with infinite scroll.
Product image %: sets the “height” of the square image; when you increase the value in % (i.e, 200%), more rectangular is the aspect ratio. Ideal for columned layouts (not available for packery, because need the fluid image to be showed)
Sidebar in shop page/position: activates the dedicated WooCommerce sidebar for display widgets in shop page. Select Left or Right position.
Display Cart on Navbar: displays the icon in top right position of the navbar.
Add to Cart text: changes the text of the button in the single product page (i.e, “Buy”).
Sale text/color/background: changes text and colors of the “offer” rectangle placed in top-left zone of the product featured image.
Product Gallery Zoom/Lightbox/Slider: enable or disable core features of WooCommerce gallery.
Remove sorting dropdown/Result count: enable or disable them in the shop page.
Description/Additional info/Review tab: enable or disable the basic WooCommerce tabs in the single product page. If you disable the “Description” tab, another option will shown: Long description only, that displays the description content directly below the main area of product page.
Display Product Qty: enable or disable the qty. selector on single product page.
Display SKU and Category: enable or disable the SKU (product code) and category on single product page.
Remove order notes: disable “order notes” textarea on checkout
Buttons background/text/hover color: customizes the color of the WooCommerce main buttons.
Visit Single Product demo here
Sets your contact info and displays the shortcode
to display the default contact form. To set it up, go to “Pages” in your Dashboard and create a Page, and select the template “Contact” in the “Page Attributes” box.
To embed map, copy and paste the code obtained in Google Maps website “share” option after the search of the location. This method no needs the creation of the Maps API key and register a credit card in Google Services.
In this section you can add personal or enterprise info in a editor and a cool photo. Also, you can combine the shortcode
to display the default contact form. To set it up, go to “Pages” in your Dashboard and create a Page, and select the template “About” in the “Page Attributes” box.
Social media links
Social media links
You can simply fill the fields with the url’s of your fav and active social media profiles. They will be shown in footer.
Single Layouts and Elements
Single post are used for the Blog Section, if you want to create them. To set it up, go to “Pages” in your Dashboard and create a Page, and select the template “Blog” in the “Page Attributes” box. This page contains all posts only and takes the general layout settings reviewed in the Blog Layout tab.
Then, every post have this options:
You can select custom options for display every post, and select the featured element:
1. Featured image
Enables a featured image different from the default ft. image (that be used in home and archives). It displays on the top of the post.
2. Featured video
Enables a featured video in the same area. It embeds directly from the url generated from Youtube or other video services supported by WordPress oembed function.
Display the default structure of post, with the second featured image on top and text below. Also, you can select within this design:
Display Second Featured Image: Default (img in static common mode) or Parallax (adds the Parallax effect to img).
Second Featured Image Title: Inside the img or Outside, over the content.
Activate Sidebar: enable or disable the right sidebar which contains the Widgets you choose for the Sidebar on the Appearance – Widgets section.
2. Sticky Image
Displays the post with a half-grid module, with the second-ft-image on the left and the text on the right, similar to the editorial design of printed magazines.
Second Featured Image Title: Inside the img or Outside, over the content.
3. Sticky Title
Similar to the previous option, it only displays the title on the left and the content on the right, putting the second ft. image above the content text.
Here, you can add the number of galleries you like selecting three types. The common Gallery scheme (traditional image squares in columns), the Packery scheme (similar to Masonry fit style) and Flickity, which converts the gallery in a Slider. You can use all types in the same post, because every gall. is generated by the shortcode RAMSGALLERY and an ID. Example: select and upload the imgs you like and, in the Gallery Shortcode field, you can put whatever you want, i.e testgallery. Then, the shortcode that you’ll put on the content is
And then, do that with every gallery you want.
Note: in future updates, we enable the possibility to do this with a Gutenberg Block!
You can visit this example of the demo to see the three types in practice
Extra: wide image on post
If you select a layout without sidebar, you can insert a wide image across the content. It can be configured when you add a full-size image to post, select “none” in Align, and add the CSS Class “wide” in the proper field.
Create Blog page
Create a common WordPress page, name it “Blog” and select the template “Blog” in Page attributes. Save it, and ready to use.
Create Register page
WOOLF uses separate login (My Account) and register pages. In dashboard, go to WooCommerce settings and in the tab “Account & Privacy” uncheck the option “Allow customers to create an account on the “My account” page”. Now, create a common WordPress page, name it “Register” and select the template “Register” in Page attributes. Save it, and ready to use.
Create custom page with product categories
First, go to product categories in the dashboard “Products” tab, create a few categories and add a featured thumbnail to them. Now, in dashboard, create a common WordPress page and select the template “Product categories” in Page attributes. In the Content area, put the WooCommerce default Shortcode:
See demo here
Sources and Credits
- ACF Pro, © 2019 Elliot Condon, GNU GPL v2 or later.
- Bootstrap, © 2011-2018 The Bootstrap Authors, © 2011-2018 Twitter, Inc., MIT.
- Animsition, © 2017 Blivesta, Ungki And Contributors, MIT.
- PACE, © 2013-2018 HubSpot.
- Packery, © 2019 metafizzy, GNU GPL v3.
- Isotope, © 2019 metafizzy, GNU GPL v3.
- Flickity, © 2019 metafizzy, GNU GPL v3.
- Infinite Scroll, © 2019 metafizzy, GNU GPL v3.
- Images Loaded, © 2019 metafizzy, MIT.
- Font Awesome, © Fonticons, Inc.
- Bootstrap Ekko Lightbox, © 2019 ashleydw, MIT.
- Bootstrap Comment Walker, 2017 Aymene Bourafai, GNU GPL v2.
- Bootstrap Gallery, 2016 Edward McIntyre – @twittem, Brandon Hubbard, GNU GPL v2.
- TGM Plugin Activation, 2016 Thomas Griffin, @GaryJones, @jrfnl, GNU GPL v2.
- Modernizr, © 2019 Modernizr, MIT.
- Menu-Aim, © 2019 Ben Kamens, MIT.
- Pointy Slider, © 2016 CodyHouse.
- Woo Align Buttons (customized), © 2019 320up, GNU GPL v2 or later.
Images on the demo page are free-downloaded from Unsplash