Newspiper Theme Documentation

Installation

To be able to use the theme, you need to have a self-hosted WordPress installation, running php >= 5.6 and WordPress >=6.0. It is recommended that you use php 7.4 or above and the latest version of WordPress.

In your admin panel, go to Appearance -> Themes and click the ‘Add New’ button.
Type in Newspiper in the search form and press the ‘Enter’ key on your keyboard. If you have purchased the pro version, you need to upload the .zip file provided by email. Go to Appearance -> Themes -> Add New and then click “Upload Theme” button to install the Newspiper Pro theme.
Click on the ‘Activate’ button to use your new theme right away. If you have purchased the pro version, you need to activate Newspiper Pro theme. You would also need to add the license key, which you have received by email.
Navigate to Appearance > Customize in your admin panel and customize to taste.

Theme options

Theme options

Use the theme customizer to customize the theme to taste. There are plenty of options to make your site unique. You can change theme accent colors, the header text color, the headings text color, the links text color and much more.

The theme options are located in the theme customizer. You can configure them by going to your WordPress dashboard => Appearance => customize. You can also access the customizer directly from the admin bar on the top of the page. Now, let’s have a look at the theme options in more detail.

Site identity

Upload logo – you have the option to upload custom logo that will display in the site’s header.
Change Site Title & Tagline – you have the option to add a site’s name and description
Light logo – you have the option to upload custom light version of the logo that will be displayed on pages with transparent header and in the dark mode. If you do not upload a light logo, the default one will be used instead.
Logo Width – Change the size of the logo (between 40 and 240px)
Site Icon – you have the option to change the site icon in the browser tab (the tab icon at the top part of your browser) Colors Change the colors of the light theme such as the header, the headings, the links, the buttons and the menu text items. Control primary and secondary accent colors, as well as the header image gradient overlay colors.

Colors

Customze the default colors of the light theme mode. You can always override those with the WordPress Block editor (Gutenberg).

Header Text Color – change the color of the site title and description in the site header
Primary Accent Color – controls the colors of the loading spinner, the mobile menu background, the features pattern and others.
Secondary Accent Color – controls button background colors (if not set), the back to top button, page navigation background colors, progress bar, first category background color and others
Headings Text Color – change the color of the headings (h1 to h6 html tags)
Body Text Color – change the default text color
Link Headings Text Color – Change the link titles color
Links Text Color – change the links color
Buttons text color – change default button text color
Buttons background color – change default button background color
Primary Menu Text Color – change site menu’s text color
Top Bar Background Color – Change the background color of the secondary menu, located at the top of the page (shows only when the the top bar is enabled from the “Header Options” section)
Top Bar Text Color – Change the color of the menu items in the secondary menu, e.g. the location and mail icons and text, the social icons, etc. (shows only when the the top bar is enabled from the “Header Options” section)
Promo Banner Background Color – the background color of the top banner section (advertisement)
Promo Banner Text Color – the text color of the top banner section

Header Image

Newspiper supports the option to add custom header image via the theme customizer. This image will be displayed on the site’s homepage. For posts or pages that have a featured image, they will display the featured image instead. Go to Appearance > Customize > Header Image and upload a header image from your PC. The recommended image size is 1920X1080px. You have the options to crop the image (top, bottom or center) or to use the whole image (i recommend this). As a general recommendation, I would suggest to always compress the images that you upload, otherwise the site performace may deteriorate with time. Read more about that here.

When the header image is set, additional customization options for the header image will appear in the Header Image section:

Header Image Height – Vertically align the image (top, center, bottom). Default is top.
Header image background position – Vertically align the image (top, center, bottom). Default is top.
Header image paralax – Add beautiful parallax effect on page scroll.
Header image Gradient density – Control the gradient density. From 0 to 9. Default is 6. You can set it to 0 to completely remove it.
Header Image Gradient Color One – color of the gradient on the left hand side of the header image
Header Image Gradient Color Two – color of the gradient on the right hand side of the header image
Header Title – Change the default text of the header title.
Header Description – Change the default text of the header description.
Button text – Change the text of the button.
Button Link – Add a link to the button. You can link it to the About page or the Contact page or to a specific section from the Homepage.
Button hover animation – Experiment with different types of professionally crafted button hover animation. The options are: rollover, border move, slide in, pulse, shadow

Widgets

Widgets are something very useful if you want to display dynamic info such as latest posts, latest comments or post archives on the website. Newspiper theme supports right sidebar layout, left sidebar layout, as well as no sidebar layout for posts or pages. You can change or remove the sidebar from “Site Layout => Sidebar Layout”. Newspiper also supports 4 widget areas in the site footer. They all form a beautiful, evenly displayed 4-column layout.

Menus

This theme supports two menu location – The Primary menu and the Top menu (referred also in this documentation as the Top bar or the Secondary Menu)

Primary Menu – You can create the primary menu from the theme customizer or you can also go to dashboard > menu. Click on create menu and give it a name, then drag or add the pages you want to it. After that, from the menu locations section, select Primary Menu checkbox. This theme supports as many sub-menus as you want.
Top menu – You can create a top menu and it will appear in the Top Bar (the top most part of the header, where the search icon and the social icons are displayed) This menu should not be used as a primary menu, as It plays a secondary role, only create it if the primary menu is not enough for you! Create the menu, give it a name, then drag or add the pages you want to it. After that, from the menu locations section, select the Top Menu checkbox. This menu also supports sub-menus, just make sure it is not too much.

Homepage Settings

Optionally specify a static front page.

Header Options

The header options tab in the theme customizer consists of three sections:

site header
top bar
promo banner

Site Header Options

Customize the way the site header is displayed (site title, site description and primary menu)

Header Presets – Reorder the way header items (site title, site description, logo and primary menu) are displayed
Header Position – Customize the header position. Show it only on top of the page (static position), show it, while scrolling down (fixed) or show it when you scroll up (sticky). The default positon is sticky.
Enable Transparent Header – the site title and the site menu will become transparent for the list of pages you specify
Site Header Text Alignment – Horizontally align the header items. You can choose between, normal, center and space-between.
Enable Current Menu Item Underline – detect the current page and add an underline to its menu item if it is present in the site menu
Menu Item Hover Animation – Choose what happens when you hover over a menu item. You can choose between rollover and underline.

Top Bar options

The top bar is the top most part of the screen where location, phone, e-mail and search icons are displayed by default but you can customize accordingly. You can add social icons, e-commerce icons and even a menu!

Enable Top Menu – show the top menu or remove it completely
Top Bar Text Alignment – horizontally align the menu items (left, center, right)
Address – add the physical address of your business
Phone number – add phone number
E-mail address – add email
Show Search Icon – choose whether to display a search icon that performs a text search throughout the site
Social Icons – choose between a list of social icons to display. You can choose between Behance, Dribble, Facebook,Flickr, Github, Instagram, Linkedin, Pinterest, Snapchat, Soundcloud, Tiktok, Tumblr, Twitch, Twitter, Youtube and more.
Show Social icons on mobile – In mobile, the menu can get cluttered, since two two menus get combined into one for better user experience. That is why, the social icons are not displayed on mobile by default, However, you can choose to display them with this option.

Promo Banner options

Display a promo banner on top of the site header. This is a good place to interact with your audience. You can share important updates, promote your work or attract newspiper customers. To change the promo banner colors, go to “Colors” section.

Site Layout

You can control the desktop width of the page wrapper, post wrapper, the header and the footer. Moreover, you can control the position of the sidebar here.

Header Layout

Set custom width for the header.

Sidebar Layout

Choose how to position the sidebar.

Page Sidebar – Choose the sidebar position on the site’s pages, including the static home page.
Post Sidebar – Choose the sidebar position on the blog posts, including the post archives.static home page.

Container Layout

Set custom width for posts and pages. Wrap posts and pages into beatiful containers.

Page Content Width – Adjust the width of the page container
Post Content Width – Adjust the width of the container in single posts and post archives
Page Content Wrap – Wrap posts in a card or leave them as plain text. Default option is no wrap.
Post Content Wrap – Wrap posts in a card or leave them as plain text. Default option is seperate containers

Footer Layout

Set custom width for the footer.

General Settings

Customize the way the website is displayed.

Show Back to Top Button
Enable Page Loader on Homepage – Show a loading spinner while the page is loaded.
Block Editor: Enable default featured image when there is no featured image specified – Add a placeholder for posts that do not have a featured image assigned to them. Note: It works only for featured images inside the Block editor.
Show breadcrumbs on single posts – Show breadcrumbs on top of your posts, so that users can find their way more easily
Show breadcrumbs on single pages – Show breadcrumbs on top of your pages, so that users can find their way more easily
Enable custom cursor – Convert your cursor into a beautiful transparent or filled circle

Blog Settings

Choose what type of post information to show in the post archives or individual blog posts. Control how the featured image is displayed (above the content, same way as the header image or inside content). Show or hide related posts and social share icons. Show or hide post meta. The post meta information includes published date, author, category, tags, post likes, post views or comments. You can display or remove this information if you want.

Featured Image Display – Display the post featured image as a fullwidth header above post content or inside the post.
Show post categories – Show post categories on top of the post
Toggle Post Meta Before Post Content – You can choose to show or hide the post meta before the post content. Drag and drop the boxes to chage the post meta order.
Toggle Post Meta After Post Content – You can choose to show or hide the post meta after the post content. Drag and drop the boxes to chage the post meta order.
Blog Excerpts – Show post excerpts instead of full content for your post archives.
Post Excerpt Length – Enter a number between 10 and 55. Default is 55.
Post Content Wrap – Wrap posts in a card or leave them as plain text.
Post Archives Layout – Display posts in post archives in a single or multi-column layout
Post Loop Animation – Animate blog posts in post archives.
Post Archives Title Hover Animation – Choose an animation to display when hovering over a menu item.
Show social share icons – Show post progress when you scroll down the blog post.Display social share icons inside blog posts.
Show related posts – Display related posts after post content in single blog posts

Night Mode

Protect your visitors’ eyes and help them spend more time on your website by allowing them to switch between day and night mode (light and dark layout). To change to dark mode, you just need to click on the toggle button in the theme header. You can change the background color and add custom css to further customize the colors of the night mode. For example, if you want to change the link colors, you can use the following css (add it in the additional css tab):

body.dark-mode a {
    color: rgba(102, 222, 209, .8) !important;
}

There is more, you also have the option to switch default modes and display the dark layout by default. If you want, you can also disable the dark mode switch completely – it is completely up to you!

Footer Options

Change footer text color, footer background color, links and edit footer credits. Show or hide social icons.

Additional CSS

This section is for more advanced users who want to write custom css to override the default theme’s styles.

Nasio Themes