Video Tutorial

1. Theme Installation

After the successful theme purchase you will receive an email including your individual theme download link. With this link you can download your Baylys theme folder (.zip file).

1.1. Installation via the WordPress admin panel

After downloading the baylys.zip folder to your computer just go to “Appearance / Themes” in your
WordPress admin panel and choose the “Install themes” tab menu. At the top of the page you find the smaller navigation link “Upload”. Via this link you an choose to upload your the baylys.zip file and click the “Install now” button. The Baylys theme will now be your active theme.

1.2. Installation via FTP

Alternatively you can also install the theme directly to your server with a FTP client (e.g. Filezilla). Just drop the un-ziped Baylys theme folder into your …/wp-content/themes/ folder. Now you can see the Baylys theme in your WordPress admin panel under “Appearance / Themes / Available Themes”. From there you can activate the Baylys theme.

2. Theme Options

On the theme options page at “Appearance / Theme Options” you can find several easy-to-use options to customize your Baylys theme (see a screenshot of the theme options).

2.1. Custom Colors

First you can choose your own link color, link hover color and the footer background color by typing in a hex color value (#……) or by just clicking into the color field and using the color picker to choose your own colors.

2.2. Layout Options

Now you can choose if you want to use the Baylys theme with a right sidebar, a left sidebar or in the single column layout options without a sidebar.

2.3. Logo, Post Excerpts and Footer Text

Next you can upload your own logo image via the media uploader and include the image file URL into the custom logo theme option. It’s best to use a transparent PNG as a logo image. The logo image size is not fixed, but a 250 x 40 pixel image (or similar) is recommended.

In case you don’t want to include the more-tag into your posts you can check the Posts Excerpts box and show automatic post excerpts on your blog. Excerpts will only be used for standard posts, not on your post format posts.

If you want to customize the themes footer text (see Copyright, WordPress link and theme info link) you can include your own footer text in the theme option Custom Footer Text.

2.4. Portfolio Category

If you want to use Bayls Portfolio page template on your site (see Portfolio example at the Baylys live demo), you can choose the ctegory slug of the category you want to use as your portfolio category. You can find the correct cetgory slugs under “Posts / Categories”.

2.5. Favicon and Apple Touch Icon

To include your own favicon you need to create a 16×16 pixel jpg image and generate a .ico favicon file using and online favicon generator (like faviconr.com). Now you have to upload the favicon.ico file into your Baylys theme folder via an FTP client and paste the favicon URL into the “Custom Favicon” text field on your theme options page.

The Baylys theme also supports an Apple touch icon, so your blog can be saved with a nice App-like icon on iOS devices. Just create an 128×128 png image and upload your image using the media uploader. Copy and paste the file URL into the Custom Apple Touch Icon text field. You don’t need to create rounded corners or any glossy effects for your icon since Apple renders your icon automatically with these effects.

2.6. Share Buttons (Twitter, Google+, Facebook, Pinterest)

In the next theme option you can activate share buttons for Twitter, Google+, Facebook and Pinterest. Optional you can choose to show the buttons on your blogs front page and on single post pages, only on single post pages and/or on your blogs pages.

2.7. Responsive Slider

To use Baylys with an image slider on the front page you have to install the WordPress plugin “Responsive Slider” first. After you installed and set up your slider (see admin panel Slides / Settings and Add New Slide: Your slider images should be 1400×550 pixel), you can automatically include your slider in the Baylys header area (on your front page or blog page) by checking the “Include Responsive Slider” checkbox on the theme options page.

2.8. Custom Header Image and Custom Background

Additionally to the options on the theme options page you can also use the Header Image option (Appearance / Header) and the Custom Background option (Appearance / Background). You can use one of the included header images or just upload your own images in the size of 1400x550px. If you upload more then one header image you can choose the “Random images” option to rotate your header image on page load.

You can also customize the background of your blog with a different background color or by uploading a custom background image. You can find this option in the admin panel under “Appearance / Background”. You can either choose a background image (e.g. a pattern image) or a color as your background. If you choose a background image you should make sure that the file size of your image is not very large in file size so that it will not take too long to load your website into the browser.

It’s a good idea to use a smaller image like 100×100 px and repeat the image using the display options (choose “tile” below the background image preview). A great website offering free, beautiful background patterns is subtlepatterns.com.

3. Custom Menus

In the admin panel under “Appearance / Menus” you can set up your 2 custom menus for the Primary Navigation (at the right top of the header area) and the optional Footer Navigation (at the bottom of the footer). The optional footer navigation does not support sub menus.

You can create custom menus by adding any number of custom links, pages, categories, tags, post formats or posts and save them to your created menus. If you drag’n’drop the included menu items to the right you can create sub menus. Now you can choose your saved menus to be used in your theme via the “Theme Locations” box (see left top box in Custom Menus).

4. Widgets

The Baylys theme offers 3 main widget areas, the Left Sidebar widget area, the Right Sidebar and the Footer Widget Area with the widget areas “Footer One-Column, Footer 2-Columns Left and Footer 2-Columns Right” (to include widgets in the footer in a single-column or two-column layout).

Next to the WordPress standard widgets and the supported Jetpack plugin widgets (e.g. Twitter widget, Image Widget or Email subscription widget) you can use the following custom Baylys widgets:

4.1. Baylys Social Links Widget

With the Social Links widget you have the option to link to your different social profile sites like Twitter, Facebook, Google+, YouTube, Flickr and many more via nice looking social icons. Just paste the URLs you want to include into the provided URL field and save your settings. At the bottom of the widget you can also choose to open all links in a new or in the same browser window.

4.2. Baylys Flickr Widget

The Flickr widget gives you the option to include a preview of your latest or a random collection of your Flickr images. You can choose the number of images to show and add an additional link to your Flickr profile.

4.3. Baylys Featured Video Widget

The Featured Video widget is a very easy to use widget to show your favourite YouTube or Vimeo video in your sidebar or footer. Just include the embed code into the text area and choose a widget title if you want to use one. The video will skale automatically on different screen sizes.

4.4. Baylys About Widget

The Baylys About widget offers you an easy option to tell your readers more about you and also include a profile picture in the widget. You can include your picture URL, the width and height value of the image (without px) and anabout text (you can include HTML code in the text).

5. Post Formats

In the Baylys theme you can use all WordPress post formats:

Aside, Status, Link, Quote, Image, Gallery, Video, Audio, Chat

You can choose a post format in the field “Format” while writing or editing your posts. With post formats you can create a more exciting reading and fun experience for your blog readers by including single videos, quotes or images as blog posts.

5.1. Quote

To create a quote you can use the “Blockquote” symbol in the Visual text editor or the b-quote button in the HTML editor. Then your code should look like this:

[code]

<blockquote>Your quote text here…</blockquote>

[/code]

If you want to include the quote author (maybe with a link) you can add the cite-tag in the following format:

[code]

<blockquote>Your quote text here…

<cite><a href=”http://linktoquoteauthor.com”>Quote Author</a></cite></blockquote>

[/code]

5.2. Video

To post a video just select the video post format and paste the embed iframe code from a YouTube or Vimeo video into your post. If you have trouble embedding the iframe code (in some cases the iframe code gets deleted after saving or editing a video post) you can install the Iframe WordPress plugin.

5.3. Link

To use the link post format your can include your link into the post and add a CSS class of “link” in the HTML editor:

[code]

<a class=”link” href=”http://linkurl.de/”>Das ist der Linktext</a>

[/code]

5.4. Gallery

For the gallery post format you can just upload some images to your post using the WordPresss “Add Media” uploader button. Inside the media upload lightbox window you can choose “Create a gallery” and select your images.

The WordPress gallery shortcode “gallery” will be included automatically into your post.

Your image thumbnails should be at least 250px in width. You can change the thumbnail size via “Settings / Media” in the WordPress admin panel. If you are using Baylys Portfolio page template your thumbnails settings should be set to 340 x 280 px and the “Crop thumbnails” checkbox should be checked.

If you need to resize older thumbnail images you can use the WordPress plugin “Regenerate Thumbnails”.

For further options using the WordPress image gallery please have a look at the official WordPress codex.

5.5. Image

To use the Image post format just include an image in your post as usual using the “Upload/Insert” media uploader. Images should have a width of 890px.

5.6. Audio

For audio posts you can use the Soundcloud iframe widget from soundcloud.com (of course you can also choose any other audio player). The Soundcloud widget is easy to use and also has a WordPress plugin for Soundcloud shortcodes.

5.7. Chat

To style the chat post content you can create a ul list element with the class of “chat” and give the li list elements classes of odd” and “even”:

[code]
<ul class=”chat”>
<li class=”odd”>Text 1…</li>
<li class=”even”>Text 2…</li>
<li class=”odd”>Text 3…</li>
<li class=”even”>Text 4…</li>
</ul>
[/code]

6. Page Templates (No Sidebar, Full Width, Portfolio)

On pages you can choose custom Baylys page templates at “Page Attributes / Temptlate”. The Fullwidth page template works great to include the multicolumn shortcodes (see Shortcodes).

With the Baylys Portfolio page template (see a portfolio example in the Baylys live demo) you can create a page showing a preview with thumbnails of all your post in the portfolio category (you set up on the theme options page). Your thumnail image settings should be set to 340 x 280 px with the “Crop thumbnails” checkbox should be checked. To include the portfolio intro text just write some text on your portfolio page.

7. Author Box on Single Posts

If you want to show an author description text at the end of each standard post you only need to fill out the “Biographical Info” in the WordPress user profile. You can also insert links or other standard HTML.

8. Shortcodes

Baylys offers shortcodes for for multicolumn content, info boxes and buttons. You can find all shortcode codes ready to copy/paste on the Shortcode example page at the Baylys live demo.

9. Theme Translations

Baylys is ready for theme trans­la­tions. You can add your own trans­la­tion or cust­o­mize an exis­ting trans­la­tion easily using the WordPress plugin Codestyling Localization. You can also find a detailed plugin description on the plugin homepage.

10. Child Theme for Customizations

If you want to cust­o­mize the Baylys theme a little further and you the­re­fore want to change the code in the styleeheet (style.css) or in any of the theme tem­plate files please con­sider crea­ting a child theme for your changes.

Using a child theme is actually quite easy and it saves all your indi­vi­dual changes from being over­written by a future update of the Baylys parent theme. You can find more infor­ma­tion on crea­ting a child theme in the article “WordPress Child Theme Basics” on the Themeshaper blog.

To get started you can download the sample child theme folder at the Baylys theme page (Download: Baylys Child-Theme).