{"id":8285,"date":"2021-12-13T15:22:35","date_gmt":"2021-12-13T23:22:35","guid":{"rendered":"https:\/\/www.dognmonkey.com\/techs\/?p=8285"},"modified":"2021-12-14T16:45:06","modified_gmt":"2021-12-15T00:45:06","slug":"how-to-customize-colorlib-sparkling-theme","status":"publish","type":"post","link":"https:\/\/www.dognmonkey.com\/techs\/how-to-customize-colorlib-sparkling-theme.html","title":{"rendered":"How To Customize Colorlib Sparkling Theme"},"content":{"rendered":"<p><em>\u00a0 \u00a0<a href=\"https:\/\/colorlib.com\/wp\/themes\/\" target=\"_blank\" rel=\"noopener\"><button class=\"w3-button w3-blue w3-round-xlarge\">Colorlib<\/button><\/a> has 2 light weight, mobile friendly and fast themes that I like, <a href=\"https:\/\/www.dognmonkey.com\/techs\/wp-blaskan-theme-by-colorlib.html\" target=\"_blank\" rel=\"noopener\"><button class=\"w3-button w3-green w3-round-xlarge\">Blaskan<\/button><\/a> and <a href=\"https:\/\/colorlib.com\/wp\/themes\/sparkling\/\" target=\"_blank\" rel=\"noopener\"><button class=\"w3-button w3-red w3-round-xlarge\">Sparkling<\/button><\/a>. Today I&#8217;m going to customize the Sparkling theme for my blogs. The goal is to get the theme to display social icons and links at entry-meta, display thumbnails on the recent posts and work with all my shortcodes.<\/em><\/p>\n<div class=\"igallery\">\n<p style=\"text-align: center;\"><a title=\"pagespeed mobile Test\" href=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/z_pagespeed_mobile_sparkling.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-8289\" src=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/z_pagespeed_mobile_sparkling-200x112.jpg\" alt=\"pagespeed Sparkling mobile\" width=\"200\" height=\"112\" \/><\/a> <a title=\"pagespeed desktop Test\" href=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/z_pagespeed_desktop_sparkling.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-8288\" src=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/z_pagespeed_desktop_sparkling-200x112.jpg\" alt=\"Pagespeed Sparkling Desktop\" width=\"200\" height=\"112\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><a title=\"gtmetrix speed Test\" href=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/z_gtmetrix_audi_sparkling1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-8287\" src=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/z_gtmetrix_audi_sparkling1-200x112.jpg\" alt=\"gtmetrix sparkling speed\" width=\"200\" height=\"112\" \/><\/a> <a title=\"gtmetrix speed Test\" href=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/z_gtmetrix_audi_sparkling.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-8286\" src=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/z_gtmetrix_audi_sparkling-200x112.jpg\" alt=\"gtmextrix sparkling audi\" width=\"200\" height=\"112\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><a title=\"social share index page\" href=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/z_social_index.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-8290\" src=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/z_social_index-200x112.jpg\" alt=\"social share index\" width=\"200\" height=\"112\" \/><\/a> <a title=\"social share single page\" href=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/z_social_single.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-8291\" src=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/z_social_single-200x112.jpg\" alt=\"social shares single\" width=\"200\" height=\"112\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><a title=\"thumbnails on posts\" href=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/z_thumbnails_posts.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-8294\" src=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/z_thumbnails_posts-200x112.jpg\" alt=\"thumbnails with posts\" width=\"200\" height=\"112\" \/><\/a><\/p>\n<p><em> \u00a0 \u00a0 -This theme doesn&#8217;t have the social icon links like Blaskan, so I had to modify the &#8220;inc\/template-tags.php&#8221; to add the social icons and links.<\/em><\/p>\n<p style=\"text-align: center;\"><a title=\"template-tags.php adds for social icons\" href=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/z_template_tags_mod.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-8301\" src=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/z_template_tags_mod-200x112.jpg\" alt=\"template_tags_php mod\" width=\"200\" height=\"112\" \/><\/a><\/p>\n<blockquote><p>$url <span class=\"Apple-converted-space\">\u00a0 <\/span>= urlencode( esc_url(get_permalink()) );<\/p>\n<p>$title = urlencode( esc_attr(get_the_title()) );<\/p>\n<p><b>echo<\/b> &#8216;&lt;a href=&#8221;https:\/\/www.facebook.com\/sharer\/sharer.php?u=&#8217; <b>.<\/b> $url <b>.<\/b> &#8216;&#8221; target=&#8221;_blank&#8221; class=&#8221;social-icons&#8221;&gt;&lt;i class=&#8221;fa fa-facebook&#8221; aria-hidden=&#8221;true&#8221;&gt;&lt;\/i&gt;&lt;\/a&gt;&#8217;;<\/p>\n<p><b>echo<\/b> &#8216;&lt;a href=&#8221;https:\/\/twitter.com\/home?status=&#8217; <b>.<\/b> $url <b>.<\/b> &#8216;&#8221; target=&#8221;_blank&#8221; class=&#8221;social-icons&#8221;&gt;&lt;i class=&#8221;fa fa-twitter&#8221; aria-hidden=&#8221;true&#8221;&gt;&lt;\/i&gt;&lt;\/a&gt;&#8217;;<\/p>\n<p><span class=\"Apple-converted-space\">\u00a0 \u00a0 \u00a0 \u00a0 <\/span><b>if<\/b> ( has_post_thumbnail() ) {<\/p>\n<p><span class=\"Apple-converted-space\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>$image = urlencode( esc_url((get_the_post_thumbnail_url( get_the_ID(), &#8216;full&#8217; ))) );<\/p>\n<p><span class=\"Apple-converted-space\">\u00a0<\/span><b>echo<\/b> &#8216;&lt;a href=&#8221;https:\/\/pinterest.com\/pin\/create\/button\/?url=&#8217; <b>.<\/b> $url <b>.<\/b> &#8216;&amp;media=&#8217; <b>.<\/b> $image <b>.<\/b> &#8216;&#8221; target=&#8221;_blank&#8221; class=&#8221;social-icons&#8221;&gt;&lt;i class=&#8221;fa fa-pinterest-p&#8221; aria-hidden=&#8221;true&#8221;&gt;&lt;\/i&gt;&lt;\/a&gt;&#8217;;<\/p>\n<p><span class=\"Apple-converted-space\">\u00a0 \u00a0 \u00a0 \u00a0 <\/span>}<\/p>\n<p><span class=\"Apple-converted-space\">\u00a0<\/span><b>echo<\/b> &#8216;&lt;a href=&#8221;https:\/\/www.linkedin.com\/shareArticle?mini=true&amp;url=&#8217; <b>.<\/b> $url <b>.<\/b> &#8216;&amp;title=&#8217; <b>.<\/b> $title <b>.<\/b> &#8216;&#8221; target=&#8221;_blank&#8221; class=&#8221;social-icons&#8221;&gt;&lt;i class=&#8221;fa fa-linkedin&#8221; aria-hidden=&#8221;true&#8221;&gt;&lt;\/i&gt;&lt;\/a&gt;&#8217;;<\/p>\n<p><span class=\"Apple-converted-space\">\u00a0<\/span><b>echo<\/b> &#8216;&lt;a href=&#8221;mailto:?subject= I want to share this post&amp;amp;body= good read &#8216; <b>.<\/b> $url <b>.<\/b> &#8216;&#8221; target=&#8221;_blank&#8221; class=&#8221;social-icons&#8221;&gt;&lt;i class=&#8221;fa fa-envelope-o&#8221; aria-hidden=&#8221;true&#8221;&gt;&lt;\/i&gt;&lt;\/a&gt;&#8217;;<\/p>\n<p>&nbsp;<\/p><\/blockquote>\n<p><em>\u00a0 \u00a0-To load all my custom shortcodes, I need to modify &#8220;functions.php&#8221; by adding all the mods.<\/em><\/p>\n<p style=\"text-align: center;\"><a title=\"functions.php shortcodes php adds\" href=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/z_functions_php_adds.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-8304\" src=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/z_functions_php_adds-200x112.jpg\" alt=\"functions_php_adds\" width=\"200\" height=\"112\" \/><\/a><\/p>\n<p>\u00a0 \u00a0<em>-Change the location of the style.css to styleb.min.css<\/em><\/p>\n<blockquote><p>wp_enqueue_style( &#8216;sparkling-bootstrap&#8217;, get_template_directory_uri() <b>.<\/b> &#8216;\/assets\/css\/bootstrap.min.css&#8217; );<\/p><\/blockquote>\n<p style=\"text-align: center;\"><a title=\"change location of style.css to styleb.min.css\" href=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/z_functiona_php_css.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-8306\" src=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/z_functiona_php_css-200x112.jpg\" alt=\"functions_style_css\" width=\"200\" height=\"112\" \/><\/a><\/p>\n<p>\u00a0 \u00a0&#8211;<em>For style.css all I need to change was the font-size on the body to 18px, .entry-meta with #1FA67A color and 14px.<\/em><\/p>\n<p style=\"text-align: center;\"><a title=\"body mods\" href=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/body.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-8309\" src=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/body-200x112.png\" alt=\"Body mod\" width=\"200\" height=\"112\" \/><\/a> <a title=\"entry-meta mods\" href=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/entry_meta.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-8310\" src=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/entry_meta-200x112.png\" alt=\"entry-meta mod\" width=\"200\" height=\"112\" \/><\/a><\/p>\n<\/div>\n<ul class=\"lcp_catlist\" id=\"lcp_instance_0\"><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u00a0 \u00a0 has 2 light weight, mobile friendly and fast themes that I like, and . Today I&#8217;m going to customize the Sparkling theme for my blogs. The goal is to get the theme to display social icons and links at entry-meta, display thumbnails on the recent posts and work with all my shortcodes. \u00a0 <a href=\"https:\/\/www.dognmonkey.com\/techs\/how-to-customize-colorlib-sparkling-theme.html\" class=\"more-link\">&#8230;<\/a><\/p>\n","protected":false},"author":1,"featured_media":8287,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,20],"tags":[1530,1531,1541,1532],"class_list":["post-8285","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-themes","category-wordpress","tag-blaskan","tag-colorlib","tag-social-icon","tag-sparkling"],"views":186,"_links":{"self":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts\/8285","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/comments?post=8285"}],"version-history":[{"count":3,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts\/8285\/revisions"}],"predecessor-version":[{"id":8311,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts\/8285\/revisions\/8311"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/media\/8287"}],"wp:attachment":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/media?parent=8285"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/categories?post=8285"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/tags?post=8285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}