1 “TRENDMAG – RESPONSIVE WORDPRESS THEME DOCUMENTATION” Created: July 8, 2015 Version: 1.0.1 WordPress Theme Developed by: Kopatheme.com Email: [email protected]After activating the theme please ensure that all required settings mentioned herein are also configured properly. Preview the theme on a browser to confirm that the changes to the settings have taken effect. The look and feel of the theme will not appear perfectly unless the required settings have been configured properly, as per the details mentioned on this documentation.
170
Embed
“TRENDMAG – RESPONSIVE WORDPRESS THEME … · 2016-02-19 · 7. WooCommerce plugin Setting WooCommerce To create WooCommerce plugin, do the following steps: -Step 1: Go to Dashboard
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Enter link, target, content for button, the following image will illustrate for above shortcode:
6. Caption
[trendmag_caption]Caption[/trendmag_caption]
109
H. Create Categories - Posts - Toolkit plugin - Custom Menu
As you can imagine, most of the site content will be posts and images associated with such posts.
Categories allow for a broad grouping of such post topics. Now we will start creating categories and
publish a few posts.
1. Create Category
- Go to Posts Categories
- Enter new Category name.
- Scroll down and click on "Add Category". A newly created category will appear. You can then
repeat the steps to create more categories.
110
111
With our Kopatheme Framework, you can customize the layout for each category. Follow the
procedures listed below:
1. Click on Category name or Edit hyperlink to edit category
2. Scroll down to the bottom of the page, like shown in the image. Check the check box to enable
customization for this category. If this is unchecked, this category will use the default settings
for all categories that has been set in the Layout Manager.
112
3. Now, you can select layout and sidebar for this category
113
2. Create posts
Posts are usually stored under Categories and/or Tags so you can keep related topics together. Now, we
will create some posts for our category.
Go to Posts Add New then carry out following steps
1. Check to the Screen Option to showing the components used to configure
2. Enter title post
3. Enter post content, you can use shortcode to create post content
4. Check 1 format for post such as: standard, video, gallery, audio in meta box
5. You can chose single category or multi categories which have been created before or create a
new category for post by clicking on hyperlink Add new category
6. You can assign single tag or multi tags existed before or create new tags by entering a tag and
click Add button to create
7. Scroll down and click on the "Set featured image" link on right-bottom side of your page. A
small box will appear. Click on "Upload File". Browse and select the file from your computer and
upload. Finally, set it like "Featured Image" to complete the process.
8. You can create rating option for your post, it will be displayed on the front-end by progress bar
at the overview position of single post
9. This part help you custom featured image using shortcode, url link on the single post with
formats of video (vimeo, youtube), gallery, audio (soundcloud), quote insteal of displaying
featured image upload in part 7, it will use featured image using shortdode which are installed in
this partHow to make your gallery, video, audio, and other post types pop by using
post formats.
10. Custom featured image size: in this part, you can upload featured image by sizes for each meta
box (example: upload featured image size for Blog featured, Blog featured full, (Trendmag) Slide
Three, (Trendmag) Slide Five (size 302 x 500 px and 302 x 255 px.), (Trendmag) Slide One,
(Trendmag) List Posts With First Big, Other Medium Thumbnail, Single, Single full, Single
gallery 1 slide, Single gallery 1 slide full). When you use to custom featured image size, the more
priority use to upload featured image
114
11. Discussion: check in checkbox, if you want to be enable function comment in single post
12. Custom layout: you can custom layout for each post by click on checkbox to configure the layout
for the post. If you do not custom in this step, single post will take the default configuration
layout which are installed in Layout Manager general
Finally, likesign the post to an appropriate category and click "Publish" button to make the post live.
With our very flexible Kopatheme Framework, you can customize the layout for each individual post.
The procedure is the same as to customize layout for category above.
115
116
117
1. Check to show options 3. Enter content, shortcode to create post 5. Upload gallery ID 7.Enter information to customize imaged size 9.Create a new tag or assign an existing one 11.Choose a post format
2. Enter title post 4. Check on box if you want to use the custom setting layout 6. Enter custom content (e.g. YouTube URL) 8.Set featured image for post
10.Choose an existing category to create a new one 12. Click to publish.
How to make your gallery, video, audio, and other post types pop by using post formats.
That’s the same blog with the same content as default post format— the only difference is post formats!
To use post formats:
Click the New Post button.
1. Choose Gallery, Audio, Video, or Quote.
2. Add some content and publish! Depending on your theme, you’ll see some stylistic differences
between this post and your posts with the default Post format.
3. At Featured content, you can add gallery ID (same as [gallery ids="226,225,224"] ) or Vimeo
url (https://vimeo.com/ondemand/shortterm12) to create posts with post format into text area.
If you do not see the Featured content module, check that you have it enabled in your Screen
Options
3. Brands Plugin
To create a New Brand, follow the steps:
Go to Dashboard Brands Add New
1. Enter Brand's name
2. Enter Brand's content
3. Add new tags or assign exited tags
4. Add featured image for your brands
5. Enter your website/Blog for brand
118
6. Click Update button to finish
You can see the following illustration:
You also see events created in "All Brands"
119
4. Service plugin
To create Service plugin, follow steps:
Go to Dashboard Services Add New
1. Enter Service's name
2. Enter Service's excerpt (Excerpts are optional hand-crafted summaries of your content that can
be used in your theme)
3. Select an icon awesome or upload your icon, enter link for icon
4. Add new service tag or assign existed service tags
5. Click Update button to finish
You can see the following illustration:
120
After clicking to "select icon for service”, the list of icon picker will be displayed on the screen, select the
icon you want.
You can see all services in All Services
5. Testimonials plugin
To create Testimonials plugin, do the following steps:
Go to Dashboard Testimonials Add New
1. Enter testimonial's name
2. Enter testimonial's content
3. Add new testimonial tag or assign existed testimonial tags
121
4. Upload featured image of testimonials
5. Click Update button to finish
You can see the following illustration.
All Testimonials created are in Testimonials.
6. Create Custom Menu
To create a custom menu, go to Appearance Menus in your dashboard.
Creating a Menu
1. To create a custom navigation menu, in "Edit Menus" tab, click Create a New Menu. Then
enter menu name, click "Create Menu" button.
122
2. Adding Pages and Categories to Your Menu: Adding pages or Categories to your menu is as
simple as checking the proper boxes for the pages you want and then clicking Add to Menu.
3. Creating a custom menu allows you to do the following things:
- Change the order of pages in your menu, or delete them.
- Create nested sub-menus of links, also referred to like "drop-down" menus
- Create links to category pages allowing you to collect together posts blikeed on that category
- Add custom links to other sites
4. Note: When we click on any menu, we can customize this menu
- Enter the Navigation Label to display in the menu.
- Enter the title attribute which display when you hover on the Label.
123
Manage Menus Location
This theme supports 3 menus location (Top Menu, Main Menu and Footer Menu). In "Manage
Locations" tab, you have to select menus to display for each location.
Be sure to click Save Menu each time you make changes to your custom menu.
Create Mega Menu
- Step 1: Go to Appearance Theme Options Sidebar Manager tab: create a sidebar for Mega
Menu
- Step 2: Go to Appearance Widgets: Drag and drop (Trendmag) Megamenu Posts widget into
the Mega Menu sidebar and configure it (See Custom Widget - (Trendmag) Megamenu
Posts)
- Step 3: Go to Appearance Mega Menus All Mega Menus: Copy shortcode of mega
menu
- Step 4: Go to Appearance Menus: Click Select Main menu, then check on checkbox '
Description' at Screen Option, at mega menu part paste shortcode of mega menu created
then click Save Menu to save.
124
End Review mega menu on the front-end.
125
I. Create pages
1. Creating Home Page 1
To create Homepage 1, you can follow the steps below:
Go to Dashboard Pages Add New
1. Enter page's name
2. Scroll down to Page Builder section, chose layout Front Page 1
3. Configure for Rows
4. Select the widgets using for Areas
5. Click Customize button to customize CSS for page
6. Click Publish button to save
Configure parameters for Rows, Areas of Home page 1
Row 1
Area 1:
- Click Add widget button to select Trendmag Slide Three widget then configure
parameters for it, following the Trendmag Slide Three part.
126
Row 2
Area 2
- Click Add widget button to select (Trendmag) Sticky Posts widget then configure
parameters, following the (Trendmag) Sticky Posts part.
- Click Add widget button to select (Trendmag) Grid Posts Carousel widget then configure
parameters, following the (Trendmag) Grid Posts Carousel part.
127
Row 3
Area 3
- Add (Trendmag) Advertisement widget, you can enter title, content for text, use widget
effect, enter padding (Trendmag) Advertisement.
128
Row 4
Area 4
- Click Add widget button to select (Trendmag) List Posts With First Big, Other
Medium Thumbnail then configure parameters, following part(Trendmag) List Posts With
First Big, Other Medium Thumbnail
- Click Add widget button to select (Trendmag) Grid Posts Carousel then configure
parameters, following part (Trendmag) Grid Posts Carousel
- Click Add widget button to select (Trendmag)List Videos First Left, Other Right then
configure parameters, following part (Trendmag) List Videos First Left, Other Right
129
Row 5
Area 5
- Add (Trendmag) Advertisement widget, you can enter title, content for text, use widget
effect, enter padding (Trendmag) Advertisement
130
Row 6
Area 6.1
- Add (Trendmag) Posts Two Positions widget then configure parameters for it, following
the part (Trendmag) Posts Two Positions
Area 6.2
- Add (Trendmag) Post Bxslider widget then configure parameters for it, following the
part (Trendmag) Post Bxslider
- Add (Trendmag) Recent Posts widget then configure parameters for it, following the
part (Trendmag) Recent Posts
- Add Tag Cloud widget then configure parameters for it.
131
Row 7
Area 7
- Add (Trendmag) List Post Carousel With Custom Navigation widget then configure
parameters; following the part (Trendmag) List Post Carousel With Custom Navigation
Row 8
Area 8.1
- Add (Trendmag) Posts Two Positions widget then configure parameters for it, following
the part (Trendmag) Posts Two Positions
Area 8.2
- Add (Trendmag) Latest Products widget then configure parameters for it, following the
part (Trendmag) Latest Products
- Add (Trendmag) Flickr widget then configure parameters for it, following the
part (Trendmag) Flickr
132
2. Create Home page 2
To create Home page 2, you can follow steps as below:
Go to Dashboard Pages Add New
1. Enter page's name
2. Scroll down to Page Builder item, chose layout Front Page 2
3. Configure parameters for Rows, Areas
4. Click Publish button to save.
133
Configure parameters for Rows, Areas Home page 2
Row 1
Area 1
- Add (Trendmag) Slide Five widget then configure parameters for it, following the
part (Trendmag) Slide Five
134
Row 2
Area 2:
- Add (Trendmag) Product Categories Carousel widget then configure parameters for
it,following part (Trendmag) Product Categories Carousel
- Add (Trendmag) Products Carousel widget then configure parameters for it,following
part (Trendmag) Product Carousel
135
Row 7
Area 7:
- Add (Trendmag) List Products widget then configure parameters for it,following
part (Trendmag) List Products
136
Row 9
Area 9:
- Add (Trendmag) Product Categories widget then configure parameters for it,following
part (Trendmag) Product Categories
- Add (Trendmag) Service Grid widget then configure parameters for it,following
part (Trendmag) Service Grid
137
Row 10
Area 10
- Click Add widget button to select (Trendmag) Testimonial Carousel then configure
parameters, following part (Trendmag) Testimonial Carousel.
- Click Add widget button to select (Trendmag) Brands Carousel then configure
parameters, following part (Trendmag) Brands Carousel
138
Row 11
Area 11
- Add (Trendmag) Grid Posts widget then configure parameters for it, following the
part (Trendmag) Grid Posts
Row 12
Area 12
- Add (Trendmag) List Post Carousel With Custom Navigation widget then configure
parameters for it, following part (Trendmag) List Post Carousel With Custom Navigation
139
Row 13
Area 13
- Add (Trendmag) Service Grid With More Link widget then configure parameters for it,
following the part (Trendmag) Service Grid With More Link
140
3. Create Home page 3
To create Home page 3, you can follow steps as below:
Go to Dashboard Pages Add New
1. Enter page's name
2. Go to Appearance Layout Manager Blog: Select the layout for your page: Blog
Format. Finally, click Save Options
3. Go to Appearance Widget: Dragging and dropping widget in sidebars the same as follows:
141
Top sidebar
Drag Trendmag Slide Five into Top sidbar.
Right Before sidebar
Drag (Trendmag) Post Bxslider into Right Before sidebar.
Drag (Trendmag) Advertisement into Right Before sidebar.
Drag (Trendmag) Latest Products into Right Before sidebar.
Drag (Trendmag) Recent Posts into Right Before sidebar.
Before Footer sidebar
Drag (Trendmag) Advertisement into Before Footer sidebar.
Drag (Trendmag) Instagram Twitter Caousel into Before Footer sidebar.
Header (fixed) Sidebar
Drag (Trendmag) Social Link into Header (fixed) sidebar.
Footer (fixed) Sidebar
Drag (Trendmag) Advertisement into Footer (fixed) Sidebar.
Drag Text into Footer (fixed) Sidebar.
Drag (Trendmag) Newsletter Feedburner into Footer (fixed) Sidebar.
Drag (Trendmag) Contact into Footer (fixed) Sidebar.
142
4. Creating Contact page
To create Contact page, you can follow steps as follows:
Go to Dashboard Pages Add New
1. Enter page's name
2. Scroll down to part Page Builder, chose layout Contact page
3. Configure parameters for Rows, Areas
4. Click Publish button or Save button to save
143
Configure customize contact page
You click Customize, at Javascript tab, you check on checkbox Load Google-Maps API to load google
map
Configure parameters for Rows, Areas
Row 1
Area 1
- Add (Trendmag) Google Map widget then configure parameters for it, following
part (Trendmag) Google Map
Row 2
Area 2.1
- Add (Trendmag) Contact Simple widget then enter your text in text area then configure
parameters for it, following part (Trendmag) Contact Simple
Area 2.2
- Add Text widget then enter your text in text area then configure parameters for it, following
part Text
144
5. Creating Fashion page
To create Fashion page, you can follow steps as follows:
Go to Dashboard Pages Add New
1. Enter page's name
2. Scroll down to part Page Builder, chose layout Fashion page
3. Configure parameters for Rows, Areas
4. Click Publish button or Save button to save
145
146
147
Configure parameters for Rows, Areas
Row 1: You can add widget slider or other widgets if you want
Row 2: You can add widget slider or other widgets if you want
Row 6
Area 6.1
- Add (Trendmag) Fashion Two Positions widget then enter your text in text area then
configure parameters for it, following part (Trendmag) Fashion Two Positions
Area 6.2
- Add (Trendmag) Advertisement widget then enter your text in text area then configure
parameters for it, following part (Trendmag) Advertisement
- Add (Trendmag) Post Bxslider widget then enter your text in text area then configure
parameters for it, following part (Trendmag) Post Bxslider
Row 7
Area 7
- Add (Trendmag) List Videos widget enter your text in text area then configure parameters
for it, following part (Trendmag) List Videos
Row 8
Area 8.1
- Add (Trendmag) Fashion Two Positions widget then enter your text in text area then
configure parameters for it, following the part (Trendmag) Fashion Two Positions
Area 8.2
- Add (Trendmag) Latest Products widget then enter your text in text area then configure
parameters for it, following the part (Trendmag) Latest Products
148
- Add (Trendmag) Flickr widget then enter your text in text area then configure parameters
for it, following the part (Trendmag) Flickr
Row 9
Area 9
- Add (Trendmag) Grid Posts Carousel widget enter your text in text area then configure
parameters for it, following part (Trendmag) Grid Posts Carousel
Row 10
Area 10
- Add (Trendmag) Advertisement widget enter your text in text area then configure
parameters for it, following part (Trendmag) Advertisement
6. Creating Fashion Show
To create Fashion Show page, you can follow steps as follows:
Go to Dashboard Pages Add New
1. Enter page's name
2. Scroll down to part Page Builder, chose layout Fashion page
3. Configure parameters for Rows, Areas
4. Click Publish button or Save button to save.
149
150
151
Configure parameters for Rows, Areas
Row 1
Area 1
- Add (Trendmag) Fashion Form widget then enter your text in text area then configure
parameters for it, following part (Trendmag) Fashion Form
Row 2
Area 2
- Add (Trendmag) Fashion Slide widget then enter your text in text area then configure
parameters for it, following part (Trendmag) Fashion Slide
Row 6
Area 6.1
- Add (Trendmag) Fashion Two Positions widget then enter your text in text area then
configure parameters for it, following part (Trendmag) Fashion Two Positions
Area 6.2
- Add (Trendmag) Advertisement widget then enter your text in text area then configure
parameters for it, following part (Trendmag) Advertisement
- Add (Trendmag) Post Bxslider widget then enter your text in text area then configure
parameters for it, following part (Trendmag) Post Bxslider
Row 7
Area 7
- Add (Trendmag) List Videos widget enter your text in text area then configure parameters
for it, following part (Trendmag) List Videos
Row 8
Area 8.1
152
- Add (Trendmag) Fashion Two Positions widget then enter your text in text area then
configure parameters for it, following part (Trendmag) Fashion Two Positions
Area 8.2
- Add (Trendmag) Latest Products widget then enter your text in text area then configure
parameters for it, following part (Trendmag) Latest Products
- Add (Trendmag) Flickr widget then enter your text in text area then configure parameters
for it, following part (Trendmag) Flickr
Row 9
Area 9
- Add (Trendmag) Grid Posts Carousel widget enter your text in text area then configure
parameters for it, following part (Trendmag) Grid Posts Carousel
Row 10
Area 10
- Add (Trendmag) Advertisement widget enter your text in text area then configure
parameters for it, following part (Trendmag) Advertisement
7. Creating Gallery page
To create Gallery page, you can follow the steps as follows:
Go to Dashboard Pages Add New
1. Enter page's name
2. Scroll down to part Page Builder, chose layout Media page
3. Configure parameters for Rows, Areas
4. Click Publish button or Save button to save.
153
154
Configure parameters for Rows, Areas
Row 1
Area 1
- Add (Trendmag) Slide Media widget then enter your text in text area then configure
parameters for it, following part (Trendmag) Slide Media
Row 2
Area 2
- Add (Trendmag) List Post Carousel With Custom Navigation widget then enter your
text in text area then configure parameters for it, following part (Trendmag) List Post Carousel
With Custom Navigation
Row 6
155
Area 6.1
- Add (Trendmag) Detail Gallery widget then enter your text in text area then configure
parameters for it, following part (Trendmag) Detail Gallery
- Add (Trendmag) Detail Gallery widget then enter your text in text area then configure
parameters for it, following part (Trendmag) Detail Gallery
- Add (Trendmag) Detail Gallery widget then enter your text in text area then configure
parameters for it, following part (Trendmag) Detail Gallery
Area 6.2
- Add (Trendmag) Post Bxslider widget then enter your text in text area then configure
parameters for it, following part (Trendmag) Post Bxslider
- Add (Trendmag) Latest Products widget then enter your text in text area then configure
parameters for it, following part (Trendmag) Latest Products
- Add Tagcloud widget then configure parameters for it
- Add (Trendmag) Flickr widget then enter your text in text area then configure parameters
for it, following part (Trendmag) Flickr
8. Creating Movies & Video page
To create Movies & Video page, you can follow the steps as follows:
Go to Dashboard Pages Add New
1. Enter page's name
2. Scroll down to part Page Builder, chose layout Media page
3. Configure parameters for Rows, Areas
4. Click Publish button or Save button to save.
156
157
Configure parameters for Rows, Areas
Row 1
Area 1
- Add (Trendmag) Slide Media widget then enter your text in text area then configure
parameters for it, following part (Trendmag) Slide Media
158
Row 2
Area 2
- Add (Trendmag) List Post Carousel With Custom Navigation widget then enter your
text in text area then configure parameters for it, following part (Trendmag) List Post Carousel
With Custom Navigation
Row 7
Area 7
- Add (Trendmag) Advertisement widget then enter your text in text area then configure
parameters for it, following part (Trendmag) Advertisement
Row 6
Area 6.1
- Add (Trendmag) List Videos With Custom Navigation widget then enter your text in
text area then configure parameters for it, following part(Trendmag) List Videos With Custom
Navigation
- Add (Trendmag) List Videos With Custom Navigation widget then enter your text in
text area then configure parameters for it, following part(Trendmag) List Videos With Custom
Navigation
- Add (Trendmag) List Videos With Custom Navigation widget then enter your text in
text area then configure parameters for it, following part(Trendmag) List Videos With Custom
Navigation
Area 6.2
- Add (Trendmag) Post Bxslider widget then enter your text in text area then configure
parameters for it, following part (Trendmag) Post Bxslider
- Add (Trendmag) Latest Products widget then enter your text in text area then configure
parameters for it, following part (Trendmag) Latest Products
- Add Tagcloud widget then configure parameters for it
159
- Add (Trendmag) Flickr widget then enter your text in text area then configure parameters
for it, following part (Trendmag) Flickr
9. Creating Single Post - Single Product
1. Go to Appearance Theme Option Layout Manager post: Select the layout for
your page: Single Post. Finally, click Save Options
2. Go to Appearance Theme Option Sidebar Manager, add new sidebar with name:
Single gallery after
3. Go to Appearance Widget: Dragging and dropping widget in sidebars the same as follows:
160
Blog right after sidebar
- Drag (Trendmag) Fickr into Blog right after sidebar.
- Drag Tag Cloud into Blog right after sidebar.
Blog Middle sidebar
- Drag (Trendmag) List Video into Blog Middle sidebar
Blog After sidebar
- Drag (Trendmag) Grid Posts Carousel into Blog After sidebar
Blog Before Footer Sidebar
- Drag (Trendmag) Advertisement into Blog Before Footer Sidebar.
- Drag (Trendmag) Instagram into Blog Before Footer Sidebar.
Blog Top Sidebar
- Drag (Trendmag) Slide Five into Blog Top Sidebar.
Single Top Sidebar
- Drag (Trendmag) Post Carousel into Single Top Sidebar
Page Info sidebar
- Drag (Trendmag) Contact Simple into Page Info sidebar
Page Content sidebar
- Drag Text into Page Content sidebar.
Shop Top sidebar
- Drag (Trendmag) Products Carousel into Shop Top sidebar.
Shop Before Footer Sidebar
- Drag (Trendmag) Advertisement into Shop BeforeFooter Sidebar
Single Gallery After sidebar
161
- Drag (Trendmag) Grid Posts More Link into Single Gallery After sidebar
Right Before sidebar
- Drag (Trendmag) Post Bxslider into Right Before sidebar.
- Drag (Trendmag) Advertisement into Right Before sidebar.
- Drag (Trendmag) Latest Products into Right Before sidebar.
- Drag (Trendmag) Recent Posts into Right Before sidebar.
Header (fixed)
- Drag Trendmag Social Link into Header (fixed).
Footer (fixed)
- Drag Text into Footer (fixed).
You can see How to use each widget above. Finally, preview your post in frontend.
162
J. How to setup the demo site
In order to set up the site like our demo, you can follow the steps below:
- Step 1: Install Trendmag theme: following part A - Theme Installation