Gira WordPress Theme Documentation

Gira is a WordPress portfolio theme created for artists 一 painters, sculptors, and illustrators. This responsive theme allows you to show your originality and uniqueness.

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

Gira WordPress theme documentation, step 1: Theme specifications

• Logo recommended width is 220px.
• Portfolio featured image recommended width is 800px.
• Page and Post content maximum width is 740px.

Gira 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 Gira WordPress theme documentation are:

1. Jetpack
2. Kirki Customizer Framework

Gira WordPress theme documentation, step 3: Theme setup

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

1. Go to Portfolio -> Add New and create new portfolio items. In our demo, we have created a presentation for artworks. The first step before creating portfolio items is setting up a black frame around images. You can download frame template from here: https://www.behance.net/gallery/84940643/Frame-Mockup-Freebie
   After downloading the frame, you will need to use it in Photoshop and to add it around your images. You can add shadow effect as well, as we have done. Alternatively, you can add a drop shadow using CSS – refer to the Useful CSS classes section.
   Now, you can create portfolio items – set title and featured image for each item.
2. Head to Pages -> Add New and create three pages – Work, About and Contact. The Work page is using the Portfolio page template, while About and Contact pages are using the default page template.
3. To create the About page, we have used different blocks. In the first block, we have inserted text as a h3 heading. To add a black background behind the text, you will need to wrap the desired text into span element with class “highlighted-text” – switch your block to HTML mode. Refer to the screenshot below for the code.

   

   After that, insert the image with the caption, and two columns text block. Switch the first column to HTML mode, and wrap the first letter in paragraph element with classes “has-drop-cap” and “has-medium-font-size”.

   

4. On the Contact page, display a short intro text and a contact form. Add text block and insert your content. Add a form block, and Publish page. Make sure to install and activate the Jetpack plugin, otherwise, Form block will not be available.
5. Go to Settings -> Reading and set the theme to read static page. For home page set Work page.
6. Time to set up navigation – go to Appearance -> Menus. Create New menu, add all pages to it, and mark it as a Primary. Create another menu with title Social, and add links to your social profiles as Custom Links.
7. Almost done – in Appearance -> Customize you need to set Site Identity and Layout.
   1. In the Site Identity panel, either set the desired logo or enter Site Title and Tagline.
   2. Under Widgets add Navigation Menu widget to the sidebar, and select previously created Social menu to it. Add another widget – Text widget and insert the desired content into it.
   3. In Theme Settings -> Footer Settings Enter desired copyright text in the Footer Text field.
   4. In Theme Settings -> Layout Settings set portfolio page to display Two columns and turn on only Show the portfolio title.

Theme customization options are the following, and they will help you add a personal touch to the theme.

Gira WordPress theme documentation, step 4: The Customizer

The Customizer in the Gira WordPress theme documentation is a great WordPress feature that allows you to customize the theme and set theme options. We will not explain all options since some of them are WordPress standards. Theme specific settings:

1. Site Identity
2. Background Image
3. Menus
4. Content Options
5. Widgets
6. Homepage Settings
7. Featured Content
8. Additional CSS
9. Font Settings
10. Color Settings
11. Theme Settings

Site Identity

Site Identity allows you to set your site title, tagline, and icon. The Site Title is the name of your site and it’s displayed in the header, where the logo is displayed. The Tagline is the short description or your motto, and it’s displayed just under the title. This setting is the same as in Settings -> General in WordPress admin panel.

1. Logo: Upload logo for your site. The Logo should be in PNG or JPEG/JPG format.
2. Site Title: Name of your site.
3. Tagline: Site punchline.
4. Display Site Title and Tagline: If enabled, both site title and tagline will be displayed. The Tagline will be displayed under the title.
5. Site Icon: The Site Icon is used as a browser and app icon for your site. Icons must be square, and at least 512px wide and tall.

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 background behavior.

1. Preset: Defines image size – Fill Screen will stretch the image to fill the whole site; Fit to the screen will cover the only visible part of the site, and Repeat will keep original image proportions, but it will repeat the image. Custom allows you to set background parameters manually.
2. Image Positions: Tool used to define the starting position of the image.
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 Gira WordPress theme documentation allows the user to manage available menu locations, and add and remove menu items.

Content Options

The Content Options panel contains settings for metadata for single posts – both regular and portfolio.

1. Author Bio: If enabled, the author bio box will be displayed on the single post page.
2. Display date: If enabled, the publishing date will be displayed on a single and posts page.
3. Display categories: If enabled, post categories will be displayed on a single and posts page.
4. Display tags: If enabled, post tags will be displayed on a single and posts page.

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 in the Gira WordPress theme documentation 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.

Featured Content

Featured content is displayed as a screen covering slider on the landing page. Five latest posts with entered tags will be displayed as featured content.

1. Tag name: Enter the tag related to posts which you wish to display in the slider.
2. Display featured posts: Featured posts can be displayed as a film strip, larger image, or as a full-screen slider.
   In our demo: http://resonant-photographer.tkdemos.com, we have set a page with a default page template as a landing page. That way, no other content is displayed, but the slider. If you set a static page with a Portfolio template, then portfolio items will be displayed under the slider.
3. Do not display the tag in post details and tag clouds.: If enabled, the featured content tag will not appear in post meta and/or tag cloud.
4. Also, display tagged posts outside the Featured Content area: If enabled, the content displayed in the slider will be displayed on archive pages, as well.

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 featured image. Tag desired posts with the same tag e.g. Featured. The tag will be used to identify and display 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.

Additional CSS

In the Additional CSS section within the Gira WordPress theme documentation, you can enter your custom CSS classes, so you don’t need to mess with original styles, or create a child theme. Of course, you should create a child theme if you plan to modify other files as well.

Font Settings

Font Settings allow you to set the font family and font-weight for headings and paragraphs.

Color Settings

The Colors panel allows you to set header text and background colors.

Theme Settings

The Theme Settings panel contains theme-specific settings.

Footer Settings

The Footer Settings panel in the Gira WordPress theme documentation is used to set footer copyright text. You can insert HTML if you need to create links, bold text and such.

Header Settings

The Sticky header option can change the behavior of the site navigation. If the sticky header is enabled, it will always be visible at the top of the screen.
If disabled, the header will scroll together with the page.

Layout Settings

Layout Settings in the Gira WordPress theme documentation have options for setting the number of columns and portfolio and single post appearance.

1. Portfolio archive layout: Portfolio archive can display portfolio items in two, three, four or five columns.
2. Gapless layout: If enabled, images on the Portfolio page will be displayed without a gap between them.
3. Show the portfolio title: If enabled, the portfolio title will be displayed under portfolio items on the Portfolio page.
   Otherwise, the portfolio item title will be displayed on a mouse hover over a single portfolio item.
4. Show the portfolio type filter: If enabled, portfolio categories will be displayed above portfolio items as a filter.
5. Split layout in portfolio posts: Splits portfolio posts on two sides. One side is the body of your post (text, images, etc.). The other has additional information (project credits, model names, clients, etc.)
6. Split layout in regular posts: If enabled, the post will be split into two sections – one side with a featured image and the other with the post content.

Gira WordPress theme documentation, step 5: Useful CSS classes

Modify site title font size

.site-branding .site-title a {
font-size: 16px;
}

Modify navigation font size

.nav-menu li a {
font-size: 20px;
}

Remove strikethrough line

.nav-menu a:before {
display: none;
}

Hide search

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

Change highlight background and text color

.highlighted-text {
color: #fff;
background-color: #000;
}

Change page title size

.page-header .page-title {
font-size: 42px;
}