Anime News and Reviews WordPress Theme
in de x 01 Introduction
11
Home Banners
02 Setup Demo
12 404 Page
03 Fresh Installation
13 Social media links
04 Activate Plugins
14 Posts
05 Custom Menu
15 Gallery Shortcode
06 Theme Settings - Navbar and Logos
16 Add Authors
07 Theme Settings - Options
17 Reviews
08 Theme Settings - Posts, Archives and Search
18 Page Templates
09 Theme Settings - Styling
19 Contact Page
10 Home Slider
20 Sources and Credits
e
// Introduction
Thank you very much for choosing ANIMAG. We truly appreciate and really hope that you’ll enjoy our theme and our future updates and improvements. If you have any questions or recommendations, feel free to contact us.
.01
Requeriments - WordPress installation - PHP 7.3+ - Basic Knowledge of WordPress (create posts, upload images, install plugins, fill fields, etc.) As you know, you can always visit the demo site.
// Setup Demo
Import .wpress file from All-in-One WP Migration If you want to import the demo to your WordPress installation (looks exactly the same as demo site), when you make a clean install of WordPress on your server, first download the All-in-One WP Migration plugin and activate them. Now, go to Import page from the All-inOne WP Migration dropdown menu:
Once you have chosen the option, the application takes you to the Import page:
.02
From this page you can select from where you want to import a backup using the dropdown menu:
If you chose ‘File’, the plugin will open a window showing your local files and folders and will let you chose a backup for import from there. Then, extract the zip file animagdemo.zip from the Demo Content folder. Next, a file called animagwpdemo.wpress appears. Choose them to begin the import process:
The import has an additional step which warns you that your website will be overwritten by the new backup including database, media, plugins and the activated theme. This is the last step from which you can cancel the process. After pressing ‘Proceed’ you cannot stop the import process anymore. The amount of time the import process will take depends on the size of the data and the speed of your internet connection. Note: is important to previously check in your Hosting Service the File Size Upload option (800 MB recommended size or more, because the size of the import file is big, due to the images used) When finished, a successful import will display this message:
At this step, it is recommended to click on Permalinks Settings link and save your permalinks twice in order to save them and generate .htaccess file.
Please, enter with this keys to your dashboard and change them in the Users/Your profile section to whatever you want.
Also, because the demo imports the original database, your admin user and password keys will change to:
// Fresh Installation
If you don’t need to import the demo file, the ideal is to install theme from a fresh WP installation, to customize the theme options and start uploading the contents. When you purchase the theme, the downloaded zip file contains: - demo files (it contains the files for images and exported data for cloning the demo site described in Section 2)
.03
- theme files (it contains the zipped installable WordPress theme file) Extract the downloaded zip, and select the zip file animagwp.zip. It contains only the theme files. Now, you have two ways for installing the theme: 1 – Install theme via WordPress Dashboard > Go to Appearance – Themes section and click Add New. In the next screen click the Upload Theme button
> Click the Choose File button, select the zip file and click Install Now. Next to the successful installation, click on Activate. 2 – Install theme via FTP Open your FTP program (i.e, FileZilla) to browse the folders of your server, and go to wp-content/themes directory. Extract the zip file animagwp.zip on your computer, it extracts on the folder “animagwp”, which contains al the Theme files. Put (or drag and drop) this extracted folder in the wp-content/themes folder. In the WordPress Dashboard, go to Appearance – Themes section. The uploaded Theme appears with his featured screenshot, hover it and click the Activate button.
// Activate Plugins
When you install and activate the Theme, there’ll be a message with a list of required and recommended plugins.
Required: Advanced Custom Fields Pro and RAMSTHEMES Addons Recommended: Classic Editor, Contact Form 7, Yoast SEO Optional: All-in-One WP Migration (but marked as required only to import demo content) You can go to Appearance – Install Plugins section and install them.
.04
// Custom Menu
Go to Appareance – Menu in the Dashboard and build the menu dragging the elements you like.
.05
After that, go to Appearance – Widgets in Dashboard and use the builded menu in the Navigation Menu Widget to display it in the Sidenav Sidebar (shows when clicking hamburger menu)
// Theme Settings Navbar and Logos
.06
Logo in navbar In addition to configuring the navbar, you can upload two logos, one for the Normal (light) mode and other for Dark mode, if you wish to enable them. Recommended logos in PNG or SVG format for better definition.
Navbar / Logo height: the height of the header navbar and/or logo in pixels. Navbar Shrink: shrink effect when you choose a bigger logo (major navbar and logo heights). Logo position: Choose from left (near menu) or centered logo.
// Theme Settings Options
Select container: choose between normal or fluid (full size) container of site content. Use Fade effect for load pages: activate a simple fade effect when a page is loaded. Activate Load Bar: activate a thin load bar when a page is loaded, similar to YouTube. Load Bar color: select a custom color for the thin load bar when activated. Fixed Navbar: changes the header to a fixed position, making the entire navbar visible when scrolling. Border navbar: adds a border-bottom line to header navbar. Border menu: adds a border-right line to sidenav menu.
.07
Border menu shadow: adds a border-right shadow to sidenav menu. Border footer: adds a border-top line to footer. Side menu font size: sets the size in px of the side menu sections. Search modal: show or hide the search button in navbar. Rounded Corners: styles all the images and borders with a rounded corner style, similar to an “app-like” style. Social Media Buttons: used for the default social media buttons. Disable if you’re using another plugin or social share tool (we recommend the ShareThis.js integration and Yoast SEO for custom metadata).
// Theme Settings - Posts, Archives and Search
Post columns: define number of columns used for posts layout on home and archives. Infinite Scroll: activate Infinite Scrolling or paged navigation. View More: display a button for show more posts, only if Infinite Scroll is activated. Post info: define if the info of posts is showed inside the image box or outside.
.08
Image color: define if the post image on home is configured to display in three modes: Black and White Only, Black and White to Color on hover, or Color only. Display Time: shows the date of post, configured on WP settings section. Display categories: displays the category of the post. Display excerpt: shows post excerpt. Display authors: shows the author of the post.
Display tags (Archive): displays the tags of the post.
Display Archive Sidebar (Archive Pages): display sidebar in the archive pages.
Display Blog Sidebar: display sidebar in posts or reviews (singles).
// Theme Settings Styling
Dark Mode Switch: enable or disable the switch for the two modes on the top-right corner of the header.
.09
Hover color for Dark Mode: the hover color for links, only when dark mode is enabled on frontend. Body text color: the general color of the texts. Body background: bg color for the whole background of the site. Navbar background: bg color of the header. Hamburger menu color: colorize the hamburger “three line” menu in responsive view. Sidenav background: bg color for the sidenav menu (and displayed when the hamburger menu is pressed). Sidenav menu text color: the text color of the menu elements on the sidenav. Sidenav menu item hover color: the hover background color of the menu elements on the sidenav. Footer background: bg color of the footer. Link color: color for the links, or the <a> tag. Hover color: color for the links when hovered. Widget titles color: a custom color for the widgets titles. Widget titles border: enable or disable a border-bottom below the widget title. Search result term color: choose a custom color for the searched term in search result page. Buttons background color: bg of the custom button class.
Buttons text color: text color of the custom button class. Buttons background hover color: bg of the custom button class when hover it. Buttons text hover color: text of the custom button class when hover it. Card color: color of the posts cards in grid. Comment card color: color of the comment card for post comments. Back to Top background color: bg of the “up” button showed when scrolling the page. Back to arrow color: color of the “up” arrow showed when scrolling the page. Infinite Scroll background color: bg of the “more” button showed when scrolling the page for view more posts. Infinite Scroll arrow color: color of the “down” arrow showed when scrolling the page for view more posts. Rating background color: bg color of the circle of the score in reviews.
Rating number color: color of the number of the score in reviews.
Capital Letter: enables Drop Cap (Capital letter) as first letter of posts.
Social icons background: bg color of the circle of the share icons in posts.
// Home Slider
You can enable a slider for the homepage and add the slides what you want in columns, uploading image, setting the titles, color and linking them to anywhere. In the
.10 same way of post images, the slider images can be displayed in three modes: Black and White Only, Black and White to Color on hover, or Color only.
// Home Banners
The proccess is similar to slider section; simply add images and fill the fields, and choose the suitable format of images between rectangle or square. The result displays as section in homepage, below the main slider.
.11
// 404 Page
You can customize the classic Error page. Simply add an image as background (1920Ă&#x2014;1080 recommended), add a title and a custom message to define an original variant of this page.
// Social media links
You can simply fill the fields with the complete urlâ&#x20AC;&#x2122;s of your fav and active social media profiles. Use to display in an HTML Widget in the footer section or another location with the shortcode
.12 .13 [social]
// Posts
As addition of the common proccess of building a post, you can select the color and size of the titles, and colors for the excerpt background and text. The result is individual for every post.
// Gallery Shortcode
In posts or reviews, you can add the number of galleries you like selecting three types. The common Gallery scheme (traditional image squares in columns), the Packery scheme (similar to Masonry fit style) and Flickity, which converts the gallery in a Slider with full fluid images or centered pictures. You can use all types in the same post, because every gallery is generated by the shortcode RAMSGALLERY and an ID. Example: select and upload the imgs you like and, in the Gallery Shortcode field, you can put whatever you want, i.e testgallery. Then, the shortcode that you’ll put on the content is [ramsgallery id=’testgallery’]
.14 .15
And then, do that with every gallery you want. Example in demo choosing Packery type and Columns:
The Shortcode is [ramsgallery id=”pancreas”] and the result
// Add Authors
If you have a little staff of writers, everyone can have their own account as an author or editor, adding it in the Users – Your profile section. There, enter the necessary data (first name, last name, a mini biography and a personal image). Each post assigned to it or written by them will be located on its own author page.
.16
// Reviews
The process is the same as that used to create a traditional post (see the basic WordPress documentation), simply fill in the title fields, excerpt, the author of the post, add images, galleries or videos from YouTube, use a featured image and the data with which the news will be linked, such as categories and tags. In the reviews post type, the possibility of placing a score from 1 to 10 is added.
// Page Templates
A pre-defined set of page templates are ready to use. Simply create a page with any title and select the best fit: News: display a list of all the added posts (without Re
.17 .18 views) in a paged archive view.
Page Centered: display a full-width featured image and centered column content.
// Contact Page
First, activate the Contact Form 7 plugin and add a new form.
.19
To display the form exactly as in the demo, copy and paste the styled code:
<div class=”row”> <div class=”col-md-3 p-3”><label>Your Name (required)</label></div> <div class=”col-md-9”> [text* your-name] </div> <div class=”w-100”></div> <div class=”col-md-3 p-3”><label>Your Email (required)</label></div> <div class=”col-md-9”> [email* your-email] </div> <div class=”w-100”></div> <div class=”col-md-3 p-3”><label>Subject</label></div> <div class=”col-md-9”> [text your-subject] </div> <div class=”w-100”></div> <div class=”col-md-3 p-3”><label>Your Message</label></div> <div class=”col-md-9”> [textarea your-message] </div> <div class=”w-100”></div> <div class=”col-md-3 p-3”></div> <div class=”col-md-9”>[submit “SEND”]</div> </div>
Next, configure the settings (mail direction, fields received in the body mail), save changes and you can use the generated shortcode in any page. In the example, shortcode is highlighted in blue at top of page. [contact-form-7 id=”307” title=”Contact form demo”] * See the full configuration of Contact Form 7 in the plugin author site.
// Sources and Credits
.20
* ACF Pro, © 2019 Elliot Condon, GNU GPL v2 or later. * Bootstrap, © 2011-2018 The Bootstrap Authors, © 2011-2018 Twitter, Inc., MIT. * PACE, © 2013-2018 HubSpot. * Infinite Scroll, © 2019 metafizzy, GNU GPL v3. * Packery, © 2019 metafizzy, GNU GPL v3. * Flickity, © 2019 metafizzy, GNU GPL v3. * Font Awesome, © Fonticons, Inc. * Bootstrap Ekko Lightbox, © 2019 ashleydw, MIT. * Bootstrap Comment Walker, 2017 Aymene Bourafai, GNU GPL v2. * Bootstrap Gallery, 2016 Edward McIntyre – @twittem, Brandon Hubbard, GNU GPL v2. * Simplebar, © 2019 Adrien Denat, MIT. * TGM Plugin Activation, 2016 Thomas Griffin, @GaryJones, @jrfnl, GNU GPL v2. Images of users on the demo page are free-downloaded from Unsplash.
A
TEMPLATE
RAMSTHEMES
