Pinegrow is not a WordPress starter theme, nor a WordPress framework and so – except if you use Blocks – building your first theme will always start from a blank unstyled page – or an existing HTML page – in the editor. Pinegrow adds no specific CSS code. Everything is under your control!
Of course, with a bit of experience and knowledge, you will quickly adopt some patterns and eventually create your own starter template with all the necessary parts ready for customization, but for the first one – you usually start from scratch.
And so, at Pinegrow support, we got many requests about WordPress standard Galleries and how to make them appear correctly in posts and pages.
The following is not a full course about WordPress galleries customization, but a start-up aid to help you understand the process.
For this tutorial, we assume that you have already started developing your theme and that you already have an index page with a standard loop that can display the content of a standard post (title and content at least). We also assume that the default WordPress theme Twenty Fiften is still available in your theme folder.
From WordPress administration:
- Create a Post
- Add Media
- Create Gallery
- Select or Import the Pictures you want in your Gallery
- Configure the gallery settings (Number or columns, order, size …)
And Save your Post
Watch your post in your brower (view Post button): The gallery does not appear correctly and there is a reason for that. The corresponding gallery styles does not exist in your styles.css file.
While it could be nice to review all the Gallery CSS properties, this is not the goal of this tutorial so we are going to play it easy and import the styles from the theme Twenty Fifteen which is available by default in any WordPress install.
- Open your theme folder
- Find twentyfifteen
- With your favorite editor, open styles.css and, thanks to the file index, find the section corresponding to the Galleries styling.(hint: everything is in section 14.2 – Galleries)
Copy the whole section, and from Pinegrow > Page > Edit Code > CSS > styles.css Paste it into your theme template styles.css.
Save the template, export your theme and preview it in your browser.
Your gallery appears now (almost) as expected!
Be aware that this process is just a starting point. Your gallery styles will need some adjustments to fit your own layout and you will have to add the corresponding media queries and styles for mobile view as well.
Last updated on February 14, 2017 at 10:05 pm