remove_filter('the_content', 'wptexturize');
remove_filter('the_excerpt', 'wptexturize');
remove_filter('comment_text', 'wptexturize');
remove_filter('the_title', 'wptexturize');the wptexturize function is responsible for lots of automatic alterations to text stored in WordPress like automatic elipses (...), em and en dashes, typographers quotes, etc.
Just post a link to a GitHub Gist and it will be nicely embedded. Or use the format this snippet provides and create the shortcode yourself. For your functions.php file:
<?php
// [gist id="ID" file="FILE"]
function gist_shortcode($atts) {
return sprintf(
'<script src="https://gist.github.com/%s.js%s"></script>',
$atts['id'],
$atts['file'] ? '?file=' . $atts['file'] : ''
);
} add_shortcode('gist','gist_shortcode');
// Remove this function if you don't want autoreplace gist links to shortcodes
function gist_shortcode_filter($content) {
return preg_replace('/https:\/\/gist.github.com\/([\d]+)[\.js\?]*[\#]*file[=|_]+([\w\.]+)(?![^<]*<\/a>)/i', '[gist id="${1}" file="${2}"]', $content );
} add_filter( 'the_content', 'gist_shortcode_filter', 9);
?>Any of these formats will work:
https://gist.github.com/1147076 https://gist.github.com/1147076#file_annotated.js https://gist.github.com/1147076.js?file=annotated.js [gist id=1147076] [gist id=1147076 file=annotated.js]
You know, the one typically at yoursite.com/wp-login.php. These are things you would put in the active theme's functions.php file.
Is the WordPress logo by default, this changes the file path of that image. Change file path and file name to your own needs.
function custom_login_logo() {
echo '<style type="text/css">h1 a { background: url('.get_bloginfo('template_directory').'http://cdn.css-tricks.com/images/logo-login.gif) 50% 50% no-repeat !important; }</style>';
}
add_action('login_head', 'custom_login_logo');... of where clicking that logo goes. By default it goes to WordPress.org, this will change it to your own homepage.
function change_wp_login_url() {
return bloginfo('url');
}
add_filter('login_headerurl', 'change_wp_login_url');That is, change the title attribute of the image you just replaced. This changes it to the name of your blog in the settings.
function change_wp_login_title() {
return get_option('blogname');
}
add_filter('login_headertitle', 'change_wp_login_title');
In a typical WordPress theme you output the entire list of comments for a Post/Page by using the function wp_list_comments(). This doesn't offer much by the way of customizing what HTML markup gets generated for that comment list. To write your own markup for the comment list, you can use a callback function as a parameter in wp_list_comments(), so it's just as nicely abstracted.
<?php
function my_custom_comments($comment, $args, $depth) {
$GLOBALS['comment'] = $comment; ?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
<?php if ($comment->comment_approved == '0') : ?>
<em><?php _e('Your comment is awaiting moderation.') ?></em>
<?php endif; ?>
// Comments markup code here, e.g. functions like comment_text();
}
?><?php
wp_list_comments("callback=my_custom_comments");
?>
The wp_list_comments function has a parameter to change the default (48px) size to anywhere between 0 and 80px.
wp_list_comments('avatar_size=80');
The bloginfo() function in WordPress gives you access to lots of useful information about your site. See the complete list. To access all these values from inside Page/Post content itself, we can make a shortcode to return the values. Add this to your functions.php file in your theme:
function digwp_bloginfo_shortcode( $atts ) {
extract(shortcode_atts(array(
'key' => '',
), $atts));
return get_bloginfo($key);
}
add_shortcode('bloginfo', 'digwp_bloginfo_shortcode');Now you can output any of the values by calling that shortcode with "key". For example, the name of your site:
[bloginfo key='name']Or directly to images in your theme folder:
<img src="[bloginfo key='template_url']/images/logo.jpg" alt="[bloginfo key='name'] logo" />
ol.commentlist { list-style:none; margin:0 0 1em; padding:0; text-indent:0; }
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 { border-bottom:1px dotted #666; padding:1em; }
ol.commentlist li.comment div.comment-author {}
ol.commentlist li.comment div.vcard { font:normal 16px georgia,times,serif; }
ol.commentlist li.comment div.vcard cite.fn { font-style:normal; }
ol.commentlist li.comment div.vcard cite.fn a.url {}
ol.commentlist li.comment div.vcard img.avatar { border:5px solid #ccc; float:right; margin:0 0 1em 1em; }
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 { font-size:9px; }
ol.commentlist li.comment div.comment-meta a { color:#ccc; }
ol.commentlist li.comment p { font-size:11px; margin:0 0 1em; }
ol.commentlist li.comment ul { font-size:11px; list-style:square; margin:0 0 1em 2em; }
ol.commentlist li.comment div.reply { font-size:11px; }
ol.commentlist li.comment div.reply a { font-weight:bold; }
ol.commentlist li.comment ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
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 { border-left:5px solid #555; margin:0 0 .25em .25em; }
ol.commentlist li.comment ul.children li.depth-3 { border-left:5px solid #999; margin:0 0 .25em .25em; }
ol.commentlist li.comment ul.children li.depth-4 { border-left:5px solid #bbb; margin:0 0 .25em .25em; }
ol.commentlist li.comment ul.children li.depth-5 {}
ol.commentlist li.comment ul.children li.odd {}
ol.commentlist li.even { background:#fff; }
ol.commentlist li.odd { background:#f6f6f6; }
ol.commentlist li.parent { border-left:5px solid #111; }
ol.commentlist li.thread-alt { }
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}
This would go inside the loop, probably underneath the_content(), probably in your single.php file.
// bookmark on Delicious
<a rel="nofollow" href="http://delicious.com/post?url=<?php the_permalink(); ?>&title=<?php echo urlencode(get_the_title($id)); ?>" title="Bookmark this post at Delicious">Bookmark at Delicious</a>
// submit to Digg
<a rel="nofollow" href="http://digg.com/submit?phase=2&url=<?php the_permalink(); ?>" title="Submit this post to Digg">Digg this!</a>
// tweet on Twitter
<a rel="nofollow" href="http://twitter.com/home?status=<?php echo urlencode("Currently reading: "); ?><?php the_permalink(); ?>" title="Share this article with your Twitter followers">Tweet this!</a>
// submit to StumbleUpon
<a rel="nofollow" href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post at StumbleUpon">Stumble this!</a>
// share on Facebook
<a rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post on Facebook">Share on Facebook</a>
// submit to Blinklist
<a rel="nofollow" href="http://blinklist.com/index.php?Action=Blink/addblink.php&url=<?php the_permalink(); ?>&Title=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post on Blinklist" >Blink This!</a>
// store on Furl
<a rel="nofollow" href="http://furl.net/storeIt.jsp?t=<?php echo urlencode(get_the_title($id)); ?>&u=<?php the_permalink(); ?>" title="Share this post on Furl">Furl This!</a>
// submit to Reddit
<a rel="nofollow" href="http://reddit.com/submit?url=<?php the_permalink(); ?>&title=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post on Reddit">Share on Reddit</a>
Add to the functions.php file:
add_action('admin_head', 'my_custom_fonts');
function my_custom_fonts() {
echo '<style>
body, td, textarea, input, select {
font-family: "Lucida Grande";
font-size: 12px;
}
</style>';
}
For your functions.php file or a functionality plugin:
function cc_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );Without this, SVG files will be rejected when attempting to upload them through the media uploader.
<?php if (current_user_can("manage_options")) : ?>
<a href="<?php echo bloginfo("siteurl") ?>/wp-admin/">Admin</a>
<?php endif; ?>If a user is logged in and they are an Admin of the site (not just an subscriber or author), then display a link to get them to the WordPress Admin area. Otherwise, display nothing.
More specific than the regular log in / log out function, which will show for everyone:
<?php wp_loginout(); ?>
User profiles in WordPress by default have these fields for Contact Info by default: E-mail, Website, AIM, Yahoo IM, Jabber / Google Talk. You can remove those and add new ones as you wish, like in this example code for your functions.php file in your theme:
function new_contactmethods( $contactmethods ) {
$contactmethods['twitter'] = 'Twitter'; // Add Twitter
$contactmethods['facebook'] = 'Facebook'; // Add Facebook
unset($contactmethods['yim']); // Remove YIM
unset($contactmethods['aim']); // Remove AIM
unset($contactmethods['jabber']); // Remove Jabber
return $contactmethods;
}To display that publicly, you could:
$user_id = 1;
$key = 'twitter';
$single = true;
$user_twitter = get_user_meta( $user_id, $key, $single);
echo $user_twitter;
These two functions create anchor links, and you can customize a lot of it, but it's impossible to add a class through just using their parameters alone. Gotta add a function to functions.php:
add_filter('next_posts_link_attributes', 'posts_link_attributes');
add_filter('previous_posts_link_attributes', 'posts_link_attributes');
function posts_link_attributes() {
return 'class="styled-button"';
}
The body_class function is nice for adding a bunch of classes to the body tag that have information about what kind of page is currently being displayed. Probably for styling purposes. But for whatever reason, it doesn't include a class for the current category (or categories) for a single post.
This adds that category "nice" name:
add_filter('body_class','add_category_to_single');
function add_category_to_single($classes, $class) {
if (is_single() ) {
global $post;
foreach((get_the_category($post->ID)) as $category) {
// add category slug to the $classes array
$classes[] = $category->category_nicename;
}
}
// return the $classes array
return $classes;
}
<?php edit_post_link(__('Edit This')); ?>Put this in the theme file somewhere near where you output the_content() (likely in the single.php or page.php file) to make a link you can click that takes you into the admin to edit it. This link will only be visible when the viewer is logged in and has appropriate permissions to edit that page (administrator or author).
When you upload an image through the WordPress media uploader and then insert it into the editor, it comes with width and height attributes. These are normally desirable, as it assists the browser in making the appropriate room for the image during layout. But if you want to remove the insert action from adding these attributes, you can add this code to you functions.php file or a functionality plugin of your own making:
add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );
function remove_width_attribute( $html ) {
$html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
return $html;
}
$("img").attr("src", "http://cdn.css-tricks.com/images/banner.jpg");$("div").attr("id", function (arr) {
return "div-id" + arr;
})$("img").attr({
src: "http://cdn.css-tricks.com/images/banner.jpg",
title: "banner",
alt: "banner"
});var $source = $("img").attr("src");
window.load can fire super duper fast if the page is cached. If you want to use that event but make sure a minimum amount of time has passed until it does...
(function fn() {
fn.now = +new Date;
$(window).load(function() {
if (+new Date - fn.now < 500) setTimeout(fn, 500);
// Do something
});
})();
This snippet presupposed an HTML form with and ID of "age-form" and three inputs (text or select) with the IDs "day", "month", and "year" respectively.
$("#age-form").submit(function(){
var day = $("#day").val();
var month = $("#month").val();
var year = $("#year").val();
var age = 18;
var mydate = new Date();
mydate.setFullYear(year, month-1, day);
var currdate = new Date();
currdate.setFullYear(currdate.getFullYear() - age);
if ((currdate - mydate) < 0){
alert("Sorry, only persons over the age of " + age + " may enter this site");
return false;
}
return true;
});You may wish to do something more elegant than an alert, and should also probably validate the form with server side code or else this protection only works for users with JavaScript enabled.
There is no CSS for applying an underline (text-decoration: underline;) only to individual words in a multiple-word element. The best way would be to wrap each word in a span (not the spaces, just the words) in spans and apply underline to those spans. Here's jQuery to do that to h1 elements.
$('h1').each(function() {
var words = $(this).text().split(' ');
$(this).empty().html(function() {
for (i = 0; i < words.length; i++) {
if (i == 0) {
$(this).append('<span>' + words[i] + '</span>');
} else {
$(this).append(' <span>' + words[i] + '</span>');
}
}
});
});Then you could do:
h1 span {
text-decoration: underline;
}Similar and slightly more robust solution: Lettering.js