[Jules29]

Hi there,
I am very new to WordPress and this was my first time creating a child theme for Nirvana using the WordPress Beginner Tutorial. I was successful in creating the child theme. Yay! However, I needed to change the social icons to my own customized PNG files. I resized them into 26×26 files and named them all the same as what they are named in the parent theme. Then I followed your instructions on Nirvana FAQ page to download the extra socials child theme. I entered the PNG file names into the functions file and added my new PNG files into the socials folder. I didn’t want to recreate another child theme since I already had one that I had started customizing so I set up the folders in my cPanel the same as the extrasocials folder hierarchy. I then uploaded the PHP file to the nirvana-extrasocials folder (same name as the original) and uploaded my PNG files into the socials folder (within the images folder) under wp-content/themes/Nirvana – Child (that is the name I chose for my child theme). I thought I had done all of the steps correctly but the old nirvana social icons are still showing in the front end of my site. And I don’t see them at all in the back end anywhere. I’m not sure what I did wrong. I didn’t see an option to attach my functions file so I have copied and pasted the content below for you. And I haven’t added anything to my CSS file apart from the name and header info and the command to copy the parent theme. Any help you can give me would be much appreciated! Please note, I do not know any coding apart from creating the new function file and CSS file from following the beginner tutorials. Please let me know if you need any further info from me to provide instruction.
Thanks so much,
Julie

<?php
/**************************
* Nirvana – Child extra social icons theme example
* version 0.1 / 20150525 / for Nirvana v1.0.4 and up
* (c) Cryout Creations
* ***********************/

$extraSocials = array(
‘Bloglovin’,
‘Etsy’,
‘Facebook’,
‘GooglePlus’,
‘Instagram’,
‘Pinterest’,
‘RSS’,
‘Snapchat’,
‘Twitter’,
‘YouTube’,
// edit and/or add your extra socials here;
// leave this array empty if you only want to replace the images in your child theme
// the new social icons image files need to be placed in the nirvana-extrasocials/images/socials folder,
// with the exact same name(s) used above; capitalization DOES matter!
);

// *** no configurables below; only edit if you know what you’re doing ***

// EXTRA SOCIAL ICONS CODE
// overload the social icons array
function child_override(){
global $socialNetworks, $extraSocials;
if (is_array($socialNetworks))
$socialNetworks = array_merge( $socialNetworks, $extraSocials );
};
// add hook for overload function
add_action( ‘after_setup_theme’, ‘child_override’ );

// custom child theme socials display function – it picks the image file if found in the child theme
function nirvana_set_social_icons($idd) {
$cryout_special_keys = array(‘Mail’, ‘Skype’);
global $nirvanas;
foreach ($nirvanas as $key => $value) {
${“$key”} = $value ;
}
echo ‘<div class=”socials” id=”‘.$idd.'”>’;
for ($i=1; $i<=9; $i+=2) {
$j=$i+1;
if ( ${“nirvana_social$j”} ) {
if (in_array(${“nirvana_social$i”},$cryout_special_keys)) :
$cryout_current_social = esc_html( ${“nirvana_social$j”} );
else :
$cryout_current_social = esc_url( ${“nirvana_social$j”} );
endif;
$icon = get_stylesheet_directory_uri().’/images/socials/’.${“nirvana_social$i”}.’.png’;
$childicon = get_stylesheet_directory().’/images/socials/’.${“nirvana_social$i”}.’.png’;

if (!file_exists($childicon)) { $icon = get_template_directory_uri().’/images/socials/’.${“nirvana_social$i”}.’.png’; }; ?>

rel=”nofollow” href=”<?php echo $cryout_current_social; ?>”
class=”socialicons social-<?php echo esc_attr(${“nirvana_social$i”}); ?>” title=”<?php echo ${“nirvana_social_title$i”} !=”” ? esc_attr(${“nirvana_social_title$i”}) : esc_attr(${“nirvana_social$i”}); ?>”>
” src=”<?php echo $icon; ?>” />
<?php
}
}
echo ‘</div>’;
} // nirvana_set_social_icons()
// END EXTRA SOCIAL ICONS CODE

?>

Website: reviewzbyjewelz.com

[Jules29]

Also, I’m now getting this error message in the front end of my site when in customize mode ever since.

The page isn’t redirecting properly

Firefox has detected that the server is redirecting the request for this address in a way that will never complete.

This problem can sometimes be caused by disabling or refusing to accept cookies.

[Zed]

The social images are not displayed anywhere in the dashboard.

If you’re only replacing the images (and don’t intend to add new networks that are not originally in the list) you don’t need to add them to the $extraSocials array.

Gather the new images and upload them as
wp-content/themes/Nirvana – Child/images/socials/*Social*.png

Leave the extra array empty:
$extraSocials = array( );
and include the rest of the provided code in your child theme’s functions.php.

Be careful with php opening/closing tags (so they don’t create errors) and make sure you preview the edited child theme before activating it with the new code.

---

If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.

[Jules29]

Great! Thanks so much for responding, Zed! My new social icons are now showing in the front end. 🙂 I did everything you directed above and it worked. But I still have some questions:

1) How would I add additional social networks? I left only the new social networks in the $extrasocials array as follows:

<?php
/**************************
* Nirvana – Child extra social icons theme example
* version 0.1 / 20150525 / for Nirvana v1.0.4 and up
* (c) Cryout Creations
* ***********************/

$extraSocials = array(
‘Bloglovin’,
‘Etsy’,
‘RSS’,
‘Snapchat’,
// edit and/or add your extra socials here;
// leave this array empty if you only want to replace the images in your child theme
// the new social icons image files need to be placed in the nirvana-extrasocials/images/socials folder,
// with the exact same name(s) used above; capitalization DOES matter!
);

And I added them to the socials folder with the other files. Now how do I get them to appear?

2) Also, I am still getting the following error when trying to customize my site through the front end. Do you know what would cause it? You mentioned “make sure you preview the edited child theme before activating it with the new code” but it doesn’t give me the option to preview. The only option it gives me is to “customize” which takes me to the front end customize screen where I get the error message. If I go to just preview my site without customizing, it looks fine. I only get the error message in the customize screen. The child theme was working fine until I added the php file. I’m wondering if I put it in the wrong place maybe? I have it saved to: wp-content/themes/Nirvana – Child/ and I amended it as stated above and checked for closing and opening tags. And my css file just has the basic opening header info that I added from the child theme tutorial.

The page isn’t redirecting properly

Firefox has detected that the server is redirecting the request for this address in a way that will never complete.

This problem can sometimes be caused by disabling or refusing to accept cookies.

3) Also, I wanted to ask you how modifying the social icons in the theme effects the Publicize and Social widgets with Jetpack. Do I have to follow the directions on their site to modify the icons? And how does that interact with the new social icons I just added to the child theme? Does one override the other? How do I correctly modify their widgets and icons like the profile photo badge, follow me on…. buttons, etc?

4) Lastly, I need to replace the menu buttons for the main header ie About, Blog, Contact, etc. Is there a way to do this? I also would like to replace the search bar and add sidebar tabs, profile badge photo, etc. These are all png or jpeg files I purchased from a blog branding kit. But I was told I didn’t need to know any css! lol

I know these are a lot of questions but I’m totally lost about how to do it! Any help or direction you can give me is so very much appreciated!!

Thanks, Zed! Julie

Website: reviewzbyjewelz.com

[Zed]

1) Just add the new social icons to the array list:

$extraSocials = array(
'New Social',
‘Another New Social’,
);

And place their images in the same subfolder as the replacement icons (making sure the filenames are identical to the strings written here).

Don’t include existing social icons to this array, you’ll just get them listed twice in the theme settings dropdowns. Including the new images into the child theme folder (in the proper location) is sufficient to replace the icon.

2) To test a customized child theme it is preferred to switch back to the parent theme first, then modify the child theme and preview it in the Customizer before activating it to make sure everything works and the changes don’t cause a fatal error. You cannot preview a (child) theme that is already active on the site.

3) Jetpack’s icons belong to Jetpack. You’ll need to read their documentation and follow their guidelines on how to change them.

4) As I cannot browse your site I don’t know what exactly you are trying to customize. Some tweaks can be made with just CSS, but depending on the extent of the customizations and the affected elements (like using images for buttons, for example), further changes to both CSS and HTML and even PHP may be needed.

---

If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.

[Jules29]

Hi Zed,

Thanks so much for your detailed response! I really appreciate your help! If I could afford to, I would just hire someone to do it for me but I can’t work due to health reasons thus my income is very tight which is why I’m trying to do all of this myself. So I appreciate your help to figure this out! Here is my response with further questions.

1) That’s exactly what I have done but I am still only seeing the 5 social icons (that didn’t need to be added to the CSS as I was just replacing images), but not the additional 4 that I added into the CSS array as advised above. I just checked the names of the socials in the parent theme and 2 out of the 4 I have renamed exactly the same (ie. ‘Etsy’,’RSS’,). However, I just noticed that there are no original social icons for Bloglovin’ or Snapchat. Does this mean I can’t use these 2 icons? If I can, what else do I need to do? If I can’t, that still doesn’t explain why the other 2 newly added icons aren’t showing up. Is 5 the limit or can you have an unlimited number?

2 a) In order to get rid of the error message in the customization screen of my child theme, I need to deactivate it to test it as you have recommended but that means I will lose hours of work. Is there any way to save the customizations already done somewhere for reference or do I have to manually write them down one by one in order to apply them again to the child theme once fixed? And will the previewing of the child theme tell me what is wrong with it or will I still not know why I’m getting the error message?

2 b) Do you think it would be better, since I am not very tech savvy or knowledgable about CSS, PHP, etc, to just use the custom CSS area in the parent theme of Nirvana or the custom CSS widget in Jetpack in order to customize the parent theme without losing anything with theme updates? Or do you recommend fixing my child theme and customizing it that way?

3) Ok, thanks. I kinda figured that but I wasn’t sure if modifying the social icons through the theme or Jetpack was better.

4) The company I bought the blog branding kit from gave me instructions to basically add all of the images into a text widget box for the sidebar and then copy and paste image URL’s into the box in order to link to the images. I haven’t tried this yet as I wanted to try to follow the theme instructions first. But would this work just as well? (Here is a portion of the instructions copied below since I can’t upload the file.)

The next step is where you will need to place some code and the URL code from the graphic file, you uploaded. Place the code below exactly as you see it – in the widget text content box.

For just graphics – that don’t need a link to them (header images):

For graphics – that you want to link:

Example:

If you are uploading your social media icons it might be easier for you to use one box – just for the icons.

5) Is there a way I can add you as an administrator temporarily so that you can see my website for yourself since it isn’t live yet? That way you can see the error message and what types of customizations I’m trying to make?

[Jules29]

Hi Zed,

Just following up as I didn’t get a response to my last post. Since then, I deleted my child theme that was giving me the error and created a new child theme by downloading the extra socials child theme. It is working now with zero errors so that is one issue fixed.

However, I still need help with the following:

1) Adding additional social icons – I did exactly as you instructed but I am still only seeing the 5 social icons (that didn’t need to be added to the CSS as I was just replacing images), but not the additional 4 that I added into the CSS array as advised above. I checked the names of the socials in the parent theme and 2 out of the 4 I have renamed exactly the same (ie. ‘Etsy’,’RSS’,). However, I just noticed that there are no original social icons for ‘Bloglovin’’ or ‘Snapchat’. Does this mean I can’t use these 2 icons? If I can, what else do I need to do to make them appear? If I can’t, that still doesn’t explain why ‘Etsy’ and ‘RSS’ aren’t showing up. Is there a limit of 5 social accounts or is it unlimited?

2) I still can’t figure out how to replace images in the Jetpack plugin. All I can find online are instructions on how to modify the look of the buttons but not how to replace them with your own images. Can you advise where to save my images in my cpanel and what css I need to add to replace them? I’ve searched Jetpack’s website and forum and can’t find how to replace the images.

3) Can you instruct me on how to replace/add my own images to the primary menu bar so that instead of the menu header typed in in the menu field, it would be an image? (jpeg or png) Would I use the custom URL option?

Thanks in advance for your help, Zed! I really want to get my website up and running soon!
Julie

[Jules29]

As well as how I would replace the back to top button, next post button, search button, etc.

[Jules29]

and like button

[Author]

Posts