You need a working copy of the newest WordPress installed on your own server (wordpress.com hosting doesn't allow custom themes) in order to start. You should know how to use it (e.g. how to enter admin panel, how to write posts etc.). This may help you: New To WordPress - Where to Start.
Follow the steps below to install the theme:
Note: You can also manually import the demo content by importing the XML files available in /admin/auto-install/ in Tools → Import but then the sidebar and the footer will require manual configuration.
The header consists of a logo, a menu and portfolio categories filter.
Logo — you can upload your image logo in Konzept → General. It accepts JPG, PNG, SVG and other image formats. If an image is not uploaded, your blog name and description will be used as text.
Menus — you can configure the menu in Appearance → Menus. Attaching a menu to the "Main Menu" location is required.
Portfolio Categories Filter — it lists portfolio categories of the current portfolio page and portfolio categories of the main portfolio page on all other pages. You can set your main portfolio page in Konzept → General → Main Portfolio Page.
You'll find all your current pages in Admin Panel → All Pages. Below you'll find a short description of each page.
About Us — you can use the columns shortcodes to create two columns with text. On the demo there are two additional, narrow and empty columns on the sides that make the content a little bit narrower. This reduction is for aesthetic purposes only.
Services — services can be added to "Services" page with the following shortcode:
[content_block title="Service Name" icon="t"]Service Description[/content_block]. For more information please visit the Content Block Shortcode section.
Our News — please use the following shortcode to make news appear:
[content_block post_type="news" posts_per_page="15"]. News can be added in Admin Panel → News → Add New. News are just an alternative to blog - you can use short news instead of long blog posts. Please note that /news/ slug in the URL is reserved for news archives and can't be used for pages. Please use /our-news/ or other slugs instead.
Coming Soon — it is a Dribbble feed. Please use the following shortcode to load your recent Dribbble works:
Blog — your front page is a blog by default. You can move it to a subpage using Settings → Reading → Posts page. Your blog page will display full posts with HTML formatting enabled unless you use the more tag. This will produce "Continue Reading..." message and will cut the post. You can also specify a manual excerpt in Posts → Add New → Excerpt and this will be shown instead of the beginning of a post. If you don't see the "Excerpt" box please enable it in the top right corner of the admin panel in "Screen Options".
Contact — you will need Contact Form 7 plugin to make the form appear. You can create a new form and obtain a shortcode that makes it appear in Admin Panel → Contact. You can then paste the shortcode in Pages → Contact or on any other page.
Example contact form:
[text* your-name id:your-name watermark "Name *"] [email* your-email id:your-email watermark "Email *"] [textarea* your-message id:your-message watermark 40x6 "Message *"] [submit "SEND"]
Note: Both new posts and new pages have comments enabled by default. To disable them for both you can uncheck Settings → Discussion → Allow people to post comments on new articles. To disable them for pages only you can do that in Pages → (your page) → Allow Comments. If the box with "Allow Comments" checkbox is not visible please enable it in the top right corner in "Screen Options". You can also update multiple pages at once in Admin Panel → All Pages by selecting them and by picking "Edit" above the list in "Bulk Actions" drop-down menu.
Portfolio Pages — you can create portfolio pages in Pages → Add New. Each one has to have "Portfolio Template" selected in the box to the right. Once this template is selected and once you save and refresh the page, new options specific to "Portfolio Template" will appear. You can use them to change the portfolio mode between "Thumbnails" and "Text", exclude some categories from being displayed or change order in which works are presented.
Main Portfolio Page (required) — it's required that you select you main portfolio page in Konzept → General → Main Portfolio Page. This page's categories will be displayed in the header on all pages other than portfolio pages. Portfolio pages will display their own categories filter.
Projects — projects can be added in Portfolio → Add New. Each one needs to belong to at least one category. Each project supports images, YouTube videos, Vimeo videos and HTML5 videos. Videos are always fullscreen and images have a few additional modes available:
You can pick one of these modes globally in Konzept → General → Slide Classes (default) and all slides will be using this setting. It's a good idea to put "fullscreen" word in that place and all your projects will have fullscreen images by default. You can override this setting for each image individually while creating a slide. So, for instance, some specific images of your choice can have "fit" instead of "fullscreen".
By default your homepage is the blog. You can switch that to a static page or a page with the Portfolio Template selected in Settings → Reading → A Static Page → Front Page. The demo uses a page named "Homepage" as the front page. It's set to have the Portfolio Template and to be the "Main Portfolio Page" in Konzept → General.
Featured Slideshow is a slideshow that can be displayed on the front page, before your visitors see any other content. You can enable it in Konzept → General → Featured Slideshow. You can add slides in Admin Panel → Slideshow → Add New. Featured Slideshow supports images and HTML5 background videos.
In Appearance → Widgets you'll find a widget area called "Sidebar 1". Adding widgets to this one will make them show up on pages that have sidebar enabled. You can enable sidebar for pages in Pages → (your page) → Layout.
Please find Konzept → General → Footer Layout in your admin panel. This field accepts a comma-separated list of columns CSS classes. You don't need to know anything about that if you just need it to look like the demo footer.
Creating a footer column creates a new widget area available under Appearance → Widgets. You can create any footer layout and you can use any widgets in footer's columns but as long as the footer is floating over the content there's not much space there. Customization options for the footer are present just in case you wanted to make your footer be taller and be present at the bottom of the content. That's possible with minor style adjustments.
The demo code for Konzept → General → Footer Layout:
grid_12 last grid_responsive_only, grid_6 widget_no_margin, grid_6 widget_no_margin last
Text Widget in "Footer 1" in Apperance → Widgets:
Text Widget in "Footer 2" in Apperance → Widgets:
Text Widget in "Footer 3" in Apperance → Widgets: Note: Font Awesome Icons Map.
Generally, if a plugin exists for something you need, it should be used. Shortcodes, forms, columns, SEO settings, Google Analytics code and similar things need to be added with plugins to have it still working when you switch themes.
This theme requires Contact Form 7 plugin if you want to have a working contact form on the "Contact" page.
Multiple columns of content can be added using any plugin created for that purpose but there's also our built-in grid system that is used for footer but can be used for posts and pages as well. Column classes can be added to
div elements. Available classes:
divthat can optionally have
3rem(48 pixels) of bottom margin. When you create new footer columns you may sometimes need to eliminate that. It works for desktop computer resolutions only. Mobile phones will always have that bottom margin.
Two columns example:
This shortcode creates a carousel of items. It can display titles, short descriptions and images. On the demo website there are two examples of such slider.
Services page uses the following shortcode for each carousel item:
[content_block title="Service Name"]Service Description[/content_block].
News page uses the following shortcode to list news:
[content_block post_type="news" posts_per_page="15"]. You can add news in News → Add New.
news. If this is specified other options such as "title", "link", "icon" etc. won't work.
All custom modification should be done in a child theme. The WordPress article covers most of what you need to know about child themes.
The theme is based on Underscores framework which is a set of basic starter files that the default themes use. We use the default WordPress themes as reference as well so you can check their functions.php to see how to unhook filters and actions, learn which files and functions can be overwritten (presentational) and which can't (core) etc.
Big thanks to all the great designers who have provided preview content for Konzept.
The designers listed above agreed to use their works as preview content for the demo website but these works can not be used elsewhere. They are not included in the package. Thank you!