WPFolio handles the majority of changes users make to their site – in the theme options you can modify fonts, colors, the site background, navigation, and the sidebar.
But what if you want to do more? Then you can use WPFolio as a starting point and modify the theme files to do whatever you like!
Two important notes on modifying WPFolio theme files:
- It helps to have some knowledge of HTML, CSS, and maybe PHP, but not a lot. Reading up on the WordPress Support Forums, well crafted searches online, and reading up will go a long way.
- Make your changed in a child theme. Let me say that again: Make your changes in a child theme.
Child themes are your friend
Child themes allow you modify the styling and layout of a parent theme (like WPFolio) to any extent without editing the files of the parent theme itself.
“Why does that matter?” you ask. Well without a child theme, when you update WPFolio your changes are overwritten and lost. You could painstakingly pick through the code and migrate your modifications, but it’s tedious and you might miss something. Using a child theme, you get the benefits of new features while your modifications are preserved in the child theme. The best of both worlds!
- You want to change colors not available in the theme options? Use a child theme!
- Tweak the layout? Use a child theme!
- Add some rounded accents on elements of the page? Use a child theme!
- Have the default galleries added in the WordPress interface show 4 images across instead of three? Use a child theme!
- Change the styling of the dropdown navigation? Use a child theme!
Child themes are powerful stuff!
Whatever changes you make in the child theme override the defaults in WPFolio. Your tweaks take precedence and remain when you update the theme.
Child Theme Included!
Starting with WPFolio 1.6, a child theme is included. Just drag the WPFolio-child-theme folder into your themes folder (see figure A), activate the child theme, and start adding and manipulating files.
Figure A - Use an FTP program to drag you child theme to the themes folder
Child themes inherit the GPL license from WordPress and WPFolio, so share your code! Send us your tweaks. If you have more technical ability, post your child theme or fork the project on github so we can include your changes in core releases!
Troubleshooting
If you move the WPFolio child theme into your themes folder and see a notice in Appearance > Themes that says that says something like:
The parent theme is missing. Please install the "WPFolio" parent theme.
Fear not! Occasionally the directory (folder) that WPFolio is in will be named differently than in the WPFolio Child Theme’s style.css file. You just need to make them match. In WPFolio-child-theme/style.css rename “Template: WPFolio” to the exact name of the directory WPFolio is in.
For example if WPFolio was located in www.mysite.com/wp-content/themes/wpfolio I would change this in WPFolio-child-theme/style.css
Theme Name: WPFolio Child Theme Theme URI: Description: My changes to the WPFolio Theme. Author: You Author URI: http://yourwebsite.com/about Template: WPFolio Version: 0.1 Tags: WPFolio
to this
Theme Name: WPFolio Child Theme Theme URI: Description: My changes to the WPFolio Theme. Author: You Author URI: http://yourwebsite.com/about Template: wpfolio Version: 0.1 Tags: WPFolio
because the template has to match the folder’s name exactly. That should solve it!
Resources:
Here’s some links on child themes so you can learn more:
- Child Themes from the WordPress Codex
- How to make a child theme for WordPress: A pictorial introduction for beginners from op111.net
- How To Modify WordPress Themes The Smart Way from Themeshaper.com
Loading ...
17 Comments
Hi, finding this theme to be both well thought out and supported. I noted that the two examples above are the same code snippets. I’ve also experienced where people have installed this theme by uploading the “slambert-wpfolio-df24a13″ folder and not had the child theme available to them. It took me a while to figure out that it couldn’t import the stylesheet because the folder wasn’t named wpfolio. I assume this happens from time to time.
Hi Steve-
WPFolio is great! This isn’t a practical question so much as just curiosity. When I was building a child theme, I found I kept having to declare !important in my CSS, so I dug around and found that WPFolio’s stylesheet was being called in wp_head by mytheme_wp_head, i.e. after the child stylesheet. I removed mytheme_wp_head with the child’s functions.php and called both stylesheets in a child header.php. (For various reasons, I can’t just import the parent stylesheet in the CSS.)
When I look at your WPFolio demo, it doesn’t look like the stylesheet’s being called in wp_head, though. I am almost surely missing something or being lazy somewhere, I was just curious what was up with that.
Anyway, still works great.
Best.
-John
Hm, this is an interesting question. It got me down a rabbit hole…
The wpfolio stylesheets get called just before wp_head(). The style.css gets called, and then the stylesheet for the theme options one choses in the admin interface.
Plugins usually add their css in wp_head so they override the wpfolio stylesheets. Which I’m now thinking might not make the most sense. I was looking at this to see if it was possible to make the wpfolio stylesheets the last thing added to wp_head. But I’m not sure it’s something I can figure out right now.
I’m also thinking, the stylesheet should take priority over the theme options stylesheet, so then a childtheme.css would trump everything – even options one chose in the admin interface. Especially if it was loaded last in wp_head. Though it might be confusing if you were changing options in the interface and they didn’t change because they were fixed in a childtheme stylesheet.
What do you think about this?
I might need to write a blog post about this as it gets into the philosophy of how this is made and what has priority. Maybe I will do that…
I LOVE wpfolio! but i have a question/request.
I need the value “Page Container Color” to be either null, or transparent. I can’t put a diff value in child theme CSS because it gets overwritten. How can I accomplish that w/o touching the core of wp-folio?
Post this on the WordPress.org support forum! In the mean time try writing ‘transparent’ in the text field of the color option.
Sadly you can’t type transparent because it gets reverted back to a colour value
Why post on wordpress forums ? It’s a theme only suggestion/request
Much better venue for discussion and more accessible for other people to help you. Tag your post WPFolio.
Hi – Thanks so much for WPfolio, it’s great! I can’t sem to figure out how to change my heading to be an image? I have installed the child theme and edited the stylesheet but it’s not showing up. What am I doing wrong? Below is the code I changed. Thanks!
/* HEADER IMAGE example */
/*
div#header {
background: background:url(../logo.jpg) 0 center;
height: 105px;
}
div.headertext {
margin-left: 120px;
}
*/
You have to uncommment the CSS. You can look up how to do that if you’re not familiar.
Hi. I love this theme too. I have been making some adjustments (using a child theme) to simplify., but one thing has me stumped. I want to get rid of the background frame around the images when I click on them. (It is not showing up properly anyway, but I just want the background to be white.) I am not sure where the code is for this! I am not using galleries, so I don’t think it is in JQuery for Native Galleries but I’m not sure.
Thanks for any help!
Dolly Holmes
If you’re talking about the light grey border on this page that shows up with the image caption. You can style the image caption differently if you like.
So it’s in the CSS for the image caption? I tried…but I guess I’ll try again!
(Can you point me to the exact place in the code?)
Thanks!
To be specific…it’s not so much the gray around the caption, although I did try to get rid of that too…but the gray box around the painting above it…which is cut off on the right side. I just want to see the painting on a white background.
Can’t help in that detail right now. Try http://wpquestions.com It’ll cost you about $4 and you’ll have an answer in no time.
Just wanted to point out that the jpeg is misleading. You say to drag the wpfoli0-child-theme folder into the themes folder, but the red arrow shows it being drug into the wpfolio folder. That doesn’t work, only can be drug into themes folder. Were I less of a novice perhaps I would have figured this out sooner : )
Thanks,
I am using custom header image in wfolio 1.75. I have added a child’s theme and am doing as the writer of the plugin suggested, which is to add a piece of code to the end of the header .php
(// f.e. chi_display_header(900,150); for header images with 900 px width and 150 px height
if(function_exists(‘chi_display_header’)) { chi_display_header($width,$height); }, )
I get a message at the bottom which says I need to make the file writable. I look at the codex and it is all greek to me.
I also tried this from a post by Steve Lambert on the wpfolio forum:
Suggestions? Keep it simple folks, I am a novice.
thanks in advance.
/* To change your header image create an image that is */
/* 900 pixels wide by ~150 pixels high and name it */
/* header.jpg and place in the images folder in your */
/* theme directory. Then add the url as noted below. */
div#header {
background-image: url(); /* <– add url to background image between these parentheses */
background-repeat: no-repeat;
background-position: 50% 50%;
margin-left: 0;
padding: 1.5em 30px .5em;
max-height:150px;
min-height: 50px;
overflow: hidden;
Just to make it cleared- The main difference from about 6 tutorial/troubleshoot i read before this is they only said to make the name lower case- In my situation, i have version numbers after the template name with dots (highlight_v1.2.3)- So i was using just “highlight” and was getting errors- i never realized that the Template needs to be exactly the parent folder name – This tutorial saved my ass!
3 Trackbacks
[...] Home PageOther OptionsEnable/Disable CommentsDating Your WorkUpdating and Backing UpAdding VideoModifying Theme FilesScreenshotsWPFolio User Showcase « Getting rid of “Comments are closed” [...]
[...] Home PageOther OptionsEnable/Disable CommentsDating Your WorkUpdating and Backing UpAdding VideoModifying Theme FilesScreenshotsWPFolio User Showcase « Securing WordPress Version 1.6 submitted to WordPress [...]
[...] Modifying Theme Files [...]