Skip to content
This repository has been archived by the owner on Jul 25, 2023. It is now read-only.

Commit

Permalink
New Icon Font
Browse files Browse the repository at this point in the history
Replaced Font Awesome with a new icon font with a rather small
footprint.
  • Loading branch information
JonMasterson committed Aug 10, 2014
1 parent 576f1aa commit 9a9f124
Show file tree
Hide file tree
Showing 15 changed files with 601 additions and 27 deletions.
11 changes: 7 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,21 @@ A simple and efficient post like system for WordPress. <a href="http://jonmaster

Check out <a href="http://hofmannsven.com/2013/laboratory/wordpress-post-like-system/" target="_blank">this post</a> on <a href="https://twitter.com/hofmannsven" target="_blank">Sven Hofmann's</a> site for more information.

Originally, this system utilized <a href="http://fontawesome.io/" target="_blank">Font Awesome</a> for the heart and gear icons. The Font Awesome version is still available in the <em>vendor</em> folder for those who are already using Font Awesome in their theme.

<h3>Four Steps to Glory</h3>
<ol>
<li>Add the styles from <em>like-styles.css</em> to your theme's main stylesheet.</li>
<li>Add <em>post-like.js</em> to your theme's <em>js</em> folder (if it exists). If there is no <em>js</em> folder, create one and add <em>post-like.js</em> to it.</li>
<li>Add the CSS to your theme's main stylesheet.</li>
<li>Add <em>post-like.min.js</em> to your theme's <em>js</em> folder (if it exists). If there is no <em>js</em> folder at your theme's root level, create one and add <em>post-like.min.js</em> to it.</li>
<li>Add all the fonts to your theme's <em>fonts</em> folder (if it exists). If there is no <em>fonts</em> folder at your theme's root level, create one and add all the fonts to it.</li>
<li>Add the contents of post-like.php to your theme's functions.php file.</li>
<li>Implement the button by doing one of the following:
<ol>
<li>Add the button function ( echo getPostLikeLink( get_the_ID() ); ) to your theme's single page template (typically content-single.php)</li>
<li>Add the button function to your theme's single page template (typically content-single.php) — <code><?php echo getPostLikeLink( get_the_ID() ); ?></code></li>
<li>Include the [jmliker] shortcode in your posts</li>
</ol>
</li>
</ol>

<h3>Troubleshooting</h3>
This plugin is pretty simple, and does not have many moving parts. Some folks have encountered issues with AJAX-loaded content, and others have had some trouble with plugin conflicts. Feel free to open an issue if your stuck, and I will do my best to help you solve it.
This post like system is pretty simple, and does not have many moving parts. Some folks have encountered issues with AJAX-loaded content, and others have had some trouble with plugin conflicts. Feel free to open an issue if your stuck, and I will do my best to help you solve it.
94 changes: 94 additions & 0 deletions css/like-styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
/* Post Like System */
@font-face {
font-family: "like_font";
src: url("./fonts/like_font.eot");
src: url("./fonts/like_font.eot?#iefix") format("embedded-opentype"),
url("./fonts/like_font.woff") format("woff"),
url("./fonts/like_font.ttf") format("truetype"),
url("./fonts/like_font.svg#like_font") format("svg");
font-weight: normal;
font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: "like_font";
src: url("./fonts/like_font.svg#like_font") format("svg");
}
}

[data-icon]:before { content: attr(data-icon); }

[data-icon]:before,
.icon-gear:before,
.icon-like:before,
.icon-unlike:before {
display: inline-block;
font-family: "like_font";
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: 1;
text-decoration: inherit;
text-rendering: optimizeLegibility;
text-transform: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}

.icon-like:before { content: "\f105"; }
.icon-unlike:before { content: "\f106"; }
.icon-gear:before {
content: "\f104";
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}

@-moz-keyframes spin {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(359deg); }
}

@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(359deg); }
}

@-o-keyframes spin {
0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(359deg); }
}

@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}

a.jm-post-like {
font-weight: normal;
display: inline-block;
width: auto;
-moz-transition: all 0.3s ease-out 0.2s;
-webkit-transition: all 0.3s ease-out 0.2s;
-o-transition: all 0.3s ease-out 0.2s;
}

a.jm-post-like.liked { color: #da1b1b; }

a.jm-post-like:hover,
a.jm-post-like:active,
a.jm-post-like:focus,
a.liked:hover,
a.liked:active,
a.liked:focus {
color: #000;
}
1 change: 1 addition & 0 deletions css/like-styles.min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file added fonts/like_font.eot
Binary file not shown.
45 changes: 45 additions & 0 deletions fonts/like_font.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added fonts/like_font.ttf
Binary file not shown.
Binary file added fonts/like_font.woff
Binary file not shown.
32 changes: 32 additions & 0 deletions js/post-like.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
jQuery(document).ready(function() {
jQuery('body').on('click','.jm-post-like',function(event){
event.preventDefault();
heart = jQuery(this);
post_id = heart.data("post_id");
heart.html("<i id='icon-like' class='icon-like'></i><i id='icon-gear' class='icon-gear'></i>");
jQuery.ajax({
type: "post",
url: ajax_var.url,
data: "action=jm-post-like&nonce="+ajax_var.nonce+"&jm_post_like=&post_id="+post_id,
success: function(count){
if( count.indexOf( "already" ) !== -1 )
{
var lecount = count.replace("already","");
if (lecount === "0")
{
lecount = "Like";
}
heart.prop('title', 'Like');
heart.removeClass("liked");
heart.html("<i id='icon-unlike' class='icon-unlike'></i>&nbsp;"+lecount);
}
else
{
heart.prop('title', 'Unlike');
heart.addClass("liked");
heart.html("<i id='icon-like' class='icon-like'></i>&nbsp;"+count);
}
}
});
});
});
1 change: 1 addition & 0 deletions js/post-like.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

37 changes: 14 additions & 23 deletions post-like.php
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
/*
Name: WordPress Post Like System
Description: A simple and efficient post like system for WordPress.
Version: 0.3.3
Version: 0.4
Author: Jon Masterson
Author URI: http://jonmasterson.com/
Expand All @@ -27,7 +27,7 @@
* (1) Enqueue scripts for like system
*/
function like_scripts() {
wp_enqueue_script( 'jm_like_post', get_template_directory_uri().'/js/post-like.js', array('jquery'), '1.0', 1 );
wp_enqueue_script( 'jm_like_post', get_template_directory_uri().'/js/post-like.min.js', array('jquery'), '1.0', 1 );
wp_localize_script( 'jm_like_post', 'ajax_var', array(
'url' => admin_url( 'admin-ajax.php' ),
'nonce' => wp_create_nonce( 'ajax-nonce' )
Expand All @@ -37,16 +37,7 @@ function like_scripts() {
add_action( 'init', 'like_scripts' );

/**
* (2) Add Fontawesome Icons
*/
function enqueue_icons () {
wp_register_style( 'icon-style', 'http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css' );
wp_enqueue_style( 'icon-style' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_icons' );

/**
* (3) Save like data
* (2) Save like data
*/
add_action( 'wp_ajax_nopriv_jm-post-like', 'jm_post_like' );
add_action( 'wp_ajax_jm-post-like', 'jm_post_like' );
Expand Down Expand Up @@ -141,7 +132,7 @@ function jm_post_like() {
}

/**
* (4) Test if user already liked post
* (3) Test if user already liked post
*/
function AlreadyLiked( $post_id ) { // test if user liked before
if ( is_user_logged_in() ) { // user is logged in
Expand Down Expand Up @@ -183,26 +174,26 @@ function AlreadyLiked( $post_id ) { // test if user liked before
}

/**
* (5) Front end button
* (4) Front end button
*/
function getPostLikeLink( $post_id ) {
$like_count = get_post_meta( $post_id, "_post_like_count", true ); // get post likes
$count = ( empty( $like_count ) || $like_count == "0" ) ? 'Like' : esc_attr( $like_count );
if ( AlreadyLiked( $post_id ) ) {
$class = esc_attr( ' liked' );
$title = esc_attr( 'Unlike' );
$heart = '<i class="fa fa-heart"></i>';
$heart = '<i id="icon-liked" class="icon-like"></i>';
} else {
$class = esc_attr( '' );
$title = esc_attr( 'Like' );
$heart = '<i class="fa fa-heart-o"></i>';
$heart = '<i id="icon-unliked" class="icon-unlike"></i>';
}
$output = '<a href="#" class="jm-post-like'.$class.'" data-post_id="'.$post_id.'" title="'.$title.'">'.$heart.'&nbsp;'.$count.'</a>';
return $output;
}

/**
* (6) Retrieve User Likes and Show on Profile
* (5) Retrieve User Likes and Show on Profile
*/
add_action( 'show_user_profile', 'show_user_likes' );
add_action( 'edit_user_profile', 'show_user_likes' );
Expand Down Expand Up @@ -241,7 +232,7 @@ function show_user_likes( $user ) { ?>
<?php }

/**
* (7) Add a shortcode to your posts instead
* (6) Add a shortcode to your posts instead
* type [jmliker] in your post to output the button
*/
function jm_like_shortcode() {
Expand All @@ -250,7 +241,7 @@ function jm_like_shortcode() {
add_shortcode('jmliker', 'jm_like_shortcode');

/**
* (8) If the user is logged in, output a list of posts that the user likes
* (7) If the user is logged in, output a list of posts that the user likes
* Markup assumes sidebar/widget usage
*/
function frontEndUserLikes() {
Expand Down Expand Up @@ -282,7 +273,7 @@ function frontEndUserLikes() {
}

/**
* (9) Outputs a list of the 5 posts with the most user likes TODAY
* (8) Outputs a list of the 5 posts with the most user likes TODAY
* Markup assumes sidebar/widget usage
*/
function jm_most_popular_today() {
Expand Down Expand Up @@ -314,7 +305,7 @@ function jm_most_popular_today() {
}

/**
* (10) Outputs a list of the 5 posts with the most user likes for THIS MONTH
* (9) Outputs a list of the 5 posts with the most user likes for THIS MONTH
* Markup assumes sidebar/widget usage
*/
function jm_most_popular_month() {
Expand Down Expand Up @@ -346,7 +337,7 @@ function jm_most_popular_month() {
}

/**
* (11) Outputs a list of the 5 posts with the most user likes for THIS WEEK
* (10) Outputs a list of the 5 posts with the most user likes for THIS WEEK
* Markup assumes sidebar/widget usage
*/
function jm_most_popular_week() {
Expand Down Expand Up @@ -378,7 +369,7 @@ function jm_most_popular_week() {
}

/**
* (12) Outputs a list of the 5 posts with the most user likes for ALL TIME
* (11) Outputs a list of the 5 posts with the most user likes for ALL TIME
* Markup assumes sidebar/widget usage
*/
function jm_most_popular() {
Expand Down
File renamed without changes.
1 change: 1 addition & 0 deletions vendor/fontawesome/css/like-styles.min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

File renamed without changes.
1 change: 1 addition & 0 deletions vendor/fontawesome/js/post-like.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 9a9f124

Please sign in to comment.