LA – Create a WordPress Theme

The process

After looking at this week’s learning activity, I decided to let the previous child theme that I had created rest, and start from scratch with a new parent theme that is easily customized using mainly CSS.

This time, since I am creating a theme, I will be adding various snippets and hacks to the theme as well. These were mainly given and provided by Noroff, and then I will be adding some myself as well.

After doing some research into frameworks, parent themes, child themes and grandchild themes, I tried finding a theme that had a lot of adaptability, and that would be a parent theme, or to build a parent theme from a framework.

I have been looking into the free resources options – Beans and Gantry, and I have also been looking into WooCommerce.

Firstly I tried using WooCommerce, and Storefront as the main theme. But since I do not have anything to sell at this point in time, I found that having to showcase for example, the shop-basket in the menu was a little bit confusing for a viewer.

Installing the Child Theme

I then tried installing beans, and their primary child theme template folder. I started by adding all the snippets that Noroff had provided me, and throughout this process I made some notes to take into account.

Snippets by Noroff

Adding a favicon:
Create a favicon.ico that is located in the root folder

Detecting Safari:
I created a new file called “iphone.css” to the root folder, and I changed the “common.css” to “style.css”, which is the name of the normal CSS-file in my root-folder. The “iphone.css” is currently without content, though.

FeedBurner:
I changed the URL inside the function to match my page, although as of now this was just a guess. I firstly need to create a feed inside of my page, and then I need to register the FeedBurner-account here with Google.

FeedBurner subscribers:
I added a custom message into the function, saying “Exclusively to my dear subscribers:”. I also noted the new shortcode = [feedonly].

FeedBurner:
I might decide to change this whole idea to Feedly instead, after reading this article. I might also add some Social Media-icons inside the feed.

Show content to Logged-in-Only: shortcode = [loggedin]

Share on Social Media:
Notice the classes used inside this function, as they can be added to the “style.css”-file. Ex. class=”share-entry”. I also added the if( !is_singular – statement to the function in order to only show this on the post. I might change this later.

Customized log-in page:
I made the folder “images”, and I am going to add the file with the right name for the logo OR I will change the name of the file to match. I might change the style as it is added a custom <style> inside the function.

Other Snippets

I then added some other snippets that I thought might come in handy, from various sites (see Sources and Resources/Snippets). These sections are copied from the sites.

Improving Website Caching

Caching is very important for any website. To leverage caching, you need to use the correct commands in .htaccess files.

Use the following code in your .htaccess to enable browser caching and improve the website loading time for users across the world.

## EXPIRES CACHING ##ExpiresActive OnExpiresByType image/jpg “access 1 year”ExpiresByType image/jpeg “access 1 year”ExpiresByType image/gif “access 1 year”ExpiresByType image/png “access 1 year”ExpiresByType text/css “access 1 month”ExpiresByType application/pdf “access 1 month”ExpiresByType text/x-javascript “access 1 month”ExpiresByType application/x-shockwave-flash “access 1 month” ExpiresByType image/x-icon “access 1 year”ExpiresDefault “access 2 days”## EXPIRES CACHING ##

Always remember to backup the .htaccess file before making any change.

Optimizing the Dashboard with Customized Message

Whenever you login in your WordPress dashboard, you are welcomed by the automated system, “Howdy, User Name“. At the start, it looks great. But, you might want to replace it with the user that is logged in your website.

Without replacing the name, it can seem that the admin is watching you or similar kinds of reaction. To make sure that the user is comfortable, you need to customize a little.

Adding the following code to the function.php file will do the necessary trick.

function replace_howdy($wp_admin_bar) {$my_account = $wp_admin_bar->get_node(‘my-account’);$newtitle = str_replace(‘Howdy’, ‘Logged in as’, $my_account -> title);$wp_admin_bar -> add_node(array(‘id’ => ‘my-account’,’title’ => $newtitle,));} add_filter(‘admin_bar_menu’, ‘replace_howdy’, 25);

 20. Highlight author comments

To highlight the author comments, find the following code in your CSS file.

.bypostauthor { background: #eee; }

22. Change the footer text on the dashboard

Add the following code to functions file to customize the footer text on the WordPress dashboard.

function remove_footer_admin () {

echo “Your own text”;

}

add_filter(‘admin_footer_text’, ‘remove_footer_admin’);

65. Use SSL mode for log in

If you have an SSL certificate installed on your server, you can force your WP installation to use SSL mode for secure user log in.
For that, add the below code to wp-config.php file.
define(‘FORCE_SSL_LOGIN’, true);

Incidentally, if you want to avoid all of the hassle associated with getting an SSL yourself, our host, InMotion, actually supports SSL hosting, via their InMotion shared accounts. Read our full review here: https://www.collectiveray.com/web-design/web-hosting/inmotion-vps-hosting-review.html

79. Remove post date stamp from SERP

If your content is not time sensitive, make sure you avoid displaying WordPress post date stamp on SERP, which will increase the CTR of your posts that displays on SERP.
Go to single.php file and find something like this

<?php the_time(‘F jS, Y’) ?>

Replace it with the following code

document.write(“”);

80. Prevent image hotlinking

Protecting your images from hotlinking will help you save lots of bandwidth by preventing other sites from displaying your images.
Simply go to .htaccess file and add the below code. Make sure you replace the ‘your-domain-name’ part with your actual domain name.

RewriteEngine on

RewriteCond %{HTTP_REFERER} !^$

RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-domain-name [NC]

RewriteRule \.(jpg|jpeg|png|gif)$ – [NC,F,L]

81. Restrict bots access

By preventing vulnerable bots from accessing your website, you can tighten the security of your WordPress blog. Copy the following code to .htaccess file.

SetEnvIfNoCase User-Agent ^$ keep_out

SetEnvIfNoCase User-Agent (pycurl|casper|cmsworldmap|diavol|dotbot) keep_out

SetEnvIfNoCase User-Agent (flicky|ia_archiver|jakarta|kmccrew) keep_out

SetEnvIfNoCase User-Agent (purebot|comodo|feedfinder|planetwork) keep_out

Order Allow,Deny

Allow from all

Deny from env=keep_out

89. Disable HTML in comments

Spammers used to submit tons of HTML links while commenting, which can have negative impact in bringing organic traffic to your website. Simply open functions.php and insert the following code to disable HTML elements in comments.

// This will occur when the comment is posted

function plc_comment_post( $incoming_comment ) {

 

// convert everything in a comment to display literally

$incoming_comment[‘comment_content’] = htmlspecialchars($incoming_comment[‘comment_content’]);

 

// the one exception is single quotes, which cannot be #039; because WordPress marks it as spam

$incoming_comment[‘comment_content’] = str_replace( “‘”, ‘&apos;’, $incoming_comment[‘comment_content’] );

return( $incoming_comment );

}

// This will occur before a comment is displayed

function plc_comment_display( $comment_to_display ) {

 

// Put the single quotes back in

$comment_to_display = str_replace( ‘&apos;’, “‘”, $comment_to_display );

return $comment_to_display;

 

91. Add pinterest “pin it” button

Add the following code to the footer.php file.

(function() {

window.PinIt = window.PinIt || { loaded:false };

if (window.PinIt.loaded) return;

window.PinIt.loaded = true;

function async_load(){

var s = document.createElement(“script”);

s.type = “text/javascript”;

s.async = true;

s.src = “http://assets.pinterest.com/js/pinit.js&#8221;;

var x = document.getElementsByTagName(“script”)[0];

x.parentNode.insertBefore(s, x);

}

if (window.attachEvent)

window.attachEvent(“onload”, async_load);

else

window.addEventListener(“load”, async_load, false);

})();

Then, add following code to your single.php file

<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘full’ ); ?>

<a href=”http://pinterest.com/pin/create/button/?url=&lt;?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>” class=”pin-it-button” count-layout=”vertical”>Pin It</a>

93. Install Facebook Comments

Integrating Facebook Comments to your blog posts will offer an easy way for your readers to comment on your blog as well as share it on Facebook.
Read the ultimate guide to display Facebook Comments on your blog.

93. Install Facebook Comments

Integrating Facebook Comments to your blog posts will offer an easy way for your readers to comment on your blog as well as share it on Facebook.
Read the ultimate guide to display Facebook Comments on your blog.

After I created the app-structure on Facebook that the site said, I started implementing the code that they provided. I will be working on this further after I have built more of the front-end look and feel.

Conclusion

I will still be working on the details of the customization, and the CSS in order to create a theme that I find visually intriguing, but as of now – this answers the learning activity. I will try to create

Thank you,

 

Sources and Resources

Research

https://digital.com/blog/wordpress-frameworks/

https://woocommerce.com/

https://bloomscape.com/ – This website is based on WooCommerce and WordPress. SO PRETTY!

https://woocommerce.com/product-category/storefront-extensions/

https://www.smashingmagazine.com/2016/01/create-customize-wordpress-child-theme/

https://www.wpbeginner.com/showcase/best-woocommerce-wordpress-themes/

http://justintadlock.com/archives/2010/08/16/frameworks-parent-child-and-grandchild-themes

https://athemes.com/collections/best-wordpress-theme-frameworks/

https://www.themebutler.com/resources/uikit-element-library-for-sketch/

https://themeforest.net/item/cindy-j-personal-creative-portfolio-blog-and-cv/15142699?ref=monikaratan&utm_source=superdevresources&utm_medium=26.02.2018_showcase&utm_campaign=portfolio

https://superdevresources.com/creative-portfolio-wordpress-themes/

https://superdevresources.com/enable-https-wordpress/

https://superdevresources.com/feminine-wordpress-themes/

Resources

ServerPress

Theme – Storefront by WooCommerce

Codex – https://docs.woocommerce.com/documentation/plugins/woocommerce/woocommerce-codex/

https://www.getbeans.io/

Lynda.com

WordPress: Building Child Themes – Morten Rand-Hendriksen

Snippets

Provided by Noroff from Smashingmagazine.com

https://www.wpexplorer.com/best-woocommerce-snippets/

https://www.wpexplorer.com/best-woocommerce-snippets-wordpress/

https://www.pootlepress.com/2015/02/21-tips-tricks-and-css-tweaks-for-woothemes-storefront/

https://nicola.blog/category/snippets/

https://nicola.blog/2018/04/01/customize-footer-credits-storefront/

https://www.wpbeginner.com/wp-tutorials/25-extremely-useful-tricks-for-the-wordpress-functions-file/

https://www.wpglobalsupport.com/code-snippets-for-wordpress-website/

https://www.collectiveray.com/wp/wordpress-tips-tricks-hacks

https://wpdean.com/wordpress-code-snippets/

https://www.smashingmagazine.com/2015/06/wordpress-custom-page-templates/

 

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: