Prim WordPress Theme Documentation

Prim is a contemporary, minimalistic theme built to let your blog content shine. This modern theme will look good on any screen size.

Learn how you can get the most out of the theme with the Prim WordPress theme documentation.

Prim WordPress theme documentation, step 1: Theme specifications

• Post featured image recommended width is 770px.
• Page and Post content maximum width is 740px.
• Recommended logo size is 210 x 40px.
• Sidebar content width should be 300px.

Prim WordPress theme documentation, step 2: Theme installation

The theme can be installed through the WordPress Admin panel.

1. Log in to the WordPress Admin panel.
2. Go to Appearance -> Themes.
3. Click on the Add New button, at the top of the screen.
4. In Add Themes screen, click on Upload Theme.
5. Click on Choose theme, and then browse for theme file on your computer.
6. Click on Install Now to start the install process.
7. After the installation is done, click on Activate theme.

A detailed video for theme installation is available here: https://help.themeskingdom.com/how-to-install-and-setup-the-theme.

After activating the theme, you will be prompted to install the required plugins. Required plugins in the Prim WordPress theme documentation are:

1. Jetpack
2. Kirki Customizer Framework

Prim WordPress theme documentation, step 3: Theme demo

To set the theme as presented in our demo, you can import the demo file.

Prim WordPress theme documentation, step 4: Theme setup

To set up the theme, please follow the next steps:

1. Create pages with the default template: Home, Blog, About, and Contact. Create a page with title Work and set it to use the Portfolio page template. The Work page will display all portfolio items.
2. Create content for the About page and insert a contact form into the Contact page.
3. Go to Posts and create several posts. Don’t forget to set featured images for each of the posts, and to organize posts into categories.
4. Go to Portfolio -> Add New and create several portfolio items. Don’t forget to set featured images for each portfolio item, and to organize posts into categories.
5. When you are done with pages, go to Settings -> Reading and set Your homepage displays to A static page. For Homepage set Home page, and for posts, set Blog page.
6. In Appearance -> Customize go to Theme Settings -> Home Page Settings. Enable Home sections, and add the following elements:
   1. Slider section: Choose Slider element type, leave the title blank, select category Top Stories (or any other that you like), choose Filmstrip slider style and set the number of slides to 8.
   2. Archive section: Choose Archive element type, leave the title blank, select category All, choose Magazine archive style, and set the number of posts to the desired value.
   3. Archive section: Choose Archive element type, enter the title The Joys of Reading, select the desired category, choose List archive style and set the number of posts to the desired value.
   4. Slider section: Choose Slider element type, enter title Editors Choice, select desired category, choose the Horizontal slider style and set the number of slides to 8.
   5. Creative section: Choose Archive element type, enter the desired title, select the category, choose the Newspaper archive style, and set the number of posts to the desired value.
   6. Call to action section: Choose Call to Action element, set the image, enter title, text, and add a link with text.
7. In the Prim Settings -> Archive Settings set to Magazine, and enable Display Category Post Count and Add rounded corners on buttons.
8. Finally, go to Appearance -> Menus. Create a new menu 一 name it Primary, and add desired categories and all your pages to it. Associate the menu with the Primary position. Create another menu and add social links to it, and associate that menu with Social position.

If you want to customize the theme and a personal touch to it, be sure to follow these steps:

Prim WordPress theme documentation, step 5: The Customizer

The Customizer allows you to modify theme visuals and settings quickly. Here are the customization options in the Prim theme:

1. Site Identity
2. Background Image
3. Menus
4. Content Options
5. Widgets
6. Homepage Settings
7. Prim Settings
8. Additional CSS
9. Theme Options

Site Identity

The Site Identity panel in the Prim WordPress theme documentation is used for setting up basic site identity:

1. Logo: Site logo is an image in a .jpg, .jpeg or .png format. Suggested logo image size is 210 x 40px.
2. Logo Size: Drag slider to the left or right to decrease or increase logo size.
3. Site Title: The name of your site. Ideal length should not exceed 20 characters. If the site title is longer, it will be displayed in two (or more) lines.
4. Tagline: Tagline is a short description of the site, or simply a punchline of your business.
5. Title and Tagline Visibility: If Display Site Title and Tagline is checked, both Site Title and Tagline will be displayed.
6. Site Icon: Site icon will be displayed in a browser tab, bookmarks or in the WordPress mobile app. The icon should be squarely-shaped, and the recommended icon size is 512 x 512px.

Menus

The Customizer menu option allows the user to manage available menu locations, and add, and remove menu items. Prim theme has two menu locations available – the Header menu, which is mostly used as a Primary menu, and the Social menu. Menus can be managed from Appearance -> Menus as well.

Content Options

The Content Options panel allows you to control the visibility of posts metadata. By enabling or disabling the options you can show or hide dates, categories, tags, and the author for all posts.

Widgets

Widgets in the Prim WordPress theme documentation are useful extensions for content, which you can add to your sidebar or other widget areas. In the Widgets option in the Customizer, you can see available widgets area in the currently active theme.

Prim theme has a regular, right side widget area and footer widget area. Widgets can also be managed from Appearance -> Widgets. Widgets’ appearance can be controlled with the Widget Visibility feature.

Homepage Settings

Homepage Settings work the same way Reading settings in Settings -> Reading does. Homepage settings allow you to set the theme to use static homepage, or to display the latest posts.

Theme Settings

Theme Settings is a panel in the Prim WordPress theme documentation where all theme-related settings are placed. From here, you can tweak homepage look, main menu settings, single post, etc.

1. Home Page Settings
2. Main Menu Settings
3. Single Post Settings
4. Archive Settings
5. Footer Settings
6. Font Settings
7. Color Settings

Home Page Settings

Prim theme has a flexible homepage and allows site admin to create a custom homepage. The homepage can be customized by adding content blocks. A content block can be:

• a slider,
• an archive or
• a call to action.

Theoretically speaking, an unlimited number of content blocks can be added to the homepage, but keep in mind that more blocks mean longer page loading time.

Content blocks can be easily rearranged by using the drag and drop method. The mouse cursor will turn into the four-way arrow, which indicates that the block can be moved.

After clicking on the Add new Element the new block will be added. As the first step, select what content will be displayed.

Slider block

The slider in the Prim WordPress theme documentation is using the featured image, title and metadata from posts.

1. Title: Title for the slider section.
2. Categories: Slider can display content from all categories, or just from the selected category.
3. Slider Style: Slider has three styles available: Film Strip, Classic and Horizontal. The Film Strip will display several smaller images, Classic is a full-screen slider, while the Horizontal will scroll from top to the bottom.
4. The Number of posts: How many slides will be displayed in the slider.

Different slider types – Film Strip, Classic and Horizontal.

Archive block

An Archive is a block where posts are displayed.

1. Title: Title for the archive section.
2. Categories: The Archive will display posts from all categories, or just from the selected category.
3. Archive style: Archive block can display posts in different styles. Newspaper style will display featured image on the left and content (title, metadata, and excerpt) on the right; Magazine style will display the featured image on the top with the content under the image and the List style will display posts in the grid with small images and just post titles.
4. Number of posts: How many posts will be displayed in the archive section.

In the image above, you can see all three archive styles – Newspaper, Magazine, and List.

Call to Action

Call to Action section in the Prim WordPress theme documentation is a static section. It will always display the same content. It’s usually used to attract site visitors and direct them to specific articles or such. A call to action is always displayed in the full width.

1. Title: Title for the section.
2. Call to Action Image: Select an image that will be used as a cover image for the call to action section.
3. Call to action text: Short text that will be displayed.
4. Call to action link: Enter URL where button in the call to action will link to.
5. Call to Action Button Text: Enter the text that will be displayed on the button.

Here is an example of how the finished call to action section looks like.

Main Menu Settings

The Main Menu can be displayed as a standard inline menu in the different positions – on the left, right or center in the header; or hidden behind the hamburger button. If the last option is selected, the menu trigger will appear on the left side in line with the logo, and the menu will slide in from the left.

Single Post Settings

Single Post Settings in the Prim WordPress theme documentation have two options where reading time can be displayed, and next/previous navigation for posts can be turned on or off.

Archive Settings

Archive Settings allow you to customize the appearance of content archive pages.

1. Archive Style: Archive can display posts in different styles. Newspaper style will display featured image on the left and content (title, metadata, and excerpt) on the right; Magazine style will display featured image on the top with the content under the image and the List style will display posts in the grid with small images and just post titles.
2. Display Category Post Count: If turned on, the number of posts in the category will be displayed on the category archive page.
3. Add rounded corners on buttons: If turned on, buttons “Read More” will have rounded corners.

Footer Settings

In the Footer Settings, you can manage and turn on a newsletter block and Instagram section, and set footer credits.

1. Display newsletter form in the pre-footer area: If turned on, the newsletter will be displayed in the pre-footer area. Settings for the newsletter are located in Settings -> MailChimp Setup.
2. Footer Copyright Text: Text that will be displayed in the footer, as footer credits. You can enter basic HTML elements to create links and stylize footer text.

Font Settings

The Font Settings panel in the Prim WordPress theme documentation is displayed only if the Kirki Framework plugin is installed and activated. Font Settings are used to set font families and weights for global text elements 一 content, headings, and navigation. Available fonts are from Google Fonts but without extended variants. If you need assistance on how to integrate additional variants, please submit a support ticket.

Color Settings

Setting up colors and adding a personal touch to the theme is important for building a personal brand. The Color Settings panel allows you to set colors for various elements in the theme.

Available settings:

• Slider Horizontal Background Color: Color used for the elements with the horizontal slider.
• Background Color: Background color for the whole site.
• Accent Color:
• Headline Color: Color of all post titles.
• Paragraph/Text Color: Content text color.
• Link Color: Color used for links in the content and metadata (date, category, author).
• Secondary Background Color: Background color for the minor elements – e.g., slider background.
• Secondary Text Color: Default color for text that is displayed in the slider.

Prim WordPress theme documentation, step 5: Additional CSS

The Additional CSS section is used for custom CSS classes, without interfering with theme original CSS files or creating a child theme. These classes are always loaded first, before other stylesheets. In the Useful CSS Classes section, you can find some most used classes.

Prim WordPress theme documentation, step 6: Useful CSS Classes

Site Logo
To increase the site logo:

.custom-logo-link {
max-width: 200px;
}

Main Navigation color and font size

.main-navigation ul.menu li.menu-item a {
font-size: 16px;
color: #fff;
}

.nav-menu li.menu-item a:hover {
color: #fff;
}

Page Title

.page h1.page-title {
font-size: 30px;
color: #fff;
}

Single Post Title

.post h1.entry-title {
font-size: 30px;
color: #fff;
}

Single Post Entry Text

.post .entry-content p {
font-size: 12px;
color: #fff;
}

Hide Search Icon

#big-search-trigger {
display: none;
}