Go to WordPress dashboard - Appearance - Themes - Add New
Click "Upload theme"
Upload sparkling-child.zip
Now Activate Sparkling Child theme like any other theme by going to WordPress dashboard - Appearance - Themes
This Child Theme won’t do anything and it is completely clean but it will work exactly like it should. You can start moving Sparkling template files from Parent Theme folder to Child Theme folder and edit them there. You can also add your custom CSS to style.css.
Some files such as extras.php and other that are not part of default WordPress structure won’t work by copy/pasting them to Child Theme and this is where functions.php file comes into the game. Copy separate functions that you want to edit from extras.php file to Child Theme functions.php and edit them there.
if you have any questions, feel free to ask theme here on this thread or open a new thread.
I modified several files in the original theme folder, amongst others index.php, header.php, popular-post-widget.php and bootstrap.css.
If integrated in child theme, the benefit of update is lost. To keep it there seems a way via ‘get_template_part’ but I don’t no how to do this. For example:
In index.php I added a custom div class inside the div class “top-section”.
index.php, header.php can be copy/pasted from Parent Theme to Child Theme and edited there.
Never edit library files such as bootstrap.css, flexslider.js because they will be updated regularly and they are meant to be as core part with custom CSS on top of it. These files are untouched and are directly from their developers, I have just added extra styling and functions via other .js .css files.
For popular-post-widget.php it might be a bit trick and you will have to use get_stylesheet_directory function to include it in Child Theme. You can read more about this function here.
Hello, first off, thanks for the great theme and the willingness to set up a child-theme as well as encouraging the concept.
I’m trying to add some form validation using the jquery validate plugin. I’ve added this to the child functions.php file like so:
/*
* Add the jQuery validation plugin.
* These script are used to validate forms; Make sure you update the form id in the settings file.
*/
wp_enqueue_script( 'jQueryValidate', get_template_directory_uri() . '/inc/js/jQueryValidate/jquery.validate.min.js', array('jquery'), '1.11.1', true );
wp_enqueue_script( 'jQueryValidateMethods', get_template_directory_uri(). '/inc/js/jQueryValidate/additional-methods.min.js', array( 'jquery' ), '1.12.0', true );
wp_enqueue_script( 'jQueryValidateSettings', get_template_directory_uri(). '/inc/js/jQueryValidate/jquery.validate-settings.js', array( 'jquery' ), '1.12.0', true );
However, because of the get_template_directory_uri() the theme is looking for the scripts in the parent. Any suggestions on how I might change this?
Excellent efforts. One question though, I do not want to change any functionality of the theme, I want all the theme functions, concept and elements to remain as it is. The only change I want to make is the appearance. I would like to know how that can be achieved? How could I just make the changes to the styles and appearance which are not affected when you release updates? I want to modify the existing style sheet but the changes should not be overwritten when you release the new versions of the theme. I want to know what all style sheets do I need to modify to change the overall appearance of each and every design element?
You need to write you own styles on top of existing ones and should do it via Child Theme style.css. Don’t touch anything that is currently in example given above and start in a new line by writing your own styles there. This is the best way to do it and all changes will remain in place even after update.
Thank you for immediate response. Hats off to you for such a fantastic product without a charge and on top of that - providing support for customization and further theme development. (which most theme developers at TF refuse right away even if we purchase something from them).
Sorry to bother you with another question, if I select the sparkling-child as my main theme and make changes to the style.css file inside the sparking-child folder, will I still be able to use all the functions of the main sparkling theme? Like shortcodes and glyphs?
Or do I need to copy everything from “sparkling” to “sparkling-child”?
No need to copy anything to Child Theme folder unless you want to edit something in those files. Child Theme will work on top of the regular theme. That’s why “sparkling” folder can’t be deleted and it should remain in place.
For instance if you want to edit something directly in index.php file then you have to copy/paste it to Child Theme folder and edit it there and WordPress will take it as first(more important) than one in parent theme.
For small CSS changes just write everything in Child Theme style.css
I am making a child theme for Sparkling, so I guess I would be using this thread for support. While modifying the files, I’ve come up with the following questions so far:
Q1) Is it possible to include a functional button in the navigation bar on the top at the end of it? A button like the Sign Up/ Subscribe like the most websites have these days. I want it to have a different appearance than the other text links in the navigation bar on the top. If it is possible, how would we achieve that?
Q2) Is it possible to have the flex-slider include some non-clickable descriptive text and a clickable call-to-action button along with the sliding background images (Instead of pulling post title/ content details from featured category)?
Thank you for answering some support question on this forum! I really appreciate it!
The easiest method would be to use the regular menu items as you can link them to anywhere but style those items based on their ID by using CSS. The basic idea would be something like this
I wrote this to style “contact us” menu item on your theme demo. You just need to to use Chrome Dev tools or Firefox dev tools to inspect which menu item you want to target and write a CSS for it.
Above given example is nothing really fancy but it does make menu item different from the rest.
Any slider plugin would get the job done but you will have to implement it yourself and of course it will look different from the current one.
Other options is to modify current slider. Here is an example where I left only Post title, and added call for action button for existing slider. Nothing really fancy but would be a great place to start.
if ( ! function_exists( 'sparkling_featured_slider' ) ) :
/**
* Featured image slider, displayed on front page for static page and blog
*/
function sparkling_featured_slider() {
if ( is_front_page() && of_get_option( 'sparkling_slider_checkbox' ) == 1 ) {
echo '<div class="flexslider">';
echo '<ul class="slides">';
$count = of_get_option( 'sparkling_slide_number' );
$slidecat =of_get_option( 'sparkling_slide_categories' );
$query = new WP_Query( array( 'cat' =>$slidecat,'posts_per_page' =>$count ) );
if ($query->have_posts()) :
while ($query->have_posts()) : $query->the_post();
echo '<li>';
if ( (function_exists( 'has_post_thumbnail' )) && ( has_post_thumbnail() ) ) :
echo get_the_post_thumbnail();
endif;
echo '<div class="flex-caption">';
if ( get_the_title() != '' ) echo '<h2 class="entry-title">'. get_the_title().'</h2>';
echo '<a class="btn btn-default btn-lg" href="'. get_permalink() .'">Call for action</a>';
echo '</div>';
endwhile;
endif;
echo '</li>';
echo '</ul>';
echo ' </div>';
}
}
endif;
Code will run via Child Theme as well when added on Child Theme functions.php file.
Both of the tips worked like a charm. Few more small questions:
Is it possible to have both left and right sidebars? If so, how do we achieve that?
There is no spacing between the link and the glyphs in navigation menu. Navigation menu items when combined with glyphs appear altogether, how do I insert a space between them?
Is it possible to reduce width of the posts in main blog page as well as posts page? I found the settings for the images in functions.php file and it reduces image size, but could not figure out how to do this for the rest of the post?
Is it possible to have the call-to-action bar below the posts instead of the top?
Is it possible for the call-to-action bar to appear globally instead of just the main page? If so, what code should I include in which file(s)?
It requires heavy modification to theme. The basic idea would be like this:
a) You have to register a new widget area.
b) Create a new sidebar-left.php file
c) Modify all theme files to call for this sidebar as well as the old one.
It is doable and not very difficult task but it will take a lot of time to implement and polish.
There should be a space. Not a big one but still. If you want to make it larger you can use the following code. Of course you can change margin to get the results you were looking for.
.nav li span {
margin-right: 10px;
}
Since theme is responsive the easiest method would be to reduce width of the entire content area. That way sidebar will become narrower as well. Here is an example how to reduce width by 100px.
Can be done via child theme as well. Just copy/paste both files to Child Theme folder and edit it there.
Now you will have call for action section in footer but to make it visible on all pages you have to add this function to Child Theme functions.php file.
Thank you once again Aigars. I’m now knowledgeable when it comes to PHP. As per my understanding there are certain functions and hooks that need to be defined in functions, and then we can call those functions anywhere we want. But knowing this much alone is nothing, WordPress is a very vast topic which requires deep study and understanding. I must say that you’re a master at it. Since creating a new left sidebar would require me PHP knowledge so I’ll skip that for now. Thanks for the help so far, would let you know if I require any further assistance.
I started to learn programming only one year ago and I am far from being a good programmer. Each theme is a challenge to me but I learn a lot from each and everyone one of it. Even some support requests are challenging and I have to learn new things to respond to those questions.
Everyone have to start somewhere and I started with HTML/CSS and moved to WordPress theme development while learning PHP fundamentals. I am still not confident enough to build premium WordPress themes but I will get there sooner or later.
I need to ask if it is possible to have the side bar load first on mobiles. The reason is that due to infinite scroll adverts on sidebar may never be seen otherwise is it possible to disable infinite scroll?
Secondly is there a plugin for heard adverts that works with Sparkling theme? One that allows you to add you own image.
Welcome back home! Hope you had a great vacation last week.
As I told you earlier, I was creating a child theme for Sparkling. I’m done with most of the work, however, need your help as I am stuck with Home Page layout -vs- Post Page.
My query is: is there any class or id selector available that can style the home page and post page differently? If there is no existing selector available, then what is the procedure of creating one?
I’ve posted two screenshots below which will help you understand what I’m stuck at.
I see. Thank you so much Aigars, it worked like a charm. I never doubt whatever you suggest because it works without a fail every time! Just now when I viewed source for home page, post page, different post format pages, single page default and single page full width, I noticed they have different body classes. Thank you so much for that, once again you’ve been very helpful. My problem was that I was using fixed navbar and the content for each post and page moved behind the navbar because those posts or pages did not have the call for action button like the home page but what you’ve suggested will easily fix this with a couple of lines of CSS. Also I learnt something new, that we can style different post formats differently in this way. I might not want to do it because it is a good idea to keep the design consistent throughout the blog, it gives a more professional look. I’m not sure if you agree but this is what I think.
I am in the process of trimming code and check cross browser compatibility, because right now I have used only chrome-specific selectors so once I’m done with that (probably a week from now) I’ll email the child theme to you to review. In a week or so, you might have enough free time as you should be taking care of the pending work!
Take care, peace!
Amit.
ps. Vinod has done a great job while you were away, he is a very skilled individual.
Hello Aigars, Amit and all.
First of all thank you for a wonderful theme. I liked it so much I told a friend she should this one out of a selection of themes she had for a blog she wants. She wants a couple of modifications and (after reading about child themes) I suggested I could help her.
But. I am afraid you all are much more advanced in coding than me. I cannot even make two very little, simple things to work. #1. She asked me to change the footer info on her site, from saying “Powered by WordPress” (leading to WordPress) to “Powered by My Fabulous Site” (leading to her personal site).
Following the instructions here, I downloaded the Sparkling Child Theme, activated it, added a functions.php file, modified it and ended up with the following code in the child-theme/functions.php
<?php
// Add your custom functions here
/**
* Custom functions that act independently of the theme templates.
*/
/**
* function to show the footer info, copyright information
*/
function sparkling_footer_info() {
global $sparkling_footer_info;
printf( __( 'Theme by %1$s Designed by %2$s', 'sparkling' ) , '<a href="https://colorlib.com/" target="_blank">Colorlib</a>', '<a href="http://her-site.com/" target="_blank">Her Wonderfull Site</a>');
}
?>
Unfortunately it did not work. The site was totally gone giving Fatal Error. :o
#2. She also wants to use the “Comic Sans MS family fonts” By default. I could not find them under the theme options and tried to add them. I tried what was suggested here, using get_stylesheet_directory. Another disaster.
Could you please, please, please tell exactly what to write and where to solve these two issues?
