bavotasan.com » someone http://bavotasan.com by c.bavota Tue, 07 Feb 2012 15:42:10 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 WordPress 3.0: Activating the Background Editor http://bavotasan.com/2010/wordpress-3-activating-background-editor/ http://bavotasan.com/2010/wordpress-3-activating-background-editor/#comments Mon, 07 Jun 2010 21:31:39 +0000 c.bavota http://bavotasan.com/?p=2193 Adding a color or image to your Web site’s background is not a very complicated thing to do if you are familiar with CSS. Luckily for those out there who know nothing about CSS, WordPress 3.0 introduces a simple admin user-interface that makes it extremely simple to select a color or image for your background. There are even controls for image position, repeating and attachment.

The new background editor in WordPress 3.0

Activating the background editor only requires that you add one line of code to your theme’s functions.php file.

if(function_exists('add_custom_background')) add_custom_background();

This will add the “Background” link to your Appearance panel in the wp-admin. Placing it inside the function_exists() function makes it backwards compatible in case someone uses your theme with WordPress 2.9.

]]> http://bavotasan.com/2010/wordpress-3-activating-background-editor/feed/ 14 Making Cookies with PHP http://bavotasan.com/2010/making-cookies-with-php/ http://bavotasan.com/2010/making-cookies-with-php/#comments Thu, 21 Jan 2010 17:25:01 +0000 c.bavota http://bavotasan.com/?p=1661 I’ve been going nuts over the past month trying to complete a project for a large retail store and it seems like every new request they make requires me to learn something new about PHP. Coding challenges are always great because they lead you to discover new ways to take advantage of what your coding language has to offer. This one is pretty straightforward but great to know.

First we need to set the cookie:

<?php 
  // basic setting
  // setcookie(name, value, expire, path, domain); 
  $expire = time() + 60 * 60 * 24 * 30; // expires in one month
  setcookie('visited','yes',$expire);
?>

The above cookie records that someone has already visited the site. It will expire in one month and the path and domain are set automatically if left blank. If you do not include an expiration time, the cookie will only be stored for the current session.

NOTE: Cookies must always be set before anything else, so be sure to place it above the <html> tag at the top of your file.

Here is how you would retrieve a cookie:

<?php 
  // display one cookie with the name "visited"
  $the_cookie = $_COOKIE['visited'];
 
  // see all cookies
  print_r($_COOKIE); 
?>

To delete a cookie we need to take advantage of the expire variable:

<?php 
  // set the cookie to expire one hour in the past
  $expire = time() - 3600;
  setcookie('visited', '', $expire);
?>

Resource: PHP: setcookie – Manual

]]> http://bavotasan.com/2010/making-cookies-with-php/feed/ 5 Magazine Premium is Ready and I Want to Give Away 5 Copies http://bavotasan.com/2010/magazine-premium-is-almost-ready-and-i-want-to-give-away-5-free-copies/ http://bavotasan.com/2010/magazine-premium-is-almost-ready-and-i-want-to-give-away-5-free-copies/#comments Mon, 11 Jan 2010 18:08:08 +0000 c.bavota http://bavotasan.com/?p=1634 I’m almost finished Magazine Premium and I thought it would be a good idea to open up a discussion to see what features people would like to see available. Now don’t go crazy, and please don’t repeat the same requests. I’ll take the top 5 best requests (that aren’t a part of the theme already) and I’ll add them to Magazine Premium. I’ll also give a free copy to those who suggested the top 5.

Add your suggestions in the comments below. If someone already suggested a feature you wanted, don’t fret, just think of something else you might want to see in Magazine Premium.

Here is a quick list of features that I have already added:

  • widgetized footer bar
  • custom footer text
  • optional “Powered by WordPress” link
  • checkboxes for cats and pages to include in nav menu
  • optional secondary nav menu
  • optional search bar or home link in main nav menu
  • 4 front page section with selectable category feed
  • variable site and sidebar width
  • featured slideshow with selectable category feed
  • optional images for each front page section
  • font selection
  • color selection
  • sidebar ads widget
  • sidebar tabs widget (recent comments, popular posts and subscribe)
  • simple mailing list/subscribe to our mailing list function
  • custom CSS editor
  • full width page template (no sidebars)
  • new single page options panel with Ajax save function (no more page reloading to save)
  • drop-down login panel

Those are all of the features I can think of right now.

Here is a sneak peak of the new options panel:

Here is sample of the new design layout:

It still has a little ways to go so don’t be too judgmental.

WINNER #1: Matt – a more elaborate author page
WINNER #2: tinym – presets and @font-face kits
WINNER #3: Marcus – more control of the Read More link
WINNER #4: Boris – choose the post’s thumbnail image
WINNER #5: Scott – easily add links to the nav and sub-nav menus

]]> http://bavotasan.com/2010/magazine-premium-is-almost-ready-and-i-want-to-give-away-5-free-copies/feed/ 48 How to Add Nested Comments to Your WordPress Theme http://bavotasan.com/2009/how-to-add-nested-comments-to-your-wordpress-theme/ http://bavotasan.com/2009/how-to-add-nested-comments-to-your-wordpress-theme/#comments Mon, 02 Mar 2009 16:53:55 +0000 c.bavota http://bavotasan.com/?p=333 When WordPress 2.7 came out, there were a lot of new features, most of which probably passed by under your radar. I know I missed a bunch and thankfully, I am starting to notice how much more powerful WordPress has become. I had someone request making my Magazine Basic theme function with nested comments and that started me on researching just how this new WP feature worked. It ended up being a harder nut to crack than I first thought, but crack it I did (though I probably spend way too much time on it).

There are quite a few steps to making your theme work with nested comments but the easiest thing to do to start off is open up your theme’s comments.php file and replace it with this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

<?php
 
// Do not delete these lines
if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
die ('Please do not load this page directly. Thanks!');
 
if ( post_password_required() ) { ?>
<p class="nocomments">This post is password protected. Enter the password to view comments.</p>
<?php
return;
}
?>
 
<!-- You can start editing here. -->
 
<?php if ( have_comments() ) : ?>
<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;</h3>
 
<div class="navigation">
<div class="alignleft"><?php previous_comments_link() ?></div>
<div class="alignright"><?php next_comments_link() ?></div>
</div>
 
<ol class="commentlist">
<?php wp_list_comments(); ?>
</ol>
 
<div class="navigation">
<div class="alignleft"><?php previous_comments_link() ?></div>
<div class="alignright"><?php next_comments_link() ?></div>
</div>
<?php else : // this is displayed if there are no comments so far ?>
 
<?php if ('open' == $post->comment_status) : ?>
<!-- If comments are open, but there are no comments. -->
 
<?php else : // comments are closed ?>
<!-- If comments are closed. -->
<p class="nocomments">Comments are closed.</p>
 
<?php endif; ?>
<?php endif; ?>
 
<?php if ('open' == $post->comment_status) : ?>
 
<div id="respond">
 
<h3><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></h3>
 
<div class="cancel-comment-reply">
<small><?php cancel_comment_reply_link(); ?></small>
</div>
 
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>
<?php else : ?>
 
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
 
<?php if ( $user_ID ) : ?>
 
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out &raquo;</a></p>
 
<?php else : ?>
 
<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>
 
<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>
 
<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>
 
<?php endif; ?>
 
<!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>-->
 
<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
 
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<?php comment_id_fields(); ?>
</p>
<?php do_action('comment_form', $post->ID); ?>
 
</form>
 
<?php endif; // If registration required and not logged in ?>
</div>
 
<?php endif; // if you delete this the sky will fall on your head ?>

Now, you need to make sure that nested comments are activated on your WordPress install by going to your admin panel => Settings => Discussion and checking “Enable threaded (nested) comments” Set the level to whatever you want. I like using 2 levels.

If you return to a post page on your site, you should now see reply buttons after each post. And if you click reply, you will noticed that not much happens other than “Click here to cancel reply.” appearing above your reply window. It is a little too subtle for me, so luckily there is a great Javascript hook already installed that you can call by just adding this:

1

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

to you header.php file above <?php wp_head(); ?>.

Now when you click reply, the reply box appears directly below the comment you want to reply to. This is a great little feature and it makes your comments section more intuitive for your user.

The only thing left, really, is styling your comments. With WordPress 2.7, one hook creates the whole comment loop, as opposed to before when you had to call the avatar, the comment text, the date and all that jazz. There is a lot happening with <?php wp_list_comments(); ?> and though some might find it awesome that you don’t have to worry about adding tons of code, others might not like the fact that you can’t edit what appears in your comments and where. There is a solution to this that I will show you below, but for now lets talk about CSS.

WP 2.7 nested comments introduce some new classes and ids for you to style as you wish. It is a pretty long list though.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

ol.commentlist {}
ol.commentlist li {}
ol.commentlist li.alt {}
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment {}
ol.commentlist li.comment div.comment-author {}
ol.commentlist li.comment div.vcard {}
ol.commentlist li.comment div.vcard cite.fn {}
ol.commentlist li.comment div.vcard cite.fn a.url {}
ol.commentlist li.comment div.vcard img.avatar {}
ol.commentlist li.comment div.vcard img.avatar-32 {}
ol.commentlist li.comment div.vcard img.photo {}
ol.commentlist li.comment div.vcard span.says {}
ol.commentlist li.comment div.commentmetadata {}
ol.commentlist li.comment div.comment-meta {}
ol.commentlist li.comment div.comment-meta a {}
ol.commentlist li.comment * {} - (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.comment div.reply {}
ol.commentlist li.comment div.reply a {}
ol.commentlist li.comment ul.children {}
ol.commentlist li.comment ul.children li {}
ol.commentlist li.comment ul.children li.alt {}
ol.commentlist li.comment ul.children li.bypostauthor {}
ol.commentlist li.comment ul.children li.byuser {}
ol.commentlist li.comment ul.children li.comment {}
ol.commentlist li.comment ul.children li.comment-author-admin {}
ol.commentlist li.comment ul.children li.depth-2 {}
ol.commentlist li.comment ul.children li.depth-3 {}
ol.commentlist li.comment ul.children li.depth-4 {}
ol.commentlist li.comment ul.children li.depth-5 {}
ol.commentlist li.comment ul.children li.odd {}
ol.commentlist li.even {}
ol.commentlist li.odd {}
ol.commentlist li.parent {}
ol.commentlist li.pingback {}
ol.commentlist li.pingback div.comment-author {}
ol.commentlist li.pingback div.vcard {}
ol.commentlist li.pingback div.vcard cite.fn {}
ol.commentlist li.pingback div.vcard cite.fn a.url {}
ol.commentlist li.pingback div.vcard span.says {}
ol.commentlist li.pingback div.commentmetadata {}
ol.commentlist li.pingback div.comment-meta {}
ol.commentlist li.pingback div.comment-meta a {}
ol.commentlist li.pingback * {} - (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.pingback div.reply {}
ol.commentlist li.pingback div.reply a {}
ol.commentlist li.pingback ul.children {}
ol.commentlist li.pingback ul.children li {}
ol.commentlist li.pingback ul.children li.alt {}
ol.commentlist li.pingback ul.children li.bypostauthor {}
ol.commentlist li.pingback ul.children li.byuser {}
ol.commentlist li.pingback ul.children li.comment {}
ol.commentlist li.pingback ul.children li.comment-author-admin {}
ol.commentlist li.pingback ul.children li.depth-2 {}
ol.commentlist li.pingback ul.children li.depth-3 {}
ol.commentlist li.pingback ul.children li.depth-4 {}
ol.commentlist li.pingback ul.children li.depth-5 {}
ol.commentlist li.pingback ul.children li.odd {}
ol.commentlist li.thread-alt {}
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}

The depth actually goes down to level 10 but I stopped at level 5 above. Hopefully you get the idea. There are a lot of elements to style but of course, you don’t have to style them all. For my Magazine Basic theme, I used only the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

ol.commentlist { list-style:none; margin:0; padding:0; }
ol.commentlist li { border:1px solid #d5d5d5; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; margin:0 0 10px; padding:5px 7px 5px 64px; position:relative; }
ol.commentlist li.pingback comment-author { padding:0 170px 0 0; }
ol.commentlist li div.vcard { font-weight:bold; font-size: 14px; line-height: 16px; font-family: helvetica,arial,sans-serif; }
ol.commentlist li div.vcard cite.fn { font-style:normal; font-size: 11px; }
ol.commentlist li div.vcard cite.fn a.url { color:#cc0000; text-decoration:none; }
ol.commentlist li div.vcard cite.fn a.url:hover { color:#000; }
ol.commentlist li div.vcard img.avatar { background: #fff; border:1px solid #aaa; padding: 5px; left:7px; position:absolute; top:7px; }
ol.commentlist li div.comment-meta { font-weight:bold; font-size: 10px; line-height: 16px; font-family: helvetica,arial,sans-serif; position:absolute; right:10px; text-align:right; top:5px; }
ol.commentlist li div.comment-meta a { color:#205B87; text-decoration:none; }
ol.commentlist li p { font-weight:normal; font-size: 12px; line-height: 16px; font-family: helvetica,arial,sans-serif; margin:5px 0 12px; }
ol.commentlist li ul { font-weight:normal; font-size: 12px; line-height: 16px; font-family: helvetica,arial,sans-serif; list-style:square; margin:0 0 12px; padding:0; }
ol.commentlist li div.reply { background:#999; border:1px solid #666; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; color:#fff; font:bold 9px/1 helvetica,arial,sans-serif; padding:6px 5px 4px;  text-align:center; width:36px; }
ol.commentlist li div.reply:hover { background:#cc0000; border:1px solid #cc0000; }
ol.commentlist li div.reply a { color:#fff; text-decoration:none; text-transform:uppercase; }
ol.commentlist li ul.children { list-style:none; margin:12px 0 0; text-indent:0; }
ol.commentlist li ul.children li.depth-2 { margin:0 0 3px; }
ol.commentlist li ul.children li.depth-3 { margin:0 0 3px; }
ol.commentlist li ul.children li.depth-4 { margin:0 0 3px; }
ol.commentlist li ul.children li.depth-5 { margin:0 0 3px; }
ol.commentlist ul.children li.odd { background:#fff; }
ol.commentlist ul.children li.even { background:#f6f6f6; }
ol.commentlist li.pingback div.vcard { padding:0 170px 0 0; }

If you have your nested comment level set to 3 you should now have something that looks like this:

threaded

It all works great but there are a few things that I wanted to change. They don’t make it that easy to manipulate things but I figured it out and added a few touches of my own to get it to perform how I wanted it to.

To change the size of the avatar you can change line 25 in comments.php to this:

1

<?php wp_list_comments('avatar_size=48'); ?>

The default avatar size is 32 and you can change it to anything you want.

If you don’t want your comments to be displayed as the default unordered list (ul), you can change the style to divs or an ordered list (ol) by using the following;

1

<?php wp_list_comments('style=div'); ?>

Replace div with ol or ul but be sure to also change line 24 and 26 which currently is set for ordered lists so that you have something like this:

1
2
3

<div class="commentlist">
<?php wp_list_comments('style=div'); ?>
</div>

If you want to only display comments, trackbacks, pingbacks (trackbacks and pings) or pings, you can use the following:

1

<?php wp_list_comments('type=comment'); ?>

Now for those people who want total control over their code. This is not recommended to those who are inexperienced with coding. This actually bypasses all of the internal WordPress functionality in regards to comments and lets you customize everything that the wp_list_comments hook spits out. This is a two step process.

First add:

1

<?php wp_list_comments('callback=mytheme_comment'); ?>

Then go to your functions.php file (or create a functions.php file if you don’t already have one) and add this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<?php
function mytheme_comment($comment, $args, $depth) {
$GLOBALS['comment'] = $comment; ?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
<div id="comment-<?php comment_ID(); ?>">
<div class="comment-author vcard">
<?php echo get_avatar($comment,$size='36',$default='<path_to_url>' ); ?>
 
<?php printf(__('<cite class="fn">%s</cite>  <span class="says">says:</span>'), get_comment_author_link()) ?>
</div>
<?php if ($comment->comment_approved == '0') : ?>
<em><?php _e('Your comment is awaiting moderation.') ?></em>
<br />
<?php endif; ?>
 
<div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars(get_comment_link( $comment->comment_ID )) ?>">
<?php printf(__('%1$s at %2$s'), get_comment_date(),get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),'  ','') ?></div>
 
<?php comment_text() ?>
<?php if($args['max_depth']!=$depth) { ?>
<div class="reply">
<?php comment_reply_link(array_merge($args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
</div>
<?php } ?>
</div>
<?php
}
?>

Here there is a lot that you can do. You can set your avatar size, change your classes and ids, change you awaiting moderation text or pretty much just rearrange the entire layout. I even added a little if statement at the end to only display the reply button if your comments can go down another level (this took a long time to figure out but is totally worth it in my books).

With everything above in place, your WordPress theme should now be fit to work with nested comments and you should be able to control how they are displayed to your hearts content.

]]> http://bavotasan.com/2009/how-to-add-nested-comments-to-your-wordpress-theme/feed/ 120 A Few Things to Keep In Mind When Using the More Tag in WordPress http://bavotasan.com/2009/a-few-things-to-keep-in-mind-when-using-the-more-tag-in-wordpress/ http://bavotasan.com/2009/a-few-things-to-keep-in-mind-when-using-the-more-tag-in-wordpress/#comments Thu, 26 Feb 2009 21:36:29 +0000 c.bavota http://bavotasan.com/?p=319 I just had someone ask me why everything on their front page became bolded when they placed <?php the_content('(more')); ?> in their code to use in conjunction with the more tag in their posts. It took me a while to figure it out but the solution is pretty simple.

The more tag looks like this in the Visual editor:
moretag

You use it to place a break in your post, so that only everything above will be displayed on the page where you placed <?php the_content('(more')); ?>.

If you accidentally place a more tag before some of your other tags are closed though, you can really mess things up.

What do I mean exactly?

If you wanted everything to be bolded or italicized, the opening tags would be at the beginning of you post and the closing tags would be at the end. But your more tag in the middle cuts your post down and the other tags never get closed. So on your front page, you have some opening tags but no closing tags. Hence everything be bolded or italicized.

The only solution I have been able to find is to use this pieces of code instead of the usual <?php the_content('(more')); ?>.

<?php
$remove = array("<em>","</em>","<strong>","</strong>");
echo "<p>".str_replace($remove, "", get_the_content('(more)'))."</p>";
?>
]]> http://bavotasan.com/2009/a-few-things-to-keep-in-mind-when-using-the-more-tag-in-wordpress/feed/ 0