Title: Hide Posts?
Last modified: August 20, 2016

---

# Hide Posts?

 *  [mcfmullen](https://wordpress.org/support/users/mcfmullen/)
 * (@mcfmullen)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/hide-posts-1/)
 * Alright, so I want my registered users to be able to do several things with the
   posts they see on my site where each post would have trigger buttons: Like and
   Don’t Like
 * 1) Mark posts they like
    2) Mark posts they don’t like
 * The site would then allow each user to Show/Hide all liked posts and Show/Hide
   all disliked posts.
 * This permits the user to see only what they choose to see: Stuff they like, stuff
   they don’t like, stuff they haven’t marked, or a mix.
 * To see an example of what I mean see: [http://www.win-free-stuff.ca/new-contests](http://www.win-free-stuff.ca/new-contests)
 * That site does run on wordprees. Looking at page source is a dead giveaway but
   the admin won’t respond on how he did it.
 * Any ideas on how this can be implemented are welcomed. I assume it uses mootools
   or scriptaculous but I don’t know how the buttons can be made to function.

Viewing 15 replies - 1 through 15 (of 16 total)

1 [2](https://wordpress.org/support/topic/hide-posts-1/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/hide-posts-1/page/2/?output_format=md)

 *  Thread Starter [mcfmullen](https://wordpress.org/support/users/mcfmullen/)
 * (@mcfmullen)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/hide-posts-1/#post-2259610)
 * Alright. Using scriptaculous, I managed to get a Hide Post link to show next 
   to each post. Clicking it will hide the post. Perfect.
 *     ```
       <?php while (have_posts()) : the_post(); ?>
   
       			<div class="post" id="post-<?php the_ID(); ?>">
       			<div class="hide">
       			<a href="#" onclick="Effect.toggle('post-<?php the_ID(); ?>', 'appear'); return false; ">Hide this post</a>
       			</div>
       ```
   
 * Now the hard part:
    I have to replace the Hide Post with two bottons: Like and
   Hate
 * These buttons would function like switches. The site would then present the user
   with Hide all Liked and Hide all Hated buttons.
 * Does this require cookies or MySQL? How would I set this up?
 * The only thing I can think of is a MySQL database storing USER ID, Post ID, liked
   and hated but with an infinite possibility of user and posts, I’d think it more
   efficient to use cookies but I’ve never used cookies before!
 *  [popper](https://wordpress.org/support/users/julialasarte/)
 * (@julialasarte)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/hide-posts-1/#post-2259612)
 * Well, MySQL is not a bad idea, the amount of data wouldn’t be that big. You could
   do a simple [HABTM](http://en.wikipedia.org/wiki/Many-to-many_(data_model)) relationship
   between Posts and Users, so the only thing you should add is the relation table
   where you link the User ID whit the post ID and perhaps an integer value indicating
   wheter they liked/hated a post.
 *  Thread Starter [mcfmullen](https://wordpress.org/support/users/mcfmullen/)
 * (@mcfmullen)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/hide-posts-1/#post-2259630)
 * the problem here though is the wp_posts and wp_users both use the name ID so 
   I can’t create a relational table because both have the same tags. The only way
   around it would be to duplicate the ID into a new field which is redundant and
   a waste of space.
 * Any ideas?
 *  [popper](https://wordpress.org/support/users/julialasarte/)
 * (@julialasarte)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/hide-posts-1/#post-2259666)
 * The fact that they both use the name ID for the primary key doesn’t matter at
   all, since you would be creating a new table, say:
 * `liked_hated = (post_ID, opinion, user_ID)`
 * where you could name the fields whatever you want.
 *  Thread Starter [mcfmullen](https://wordpress.org/support/users/mcfmullen/)
 * (@mcfmullen)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/hide-posts-1/#post-2259734)
 * yes but the foreign keys won’t work if the names aren’t the same.
 *  [popper](https://wordpress.org/support/users/julialasarte/)
 * (@julialasarte)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/hide-posts-1/#post-2259785)
 * Obviously, I’m missing something here. What won’t work? As far as I know, you
   can define a foreign key no matter the name of your field in relation to field
   it references.
 *  Thread Starter [mcfmullen](https://wordpress.org/support/users/mcfmullen/)
 * (@mcfmullen)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/hide-posts-1/#post-2259786)
 * In any case, MySQL would be the least efficient way of doing this. Some posts
   get deleted, etc. Would it not be better to do this using jQuery/Mootools/Scriptaculous?
   I.E a like button per post that stores its values in a cookie. The site checks
   the cookie and hides those posts. The site than also has buttons that allow the
   user to manual show/hide such posts?
 * My problem is actually getting that to work. If anyone has any ideas, please 
   don’t be shy!
 *  [popper](https://wordpress.org/support/users/julialasarte/)
 * (@julialasarte)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/hide-posts-1/#post-2259790)
 * The thing with cookies, though, is that the user may choose to delete them, so
   you can’t trust them completely for data persistence. Also, post being deleted
   wouldn’t be a problem if you make post_ID a foreign key and choose Cascade on
   delete.
 * However, it’s your choice. If you prefer cookies, it would be pretty easy doing
   the whole thing with jQuery and [this](https://github.com/carhartl/jquery-cookie)
   plugin.
 * Suppose you have a “hate” and “like” button inside #hate and #like divs:
 *     ```
       $(document).ready(function(){
        $("#hate").click(function(){
         $("#post_div").hide();
         $.cookie('post_id','hate');
        });
   
       $("#like").click(function(){
         $("#post").show();
         $.cookie('post_id','like');
        });
       });
       ```
   
 *     ```
       var show = $.cookie('post_id');
       if (show=='hide')
       	$("#post_div").hide();
       ```
   
 * It’s a simple example, but you get the idea. You’d need to check for null values
   too, and pass the post(s) on the page as a parameter to the script.
 *  Thread Starter [mcfmullen](https://wordpress.org/support/users/mcfmullen/)
 * (@mcfmullen)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/hide-posts-1/#post-2259791)
 * perfect. Thank you so much!
 *  Thread Starter [mcfmullen](https://wordpress.org/support/users/mcfmullen/)
 * (@mcfmullen)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/hide-posts-1/#post-2259796)
 * okay… what should my css have? how do I get the buttons to work? Say I have a
   png file with On and Off in it, how do I get it to switch between the two parts
   of the image?
 *  [popper](https://wordpress.org/support/users/julialasarte/)
 * (@julialasarte)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/hide-posts-1/#post-2259798)
 * I would do the toogle adding some classes to the button. Say:
 *     ```
       .on {
           background-image: on.jpg;
       }
       .off {
           background-image: off.jpg;
       }
       ```
   
 * Then in the JS you can just add or remove the class as you need it.
 *     ```
       $("#button").click(function (){
           if ($(this).hasClass("on")) {
                  arrow.addClass("off").removeClass("off");
           }
       });
       ```
   
 * That’s the basic idea. That’s about all my jQuery expertise, though, :P.
 *  Thread Starter [mcfmullen](https://wordpress.org/support/users/mcfmullen/)
 * (@mcfmullen)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/hide-posts-1/#post-2259799)
 * Call me stupid but I can’t get any of your jQuery to work. This is what I’ve 
   done:
 *     ```
       .clear { /* generic container (i.e. div) for floating buttons */
           overflow: hidden;
           width: 100%;
       }
   
       a.button {
           background: transparent url(images/entered.png) no-repeat top center;
           color: #444;
           display: block;
           float: left;
           height: 30px;
           width: 28px;
           margin-bottom: 10px;
           padding-right: 18px; /* sliding doors padding */
           text-decoration: none;
       }
   
       a.button:active {
           background-position: bottom center;
           color: #000;
           outline: none; /* hide dotted outline in Firefox */
       }
       ```
   
 * `<a class="button" href="#" onclick="this.blur();"></a>`
 * That is for the button. It switches between ‘on’ and ‘off’ states through CSS
   with a catch: it only switches when I click. When I let go of the mouse, it reverts
   to its ‘off’ state. How can I get the ‘on’ state to stay once clicked?
 *  [popper](https://wordpress.org/support/users/julialasarte/)
 * (@julialasarte)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/hide-posts-1/#post-2259817)
 * Well, all of my jQuery is untested, so maybe it isn’t working. Where are you 
   adding it? Did you link again the jQuery library?
 * Regarding the example you posted, it won’t work unless you attach the class permanently
   to the `<a>`element. Which you could do like I posted above, or switching between
   your class and another one.
 *  Thread Starter [mcfmullen](https://wordpress.org/support/users/mcfmullen/)
 * (@mcfmullen)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/hide-posts-1/#post-2259818)
 * how would I call your function through onclick=”” ?
 *  [popper](https://wordpress.org/support/users/julialasarte/)
 * (@julialasarte)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/hide-posts-1/#post-2259822)
 * You wouldn’t, you should link to the jQuery library, then define the function
   inside a `<script>` inside the head, like:
 *     ```
       <script type="text/javascript">
       $(document).ready(function(){
        $("#hate").click(function(){
         $("#post_div").hide();
         $.cookie('post_id','hate');
        });
   
       $("#like").click(function(){
         $("#post").show();
         $.cookie('post_id','like');
        });
       });
       </script>
       ```
   
 * In the above, you are defining de onClick() action of a particular div, with 
   the function .click(). That’s the “jQuery way” ;P. I would recommend you take
   a look at the jQuery documentation, if you want to use the framework.
 * Again, it might be that the example is not working due to something else: js 
   conflicts, perhaps? Maybe try to define some basic behavior first, like a message
   pop up when a user clicks on a button, to see if that works.

Viewing 15 replies - 1 through 15 (of 16 total)

1 [2](https://wordpress.org/support/topic/hide-posts-1/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/hide-posts-1/page/2/?output_format=md)

The topic ‘Hide Posts?’ is closed to new replies.

## Tags

 * [hide posts](https://wordpress.org/support/topic-tag/hide-posts/)
 * [scriptaculous](https://wordpress.org/support/topic-tag/scriptaculous/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 16 replies
 * 2 participants
 * Last reply from: [mcfmullen](https://wordpress.org/support/users/mcfmullen/)
 * Last activity: [14 years, 7 months ago](https://wordpress.org/support/topic/hide-posts-1/page/2/#post-2259826)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics