Coup WordPress Theme Documentation

Coup is a newspaper inspired blog and portfolio WordPress theme. This responsive theme is built to make site visitors fall in love with your content.

Read how you can get the most out of the theme with the Coup WordPress theme documentation.

Coup WordPress theme documentation, step 1: 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 Coup WordPress theme documentation are:

1. Jetpack
2. Kirki

Jetpack

Jetpack is the world popular plugin that extends WordPress features. In the Coup theme, it is used to extend galleries’ features and protection. The official documentation is available here: https://help.themeskingdom.com/jetpack-plugin/.

Kirki

Kirki is a plugin that enhances theme experience by adding useful elements in the Customizer, like image position picker, font settings and such.

Coup WordPress theme documentation, step 2: Theme demo

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

Coup WordPress theme documentation, step 3: Theme setup

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

1. First, create several posts and set a featured image for each post. Group the posts in categories. Tag the desired posts with the same tag – e.g. “featured”. Those posts will be displayed in the featured content slider.
2. Create some pages – go to Pages -> Add New and create three pages – Projects, About, and Contact. The Project page is using the Portfolio page template, and there will be presented all portfolio items. The About page is a simple page with a short text and is using the Default page template. The Contact page is displaying a contact form from the Jetpack and is using the Default page template, as well.
3. Leave theme reading as is – Coup theme is displaying the latest posts on the homepage.
4. Creating primary menus: Go to Appearance -> Menus. Create a new menu with title e.g. Primary. Add Journal as a Custom Link that leads to your landing page, and add all pages to the navigation. To create the Follow item, add Custom Link menu item with the title Follow, and # for a link. Add links to your social profile as subitems to the Follow item. Mark the menu as Primary.
5. Finally, add some personal touch to the theme. Go to Appearance -> Customize.
   • In the Site Identity section, set your logo or add site title, and a favicon.
   • Content Options: Set a blog to display excerpt, and leave other options turned on.
   • Theme Settings: Set Blog layout to Standard.
   • Featured Content: Enter the tag used for posts that you wish to display in the Featured content slider.
   • Additional CSS: Add these classes to get the same look and effects as in our demo:

     .slick-dots button {
     	border-bottom: 2px solid black;
     }
     .site-title {
     	font-weight:700;
     	letter-spacing:-1px;
     	font-size:36px;
     }
     
     .page .entry-title.big-text,
     .page-template-gallery-page .page-title.big-text {
     display: none
     }
     
     .fullwidth-slider .featured-slider .image {
     	opacity: .65;
     }
     
     .fullwidth-slider .featured-slider .entry-title {
         font-size: calc(2em + 2.5vw);
     }
     .fullwidth-slider .featured-slider .entry-text {
     	max-width: 900px;
     }
     

Coup WordPress theme documentation, step 4: The Customizer

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

1. 1. 1. Site Identity
      2. Header Media
      3. Background Image

   <li

Menus

1. Content Options
2. Widgets
3. Homepage Settings
4. Theme Settings
5. Color Settings
6. Featured Content
7. Footer Settings
8. Additional CSS
9. Font Settings

Site Identity

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

1. Logo: Site logo is an image in .jpg, .jpeg or .png format. Suggested logo image size is 210 x 40px.
2. 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.
3. Tagline: Tagline is a short description of the site, or simply a punchline of your business.
4. Title and Tagline Visibility: If Display Site Title and Tagline is checked, both Site Title and Tagline will be displayed.
5. 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.

Header Media

Header Media allows you to set the video in the header instead of a featured content slider. Video is displayed in a full-screen mode. It can be either locally hosted or pulled from YouTube. Local video can cause longer loading time, because the site will load the whole video, so you will need to keep video size on optimum size. Recommended video size is 1920x1080px.
Header image will be displayed before the video loads and on mobile devices – on mobile devices, video header is by default turned off by WordPress, but it can be enabled.
Header text is displayed over the video or image, and you can use HTML to style it.

Background Image

Depending on the use case, some users need to set a background image on the site. In the Background Image panel, you can set a background image. After choosing an image, you will be able to set the background behavior.

1. Preset: Defines image size – Fill Screen will stretch the image to fill the whole site, Fit to the screen will cover only the visible part of the site, and Repeat will keep the original image proportions, but it will repeat the image. Custom allows you to set background parameters manually.
2. Image Positions: A tool used to define what the starting position for the image is.
3. Scroll with Page: Option available only if the background image is set to Repeat. If checked, the background will scroll together with the page content.

Menus

The Customizer menu option in the Coup WordPress theme documentation allows the user to manage available menu locations, and add and remove menu items. Coup 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 in the the Coup WordPress theme documentation allows you to control the visibility of the posts’ metadata. By enabling or disabling the options, you can show or hide dates, categories, tags, and the author for all posts. You can also control how posts will appear on the Posts page – with full content, or just as the excerpt.

Widgets

Widgets 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.

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 panel in the Coup WordPress theme documentation controls blog layout, which can be displayed in a standard grid, or in a shuffle layout. If you choose the shuffle layout, posts will be scattered, without the precise grid.
In the Theme Settings, you can also set featured slider appearance and autoplay. By default, the slider is displayed boxed, but you can enable the slider to appear in a full-screen.

Featured Content

Featured Content can be set wit the tag that is used for the posts to display them as the slider on the homepage.

1. Tag name: Enter the tag name that you have used for the posts you wished to appear on the homepage.
2. Do not display the tag in post details and tag clouds: If enabled, the tag used for the slider will not be displayed anywhere.
3. Also, display tagged posts outside the Featured Content area: If enabled, posts tagged with the tag used for the slider will be displayed on all post archives pages.
4. Autoplay slider: If enabled, the slider will automatically play slides.

Setting up a slider
To set up the slider:

1. Go to Settings -> Reading. Select the homepage to display Your latest posts.
2. Go to Posts -> Add New. Create several posts. For each post, enter the title, and set a featured image. Tag the desired posts with the same tag e.g. Featured. The Tag will be used to identify and display the desired posts as a slider.
3. Finally, go to Appearance -> Customize, and under Home Slider Options -> Slider – Featured Content enter the tag used for the posts.

Color Settings

Theme colors are used to add a personal, artistic touch to the site. Lines color setting controls the color of lines on the homepage. The background color will define background color on the whole site, while other options are used for the text color on the site.

Footer Settings

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.

Coup WordPress theme documentation, step 5: Additional CSS

The Additional CSS section is used for custom CSS classes, without interfering with the theme’s 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.

Font Settings

The Font Settings panel in the Coup 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 the extended variants. If you need assistance on how to integrate additional variants, please submit a support ticket.

Useful CSS classes

Adding a drop cap
To create capitalized first letters, you will need to wrap the whole code block in a paragraph with the class “drop-cap-code”.