The elegant, clean and minimalistic design makes Bottega the perfect theme for your new blog or web portfolio. With a fully flexible homepage and gorgeous contrasts, your website will definitely stand out.
WordPress is well-known for its ease of installation. Under most circumstances, installing WordPress is a very simple process and takes less then five minutes to complete. Many web hosts now offer tools to automatically install WordPress for you. However, we strongly recommend that you install WordPress yourself, the following guide will help http://codex.WordPress.org/Installing_WordPress.
Theme can be installed in two different ways:
- Installing through WordPress
- The traditional installation using an FTP client
Installing through WordPress
Go to your website’s WordPress dashboard, then go to Appearance -> Themes. Click on Add New, and then Upload from the navigation bar right below it. Click on Choose File, and browse your computer for bottega.zip file and click Install Now. After the installation is complete, click on Activate link.
The traditional installation using an FTP client
First things first, you will need an FTP client (FileZilla is free, easy to use and it works on Windows, Mac and Linux) to access your web host server. Once you download Bottega, find the bottega.zip file in the WP folder. Extract it, and upload it to your server in the ..wp-content/themes/. Once it’s done, activate the theme: go to your WordPress dashboard and navigate to Appearance -> Themes, search for Bottega and click the Activate link right below it.
First Steps After Theme Activation
Bottega uses static home page, but you will also need to create a posts page.
Go to your website’s WordPress dashboard, then go to Pages – > Add New. Create a new page – enter a title (e.g. Home) and select for page template Home Page. Click on Publish. Now create another page (e.g. Blog), with the Default page template, using the same method.
When you are done, go to Settings -> Reading. and set the theme to display static page. Then select previously create pages – for Front page select your desired page (e.g. Home), and for Posts page select your page with Default page template (e.g. Blog) . The page you select for your Post page will display all blog posts. Press Save Changes.
The next important thing to do is to set your permalinks. We strongly suggest the use of pretty permalinks. Go to Settings -> Permalinks and select Post name.
Bottega advanced features
To take advantage of Bottega‘s advanced features, you have to install and activate the Jetpack plugin.
Jetpack is a free plugin developed by Automattic – the same folks who make WordPress. Jetpack has a lot of features that will make your life a lot easier:
- Custom Content Types (Custom post type – portfolio)
- Contact Form
- Tiled Galleries
- Shortcode Embeds
- Extra Sidebar Widgets
- Widget Visibility
- Infinite Scroll
- Related Posts
- Custom CSS (edited)
- SEO tools
- Google Analytics
- Site Stats
Do I have to use Jetpack?
Yes. Jetpack is a mandatory plugin for the Bottega theme. It’ll let you include a lot of handy features to your site like security, design tweaks, backups, sharing and more.
To use Jetpack, please sign up for a WordPress.com account.
How do I install Jetpack?
Before installing, make sure you have:
- The latest version of WordPress.
- A WordPress.com account. Sign up for one here.
- A web site that’s publicly accessible (not hidden/private).
The easiest way to install Jetpack is from within WordPress itself.
Log in to your site and head to your dashboard, click on the Plugins tab in the left panel, then click “Add New.” If you search for “Jetpack,” you’ll find the latest version. Install it by clicking “Install Now”. After that you’ll have to connect your WordPress.com account.
After successfully connecting to your WordPress.com account, you’ll see a list of features Jetpack offers. Most of them are automatically activated.
For more details and support with installation, visit the official Jetpack installation guide.
How do I use Jetpack in Bottega?
Jetpack has “modules” – tiny features that let your site do more things. You can see which modules Jetpack has by going into Jetpack -> Settings. They’re divided into five categories (General, Engagement and so on).
We’ve highlighted the most important modules that work great with Bottega.
Custom Content Types (Custom post type – portfolio)
The Custom Content Types module adds custom post types (CPTs) to your site. These CPTs allow you to add content that doesn’t necessarily fit into a post, but isn’t right for a static page either. Since this is part of Jetpack, you can even switch themes without losing these custom post types!
Jetpack supports a few custom post types, but the most important one for Deppo is the Portfolio custom post. The Portfolio custom post type gives you an easy way to manage and showcase projects on your site.
Enable the Portfolio custom post type by activating the Custom Content Types module in your Jetpack settings, like shown below:
Then, go to Settings → Writing in your WordPress Dashboard and check the Portfolio Projects option under “Your Custom Content Types.” You can then choose to display the portfolio using the portfolio shortcode [portfolio] or with a link to the portfolio in the menu.
A contact form is a great way to offer your readers the ability to get in touch, without giving out your personal email address.
You can add a contact form to any post or page. To get started, click the contact form icon above the post editor. Note: you can only have one contact form per page.
With the Tiled Galleries module you can display your image galleries in three new styles: a rectangular mosaic, a square mosaic, and a circular grid. The rectangular and square tiled layouts also have hover-over captions to save space while making captions accessible.
To create your Tiled Gallery:
- Make sure the module is activated in Jetpack settings.
- 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 blog’s dashboard and select the box next to “Display all your gallery pictures in a cool mosaic.”
Go to Jetpack -> Settings -> Appearance and turn on the Carousel module. Once on, any standard WordPress galleries you have embedded in posts or pages will launch a gorgeous full-screen photo browsing experience with comments and EXIF metadata.
Once you activate the Carousel module, you will find the settings in your Dashboard under Settings -> Media.
For more information on Carousel and its options, see the official Jetpack Carousel documentation.
A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. A shortcode is like a shortcut.
Shortcodes allow you to embed videos from YouTube, tweets from Twitter, and other media across the web directly in to your WordPress-powered site.
The module also allows you to embed elements by pasting URLs on a line by itself in your visual editor.
For a full list of which shortcodes Jetpack support, see the official shortcode documentation.
Extra Sidebar Widgets
The “Extra Sidebar Widgets” module includes widgets you can add to your blog. From RSS Links to Twitter Timelines and Facebook Like Boxes to social icons, this module makes it easy to add extra functionality to your site.
Once enabled the module adds the widgets, login into WordPress admin panel and go to Appearance -> Widgets.
See the full list of all Widgets added by the Extra Sidebar Widgets module.
The Widget Visibility module enables you to configure widgets to appear only on certain pages (or be hidden on certain pages) by using the Visibility panel.
Visibility is controlled by five aspects: page type, category, tag, date, and author. For example, if you wanted the Archives widget to only appear on category archives and error pages, choose “Show” from the first dropdown and then add two rules: “Page is 404 Error Page” and “Category is All Category Pages.”
You can also hide widgets based on the current page. For example, if you don’t want the Archives widget to appear on search results pages, choose “Hide” and “Page is Search Results.”
Each visibility rule is handled separately. There isn’t a way, for example, to only display a widget on posts that are categorized as “Summer” and also tagged with “Picnic.”
Instead of having to click a link to get to the next set of posts, infinite scrolling pulls the next posts automatically into view when the reader approaches the bottom of the page.
Go to Jetpack -> Settings -> Appearance, and turn on the Infinite Scroll module. Then, in your WordPress dashboard under Settings -> Reading, make sure that “Scroll Infinitely” is checked.
The Sharing module gives your readers the tools to post your content to social networks from the bottom of each post and/or page.
First, make sure that the Sharing module is on. Go to Jetpack -> Settings -> Engagement and see if Sharing is turned on. Then, go to your dashboard Navigate to Settings –> Sharing in your site’s dashboard.
Under Sharing Buttons, drag and drop the services you want to use into the Enabled Services area.
Choose your preferred button style and where you would like the buttons to appear.
Hit “Save” in the end.
You can add Captcha and have more fun with sharing. Learn how at the official Jetpack Sharing module documentation.
The Related Posts feature scans all of your posts, analyzes them, and lets you show contextual posts your visitors might be interested in reading next.
Most sites who activate this see an increase in traffic. Unlike many other related post plugins, Jetpack does all the analysis, processing, and serving from its own cloud, so there is no additional load on your server. (That’s why many plugins like YARPP or Similar Posts are often banned by web hosts, but Jetpack Related Posts are allowed.)
Go to Jetpack -> Settings -> Engagement -> Related Posts to turn this module on.
What about all the other Jetpack modules?
Feel free to use them! Bottega supports Jetpack and its modules. We’d recommend turning on any module you need, and turning off any module you don’t need (so as not to overwhelm your site).
Does Jetpack offer support?
Yes. Jetpack offers full, free support. If you have a Jetpack related problem, please contact their support agents.
Importing Demo Content
IMPORTANT: Before importing content, please make sure to install and activate Jetpack. Make sure that JetPack is connected to your WordPress account.
One Click Demo Installation
You can make your website look exactly like a Bottega demo. This is handy if you are in a hurry and need to get your website quickly set up. Just don’t forget to change the posts and images with your own after you finish importing.
Go to your website’s WordPress dashboard, then head to Appearance -> import Sample Data.
First select the demo you want, then click Import Demo Data.
Please note the import will take a while – a lot of images and content need to be imported. Give it a few minutes.
Note: If the demo import suddenly stops, simply select same demo again, and click on Import Demo Data again. Depending from your server configuration, you might need to do this a few times.
This can be fixed by:
- Contacting your hosting provider, and asking them to increase
max_execution_timein your php.ini configuration.
- Contacting your hosting provider, and asking them to increase
- Add the s
et_time_limit(240);line to your wp-config.php file.
- Add the s
- Install the WP Maximum Execution Time Exceeded plugin.
Traditional Demo Import
Go to your Themes Kingdom account and click on the XML icon to download demo file.
After download is complete, you will need to import demo content:
- Login into your WordPress admin panel.
- Go to Tools -> Import.
- Click on the WordPress, install the plugin if you don’t already have it.
- When the plugin is opened click on the Choose File button.
- Select XML file you previously downloaded.
- Select authors to assign to posts. You may choose an existing author or create a new one.
- WordPress will then import each of the posts, pages, custom post types, comments, and categories contained in our demo version.
- Done! Very important thing to do after you are done with importing demo content is updating menus. To do that go to Appearance -> Menus. Select desired menu and under the Menu Settings at the bottom of the page check Bottegaary Menu, then click Save Menu button to save changes.
Here’s a detailed explanation how to Import demo content.
The Customizer is great WordPress feature which allows you to customize theme and set theme options. We will not explain all options, since some of them are WordPress standard. Theme specific settings:
- Site Identity
- Content Options
- Homepage Settings
- Featured Content
- Additional CSS
- Related Posts
- Font Settings
- Color Settings
- Theme Options
Site Identity allows you to set your site title, tagline and icon. Site title is the name of your site and it’s displayed in the header, where logo is displayed. Tagline is short description, or your motto, and it’s displayed just under the title. This setting is the same as in Settings -> General in WordPress admin panel.
- Logo: Upload logo for your site. Logo should be in PNG or JPEG/JPG format.
- Site title: Name of your site.
- Tagline: Site punchline.
- Display Site Title and Tagline: If enabled, both site title and tagline will be displayed. Tagline will be displayed under the title.
- Site Icon: The Site Icon is used as a browser and app icon for your site. Icons must be square, and at least 512px wide and tall.
This option allows you to quick manage created menus. You can select which created menu will be displayed as Bottegaary Menu or Social Menu. If you need to manage actual menu items, you can do that in Appearance -> Menu.
Content options panel contains settings for meta data for single posts and settings.
- Display date: If enabled, publishing date will be displayed on single and posts page.
- Display categories: If enabled, post categories will be displayed on single and posts page.
- Display tags: If enabled, post tags will be displayed on single and posts page.
- Display Author: If enabled, author will be displayed on single post and posts page.
- Display coment link: If enabled, link to the comments will be displayed under the post.
Additionally there are settings for featured image behavior.
- Display on blog and archives: If enabled, Feauted image will be displayed on the blog list page and on archives pages.
- Display on single posts: If enabled, featured image will appear on the single post page.
- Display on pages: If enabled, featured image will be displayed on the single page as cover image.
Widgets section allows you to quickly manage widgets in widget areas. This option allows you the same possibility as Widgets option in WordPress admin panel.
This option works the same way as Settings -> Reading. It allows you to set them to read latest post or to use static pages for landing and blog page.
Featured content is the slider that will appear on the homepage. Featured slider will display portfolio taggdd with the same tag. Portfolio items that appear in the slider must have set featured image.
- Tag name: Portfolio items tagged with the same term will be used in the slider.
- Do not display tag in post details and tag clouds: If enabled, tag used for the slider will not appear in tag cloud, or in the post meta data.
- Also display tagged posts outside the Featured Content area: If enabled, posts will appear both in the slider and on archives pages.
- Autoplay slider: Slider will automatically change the slides.
In additional CSS section you can enter your custom CSS classes, so you don’t need to mess with original styles, or create child theme. Of course, you should create child theme if you plan to modify other files as well.
Settings are only available when on preview is displayed single post. Using settings from JetPack Related Posts.
Font settings contain options to customize global font family settings for paragraphs, headings and the main navigation. Font settings is using Google fonts.
NOTE: This option will not work without Kirki plugin installed and activated.
Color settings allow you to easily customize global colors of the theme.
- Background Color: General background color on the all pages.
- Text Color: Content paragraph color.
- Headings Color: Color of all headings – H1, H2, H3 etc… including pages and posts headings.
- Main Header Color: Header navigation label color.
- Sidebar Background Color: Background color for widget area.
- Sidebar Text Color: Color of the text that will appear in the sidebar.
- Info Page Text Color: Footer credits and copyright color.
- Slider Arrow: If enabled, white arrows will be displayed on the main slider.
Theme options is the panel where can be tweaked theme-specific features.
- Footer Settings
- Header Settings
- Layout Settings
- Footer settings is used to insert custom details like copyright text, or address, or any other info that should be always visible.
- Footer can be set to always appear on the screen – with fixed position. Footer text field supports HTML formatting.
- Header settings panel holds option which defines main navigation behavior. Navigation can be sticky – it will always appear on the screen; or it can scroll together with the rest of the page.
- Sidebar trigger(widget area) can be disabled as well if you don’t use widgets.
- Main navigation dropdown: Hide main content on hover.
Bottega theme allows you to tweak layout specifc nuggets.
- Blog Post Single: Display media in separate block: If this setting is enabled, featured image will be displayed in the block inline with the content instead on the top of the single post.
- Portfolio Archive: Display title instead of cursor (on hover): Instead of using system cursor, portfolio item name will be displayed on featured image on hover.
- Portfolio Single Post: remove slide counter: If portfolio item have more slides, slider counter can be hidden.
- Show form buttons with animated arrows and without borders.
Bottega comes with only one menu location – primary menu.
The primary menu is located in theme’s header area. This menu can contain custom links, pages, categories, tags, or posts.
Social menu is used to display links to the social profiles. It’s hidden behind word Follow in the header.
Creating primary menu
Login into WordPress admin panel and go to Appearance -> Menus. Click on Create a new menu link. Enter name for your menu(e.g. Primary), and press Create Menu button. Your new menu is created. Now you can add your pages, posts, categories, tags and links to the menu. When you are done check option primary Menu and press Save Menu button.
- Click on “create new menu” to add new menu.
- Here you should define a name for your menu, after that click on the Create Menu button right next to it.
- Select pages you want to add to your menu. When you are done with selecting pages, click on Add to menu button below. You can also add custom links, posts, categories etc. as you can see in the panels below.
- If you want to customize or delete menu item, click on the arrow icon in the top right corner of the menu box to expand it. Inside you will find:
- This menu editor allows you to create multi-level menus. To do that simply hold your left mouse button and drag desired menu items left or right. Dragging menu items slightly to the right will make them sub-menus for the menu item that is above them. You can also change the order of appearance of menu items by dragging them up or down. Remember to save the changes when you are done with editing (No4).
- Set “Primary Menu” check box to checked if you want this to be your primary menu.
Since Bottega theme don’t have designated social menu area, you still can create custom menu with link to your social profiles. After creating that menu use Navigation Menus widget, and place it in the widget area.
Widgets are used to add content and features to your sidebar and footer. Adding and removing widgets is quite easy, just follow the instructions below:
Login into your WordPpress admin panel and navigate to Appearance -> Widgets.
- Choose a widget you would like to use, and drag it into the sidebar to right (shown in No 3). Widgets will become active after a page refresh.
- Widget area where you place desired widgets.
- You can add, remove or customize widgets in widget areas. To do that click on the arrow icon in the top right corner of the widget box to expand it. You can also change the order of appearance by simply dragging widgets up and down.
Bottega theme have only widget area which is hidden behind the button in the header.
If you have enabled Widget Visibility feature from JetPack, you will be able to set widget visibility depending from post or page. Visibility works in simple if or if not logic. This means that you can set widget to be visible if some condition is, or if it’s not matched. Widget visibility options will be displayed as part of the widget.
Show widget only on contact page: Select from dropdown Show only, and then from list check box near your contact page. Save changes. This way widget will be displayed only on contact page.
Hide widget only on contact page: Select from dropdown Hide, and then from list check box near your contact page. Save changes. This way widget will be hidden only on contact page.
Posts are content that is displayed in reverse chronological order. Posts can be organized into different categories, and have meta data (publishing date, author, tags).
- Post title: Name of your post. It will be displayed on the front end.
- Post content: Content of your post – text, images, shortcodes and other.
- Publish: Publish options. You can set custom date and time for publishing your post, and set post status – draft, in review or published.
- Format: Post can be displayed in Standard or Gallery format.
- Category: Each post in WordPress is filed under one or more categories. This aids in navigation and allows posts to be grouped with others of similar content.
- Tags: Tags are words that allows you to organize posts by similar content.
- Set featured image: Featured image will be used as cover image on front end.
Pages are for content such as About, Contact, etc. Pages live outside of the normal blog chronology, and are often used to present timeless information about yourself or your site — information that is always applicable. You can use Pages to organize and manage any content.
Bottega theme uses different page templates to display different information. Included page templates:
- Default Template: Default Template is multipurpose page template, without any special property.
- Info: A simple template, with huge typography and featured image in the background.
- Portfolio Template: On page with Portfolio Template will be displayed all Portfolio items.
Images on text hover
In our demo, on Info page, if you hover over word JAW-DROPPING, you will notice that the image will appear.
You can use this effect on any post or page.
Image will appear on the hover. You can insert any image.
Portfolio is a custom post type that comes with Bottega. Portfolio posts are used to display your work on a page with a Portfolio Template. Portfolio items can be associated with Portfolio categories.
- Project name: Enter your project name.
- Project content: Content of your project – text, images, shortcodes and other.
- Publish: Publish options. You can set custom date and time for publishing your project, and set project status – draft, in review or published.
- Project Types: Types are the same as categories. Each project can be filed under one or more categories. This aids in navigation and allows projects to be grouped with others of similar content.
- Project Tags: Tags are words that allows you to organize portfolio items by similar content.
- Sharing: If enabled, sharing button will be displayed on single portfolio page.
- Set featured image: Featured image will be used as cover image on front end, and displayed on single page as well.
Custom font sizes
In Bottega theme extra large fonts can be set using custom CSS classes. Element with class lg-font-size will set fonts inside that element to 160px, and class xl-font-size will set font size 200px.
Something even more awesome...
Classes can be used with spans, divs, a, etc…
If you need additional assistance for this theme, please submit a ticket in our support system.