LizardThemes.com Free & Premium WordPress Themes LizardThemes User Guide First Edition Online version: http://lizardthemes.com/documentation/ 2013
Contents Chapter 1 How to start... 3 Chapter 2 Theme Settings... 4 2.1 General section... 4 2.2 Slider section... 4 2.3 Showroom... 5 2.4 Layout... 5 2.5 Social... 5 2.6 SEO... 5 2.7 Menus... 5 2.8 Integration... 6 Chapter 3 Customizing a theme... 7 Chapter 4 Theme Elements... 9 4.1 Logo... 9 4.2 Search... 9 4.3 Secondary and Main Menus... 9 4.4 Slider... 9 4.5 Showroom... 11 4.6 Left and Right Sidebars... 12 4.7 Social Buttons... 12 4.8 Footer... 12 Chapter 5 Contact Form... 13 Chapter 6 Shortcodes... 14 6.1 YouTube... 14 6.2 Vimeo... 15 6.3 SoundCloud... 15 6.4 Columns... 16 6.5 Buttons... 16 6.6 Tooltip... 16 6.7 Map... 17 6.8 Highlights... 18 Chapter 7 Widgets... 19 7.1 Comments with Avatars... 19 7.2 Post with Images... 19 7.3 Facebook Like Box... 20 7.4 Social Profiles... 20 7.5 Video feed... 20 Chapter 8 Changing Font... 21 Chapter 9 Translating... 22
How to Start 3 Chapter 1 How to Start First of all you need to download and install WordPress on your server. You can find instructions on page http://codex.wordpress.org/installing_wordpress. Then download a theme from our catalog to your computer and follow the next steps: 1. Log in to the WordPress Administration Panels. 2. Select the Appearance panel, then Themes. 3. Select Install Themes. 4. Use the Upload link in the top sub-menu to upload a zipped copy of the theme that you have previously downloaded to your machine.
Theme Settings 4 Chapter 2 Theme Settings Most of the theme options you can find on the theme settings page in your dashboard. As an example we use the theme Frau, so the page in the dashboard for us will has the same name. You can get access to this page using left menu of your dashboard. Each option of the theme settings has detailed description right in your dashboard, so we will not talk about each option here. Instead we will talk about sections. Take time to read descriptions of each option you are going to change, and you won t make mistakes. Figure 2.1 Settings menu. 2.1 General Section This is the first section of the theme settings. It features the most important settings, which will take effect on all your pages. Each page of your website will contains logo, title, favicon, (icon at the top of your web browser), and a text (copyrights, or contact information) at the bottom of your pages, called footer. 2.2 Slider Section Slider is the first thing that your visitors will see, since it has the biggest size on your page and it is placed at the top of page, so it is an excellent place for the most relevant products, important promos, or something like this. It is important to capture the visitor's attention and spark his interest in the first seconds of the stay on the site, like the saying goes A bad beginning makes a bad ending, so we advise you to pay special attention to the slider. In this section you can turn on or turn off slider on inner pages. Sometime it is better to show page content at the top and don t force users to scroll through the page. Specifying speed and delay for changing slides, you should pick up the values, with which users will have enough time to review the slides before the change. In the last option you can choose a slides changing effect.
2.3 Showroom Theme Settings 5 Along with the slider, showroom is one of the most eye-catching elements on the page. As a showroom source you can use any type of records on your website (http://codex.wordpress.org/post_types). This means you can create some pages on your site, set featured images for them and set Pages as a showroom source. Advantageous position of this element on the website and images of the pages are bound to attract attention of your visitors, and forward them in the right direction for you. You can also use showroom with custom post types, for example products of your website, if you use ecommerce store plugin, or portfolio pages, if you are using portfolio plugin, or others. 2.4 Layout This section features settings for sizes of image in your posts, its positions, length of the text in the feed, or other elements such as pagination or related posts. Last two options help to increase average visit duration of your website. With dynamic pagination visitors do not need to click next page link, posts will be uploaded dynamically by a single thread. However if you need more page views instead of visit duration, it will be better to use standard type of pagination. Related posts is a feature that offers to your readers a list of related articles at the end of each post. It will also allow you to keep users on your site. 2.5 Social Let people know about your website. Box with social buttons is the easiest way to share your links with friends, using popular social services like Facebook, Twitter and others. Sure your visitors have friends with similar interests who will also be happy to visit your website. This is the web version of Word-of-mouth marketing which is really difficult to overestimate. 2.6 SEO This is the section for Search Engine Optimization. Here you can specify which pages will be ignored by search engines, and add keywords, or specify the keywords for which your site will be found. SEO is one of the most important topics for any site. This section presents only the most basic settings. 2.7 Menus Here you can choose the appropriate effect to the drop-down menu, and specify delay for it.
2.8 Integration Theme Settings 6 In this section you can integrate third-party services with your website. This is the best place for Google Analytics code, your custom CSS, or something else.
Chapter 3 Customizing a Theme Customizing a Theme 7 First of all you should determine which of the theme elements you need. And remove all unnecessary elements or add something that does not suffice. To do that just use the following instruction: 1. Open your website front page, under Administrative account. 2. Click Customize at the top of your page to manage page elements. Figure 3.1 Customize Button. 3. After clicking it, you will see selection of elements, and three buttons at the top of each selection, which have the following functions: - remove element - edit element - get support on lizardthemes.com. 4. To show again a removed element, use menu Elements in the top of your page. You will be able to change elements on your website in any time. Following elements are available for your page: Logo Search Secondary and Main Menus Slider Showroom Left and Right Sidebars Social buttons Footer Figure 3.2 Elements list.
Customizing a Theme 8 5. When all the necessary for your website elements remains on the page, save this configuration using button Save Changes in the top of your page, which is green in the customizing mode. Figure 3.3 Save Changes button.
Theme Elements 9 Chapter 4 Theme Elements 4.1 Logo A logo is a graphic mark or emblem commonly used by commercial enterprises, organizations and even individuals to aid and promote instant public recognition. If you do not have your own logo, you can create it right now. Each theme from LizardThemes.com has a PSD file of the logo which comes with a theme. It is in the directory /psd of the theme. This logo design best fits the theme that uses it. So you can open this file in Photoshop, write title of your website instead of a standard text there, then save it as png or jpeg and upload to your website, using option Logo on page General of the theme settings in your dashboard. 4.2 Search Search box in the header as well as search widget in the sidebar provides internal site search functions. Your visitors can type there a term or phrase, and get a list of pages that contain what they are looking for. It is a very simple tool, but your visitors will certainly be thankful for it. 4.3 Secondary and Main Menus It is really difficult to imagine a website without a menu, unless it contains only one page. Menus on your website like a navigator for your visitor that will not allow them to get lost on your site. Our themes come with two menus: main menu, which is bigger and shows a list of categories of your posts; and an extra menu, which shows a list of pages. To change menu items, all you need is to open page Appearance->Menus in your dashboard, create a new menu there, and assign it for main menu or extra menu. Since menus are a standard WordPress function, you can find more information about managing it on page http://codex.wordpress.org/appearance_menus_screen. 4.4 Slider Slider is a tool that allows you to display a lot of information in a small area. Information in it is separated into slides, which succeed each other with a delay. You can add slides to your pages in the same way as posts or pages. Just click tab Slides in your dashboard, then click Add New. After it you will see a page similar to the posts adding page, except some differences. Let s talk about them. First of all content area in the text editor (white area) has the same sizes as slide of your theme. This is the background of your slide. You can change its color using meta box
Theme Elements 10 Slide Options in the right part of the page. Click Background Color and pick up a color for the background of the slide in the appeared pallet. Figure 4.1 Setting slide Background. To add text or image on your slide, click Add Element ( ) in the text editor s toolbar. Immediately after that you will see new block with a text on your slide. You can change content of this block as well as the content of the post. Just type there your own text or insert image. You can add elements on a slide as many as you need. To make some other modifications with element, it must be selected. To do that, double-click anywhere in the element. After that block you clicked on will have a frame. Now you can change position of the element. Just move your mouse over the slide and you will see that block moves with your pointer. Click twice on it again to hold block on new place. While block has a frame (in other words while you have selected block), you can change some styles of it using meta box Element Options. You can see there three properties of it: background, border, and padding. Figure 4.2 Slide element Styles. You can modify them in one of two ways: 1. Type values in the text fields as normal values for the style sheet. You can find more information about how to do that for a specific field on the following pages: Background: http://www.w3schools.com/css/css_background.asp Border: http://www.w3schools.com/css/css_border.asp Padding: http://www.w3schools.com/css/css_padding.asp 2. Use the dialog boxes for each property. To do that click and fill appeared form. To remove an element from the slide make it selected by double click, then click Remove Element ( ) in the text editor s toolbar.
4.5 Showroom Theme Elements 11 Showroom is one of the most eye-catching elements on the page. It can be used for displaying most relevant pages of your website, which may include conventional static pages or all kind of posts, such as blog posts or products, sold on your website. You can manage showroom options in section Showroom of theme settings in your dashboard. First of all you need to decide what type of posts will be displayed in the showroom. You can choose one of the available types in option Showroom Source. If you do not use any third-party plugin on your WordPress, then you can see there only two types of post: pages, and posts. As soon as you enable any plugin that uses custom post types, you will see there more types of post. For example on figure 4.3 you can see 4 new post types: Products, Variations, Orders and Coupons, which came with WooCommerce plugin. Figure 4.3 Custom post types. When you have selected the post type for showroom, it is time to decide what posts will be displayed there. It might be all posts of the selected type (last records will be displayed), or several posts, on your choice. If you would like to use first variant, then turn off option Show only records marked for Showroom. If you do want to choose which posts will be displayed in the showroom use following instruction: 1. Turn on Show only records marked for Showroom and click Save Changes. 2. Click post type caption in the left navigation bar of dashboard to open posts list. 3. Find the first of the needed posts and click Edit under its caption. 4. Enable option Show this record in the showroom on the next page. 5. Click Update. 6. Repeat steps 3-5 for each needed post. Figure 4.4 Showroom meta box on Post Edit page
4.6 Left and Right Sidebars Theme Elements 12 Sidebar is an area on your website that is located on the side of the main content. Sidebar used for secondary content purposes, such as displaying the latest comments, ads, Facebook widgets, shopping cart and many others. Using our themes you can enable left sidebar, right sidebar, both sidebars or disable it. What is the most suitable template for you completely depends on your website purposes. To apply a template for whole website you can use instructions from the Chapter 3: Customizing a theme. If you want to use different template for a particular page on your website, use the following instruction: 1. Find this page in your dashboard and click Edit under its caption. 2. In the meta box Select page template on the next page select the template you want to use. 3. Click Update Figure 4.5 Page template meta box on Post Edit page. Of course your sidebars should contain some widgets. You can add them on page Appearance->Widgets in your dashboard, using the instruction from http://codex.wordpress.org/appearance_widgets_screen. 4.7 Social Buttons Box with social buttons is the easiest way to share your links with friends, using popular social services like Facebook, Twitter and others. Sure your visitors have friends with similar interests who will also be happy to visit your website. This is the web version of the Word-of-mouth marketing which is really difficult to overestimate. To manage it open section Social on the theme settings page in your dashboard. There you can see a list of available social services, which provide social buttons. Just click the needed service in this list to add it to the Social Buttons on your website. 4.8 Footer Footer section is similar to sidebars, but its content usually is less important then content in sidebars. There are three columns in our themes footer. Thay can be managed as sidebars on page Appearance->Widgets using the instruction from http://codex.wordpress.org/appearance_widgets_screen.
Chapter 5 Contact Form Contact Form 13 Each our theme features Contact Form template. You can use it to get feedback from your visitors. To add contact form to your website: 1. Click the Pages tab in your dashboard. 2. Click Add New. 3. In the meta box Page Attributes, which is in the right part of your screen choose Contact Form for the option Template. 4. After that, block Feedback Options will be visible under the text editor. Configure your contact form and departments info using this block. 5. Add some content to the text editor. It is a good place for the information about your operation time, or map with your location. 6. Click Publish. Figure 5.1 Example of Feedback Options Meta Box.
Chapter 6 Shortcodes Shortcodes 14 Our framework comes with set of additional shortcodes, which you can use for formatting content. Figure 6.1 Text editor s toolbar. 6.1 YouTube Using this shortcode you can add a video from popular video-hosting to your content. Just click the YouTube button in the text editor toolbar, and in the appeared window type identifier of the video that you want to show in the post. You can find an identifier in the URL of video on YouTube. For example for the video http://www.youtube.com/watch?v=xqxgb8uenrq id is XQXgB8uenRQ. Figure 6.2 Video from YouTube example.
6.2 Vimeo Shortcodes 15 This shortcode is also for embedding video to your posts, but from Vimeo. You can find video identifier similary way. For video http://vimeo.com/32238183 id is 32238183. Figure 6.3 Video from Vimeo example. 6.3 SoundCloud SoundCloud.com is a great hosting for audio tracks. With our framework it is possible to insert any audio track from SoundCloud to your blog. To do that, find needed track on soundcloud.com. Click Share, copy the code from the field WordPress Code, and paste it into the post. Figure 6.4 Audio embedding example.
6.4 Columns Shortcodes 16 You can separate content of a post by columns. Click Columns in the text editor toolbar, and then click the layout you want to use in the appeared window. Immediately after that columns will be added to your post. Figure 6.5 Columns types window. 6.5 Buttons Buttons are good for catching attention of your visitors. To try it, click Buttons in the text editor toolbar, then click the appropriate button in the appeared window, and in the next window type URL of the page, where user will be forwarded after click button, click Ok and immediately after that you will see button in your text editor, you can edit text of this button right there. Figure 6.6 Button types. 6.6 Tooltip Sometime you may have the content, that requires hint, but you can t paste the clarification right in the content, or can not to forward a user to another page to get it. Tooltips can help you with that. Just select a text that needs hint, click Tooltip, and enter a content of the hint in the appeared window. This element will be highlighted in the text with dashed underline, and when user hovers the pointer over it, without clicking, the tooltip will be displayed.
6.7 Map Shortcodes 17 If you need to show to your visitors some place on the map (for example the address of your office on the contact page), you can use shortcode Map. Just click it in the text editor toolbar and type the needed address in the appeared window. Figure 6.7 Setting address for map. Then click Ok. After that the following shortcode will be added to your content: [map address="machu Picchu, Peru" type="hybrid" zoom="16" /] This is sufficient to display a map on your page, however there are some attributes that might be useful for you, and you can change the map display by changing these attributes. Type: The following map types are supported: roadmap - normal, default 2D map; satellite - photographic map; hybrid - photographic map + roads and city names (default value); terrain - map with mountains, rivers, etc. Zoom: This attribute defines the resolution of the current view. It supports integer value from 0 to 21.
Shortcodes 18 Figure 6.8 Map example. 6.8 Highlights Highlights are used to attract attention of your visitor to a some kind of important message. Click Highlights, then click the type of highlight you want to use, and write down your message instead of standard text in it. Figure 6.9 Highlight example.
Chapter 7 Widgets Widgets 19 Our themes also feature a variety of custom Widgets. Let's take a closer look at them: 7.1 Comments with Avatars This is the extended version of the standard WordPress widget called Recent Comments. The difference is this widget shows gravatar of comment s author, making comments more attractive for visitors. Figure 7.1 Comments with avatars. 7.2 Post with Images As well as our comments widget this is the extended version of WordPress Recent Posts. This widget displays featured images of the latest posts. Figure 7.2 Posts with images.
Widgets 20 7.3 Facebook Like Box Facebook like box enables you to attract and gain likes to your Facebook page from your website. Our widget is the easiest way to implement this feature on your website without coding. Figure 7.3 Facebook Like Box. 7.4 Social Profiles Social Profiles allows you to display icons linking to your social profiles. Customizing this widget you can add icons from the preset of services or add your own link with a custom icon. Figure 7.4 Social Profiles. 7.5 Video feed One more simple way to add video into your pages. To do that all you need is to type the video title and the URL of it on YouTube, or Vimeo. Widget engine will automatically grab a video from the URL. Figure 7.5 Video Feed.
Changing Font 21 Chapter 8 Changing Font Fonts, used in a theme by default, well match the design of the theme. However you can change it on your own needs. You can use any font from the Google Fonts store. The following instruction will help you with it: 1. Open your website front page, under Administrative account. 2. Click Fonts at the top of your page. 3. Immediately after that font settings window will be displayed, type font names for the needed elements there. 4. Click to apply the new font. 5. Click Save Changes. You can load the default set of fonts in any time, just click Default in the font settings window. Figure 8.1 Font settings window.
Changing Font 22 Chapter 9 Translating The default text written in our themes in English, but you can change it to your language. We use a standard translation (localization) method called GNU gettext. According to this method you don t need to translate each message displayed on your website in source code. Instead you can generate your own file with translation of all messages in one place. You can find the instructions on how to translate a theme on the following page: http://codex.wordpress.org/translating_wordpress. Also you can use plugin Codestyling Localization (http://wordpress.org/plugins/codestyling-localization/) to manage and edit translation files.