Tagged: Themes Toggle Comment Threads | Keyboard Shortcuts

  • Jay Versluis 12:08 pm on November 5, 2015 Permalink | Reply
    Tags: , Themes,   

    Categories: WordPress ( 135 )

    How to change fonts in TwentyFifteen by Automattic 

    TwentyFifteen uses the Noto Serif font. It looks swish and comes with an Apache license, and it can be pulled from Google Fonts too. It’s a fine font indeed – but individuals that we are, it may not be for everybody.

    It’s easy to change it to something else though, and in this article I’ll show you how.

    By default, TwentyFifteen and Noto Serif looks like this:

    Screen Shot 2015-11-05 at 11.58.15

    If we want to change this to something else, we must first import said font into our style sheet, and then declare it for a couple of classes. In this example I’m going to use Lato, another fabulous font that’s featured in the TwentyFourteen theme:

    /* import the new font */
    @import url(http://fonts.googleapis.com/css?family=Lato);
    
    /* change the font to something else */
    body, .entry-content, .page-title {
    	
    	font-family: Lato, Georgia, "Times New Roman", Times, serif;
    }
    

    Now TwentyFifteen will look like this:

    Screen Shot 2015-11-05 at 11.59.27

    If for some reason Lato cannot be downloaded, the browser will try to display text in the next font we declared (Georgia – and if that fails, it’ll try Times New Roman… you get the picture).





     
  • Jay Versluis 11:52 am on November 5, 2015 Permalink | Reply
    Tags: Themes,   

    Categories: WordPress ( 135 )

    How to avoid hyphenations in TwentyFifteen by Automattic 

    By default, TwentyFifteen will hyphenate text on posts and pages. This works well for most, but some find this feature annoying. It’s easy to override with a small CSS tweak – let me show you how.

    Here’s what a post might look like by default:

    Screen Shot 2015-11-05 at 11.39.53

    Notice the hyphenations in lines 3 and 4. Now add the following to your stylesheet:

    /* stop hypenating words */
    .entry-content, .entry-summary, .page-content, .comment-content {
    		
    	-webkit-hyphens: none;
    	-moz-hyphens: none;
    	-ms-hyphens: none;
    	hyphens: none;
    	word-wrap: normal;
    
    }
    

    Now the post should look like this – no more hyphens in sight:

    Screen Shot 2015-11-05 at 11.40.14

    And in case you ever want to bring it back, delete the above, or set them to their default values:

    /* start hypenating again */
    .entry-content, .entry-summary, .page-content, .comment-content {
    	
    	-webkit-hyphens: auto;
    	-moz-hyphens: auto;
    	-ms-hyphens: auto;
    	hyphens: auto;
    	word-wrap: break-word;
    }
    

    Under the hood, CSS uses two distinct properties: hyphens and word-wrap. However, not all browsers acknowledge each property – and with the above we’ll target most common browsers in use today.

    Check out the following links for more information on the hyphens and word-wrap properties:





     
    • juliav305 12:10 pm on November 5, 2015 Permalink | Reply

      Excellent – exactly what I’ve been looking for. It was definitely a feature that was annoying me.

  • Jay Versluis 11:02 am on April 14, 2014 Permalink | Reply
    Tags: Themes,   

    Categories: WordPress ( 135 )

    How to style captions in Twentythirteen 

    I love the Twentythirteen theme – except for the captions that appear underneath images. If you’ve ever seen them they look so out of place as if someone forgot to style them altogether. Here’s what they look like by default:

    Screen Shot 2014-04-14 at 10.47.48

    Notice how the captions are actually larger than the post text. I wanted to drop this size a bit, but at the same time integrate the text better with images I post over at http://www.versluis.com, adding a bit of padding, some rounded corners and perhaps tint the background colour ever so slightly.

    Here’s what I came up with:

    Screen Shot 2014-04-14 at 10.47.08

    And here’s how I did it:

     /* make captions smaller */
     .wp-caption .wp-caption-text {
    
    	 font-size: 1.0em;
    	 background-color:#f7f7f7;
    	 padding: 10px;
    	 
    	 -webkit-border-bottom-right-radius: 10px;
    	 -webkit-border-bottom-left-radius: 10px;
    	 -moz-border-radius-bottomright: 10px;
    	 -moz-border-radius-bottomleft: 10px;
    	 border-bottom-right-radius: 10px;
    	 border-bottom-left-radius: 10px;
     }
    

    Add this to your theme’s style.css file or override your stylesheet with an appropriate option. Here’s what this code does:

    First we’ll reduce the 18 point caption size and bring it in line with the rest of the post text (1em). Then we’ll tint the background colour to a very light hint of grey. We’ll also add a bit of padding around all edges of the text, it looked a bit cramped in there before.

    The second larger block is creating rounded corners at the bottom of the caption, but not at the top so it looks like an attachment. There’s a remarkable tool that lets you visually set this and return some code at http://border-radius.com – go check it out and have a play.





     
  • Jay Versluis 10:02 am on November 28, 2013 Permalink | Reply
    Tags: Themes   

    Categories: WordPress ( 135 )

    How to link to graphic assets within WordPress Themes 

    When you’re displaying graphics that are served from your own theme directory, hard coding is never a good idea. In fact it’s impossible because you don’t know your user’s URL.

    There are a couple of built-in WordPress functions that can help us here. One of them is called get_stylesheet_directory_uri which returns the URL to your theme or child theme.

    Here’s an example. Say you’d like to display the following file:

    <img src="http://yourdomain.com/wp-content/themes/your-theme/images/your-graphic.png>
    

    then you’d write this in PHP like so:

    <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/your-graphic.png">
    

    This will work for both themes and child themes. If you are using a child theme and you’d like to explicitly call a file in the parent theme’s directory you can use get_template_directory_uri like so:

    <img src="<?php echo get_template_directory_uri(); ?>/images/your-graphic.png">
    

    Those options are great if you need the link, but what if you’re writing some PHP code and need the full server path to those files instead? Fear not, WordPress has functions for those situations as well – and they’re called the same thing, just without the _uri at the end (get_stylesheet_directory and get_template_directory respectively).





     
    • Mike 1:00 am on December 19, 2013 Permalink | Reply

      Why use this rather than using “%2$s” and %s?

  • Jay Versluis 9:49 am on February 27, 2009 Permalink | Reply
    Tags: , Themes,   

    Categories: WordPress ( 135 )

    What is a Favicon? 

    Its this tiny little graphic that gets displayed in your browser when you’re visiting certain websites (left of the URL).

    Technically it’s a file called “favicon.ico” in the root directory of your installation. It’s a 16×16 pixel graphic in either ICO, JPG or PNG format. For details, check Wikipedia’s excellent article:

    If you’d like to add one to your own site, perhaps this article is useful to you:





     
  • Jay Versluis 2:43 pm on February 25, 2009 Permalink | Reply
    Tags: , , Themes,   

    Categories: Themes ( 25 )

    How to shorten the_content() in WordPress Themes 

    If you’ve ever created a WordPress Theme and you’re not happy with the way it outputs text to your theme, you might be interested in a handy plugin called the_excerpt_reloaded(). You can

    • shorten the number of words being printed to screen
    • you can add a handy “Read More” or whatever link
    • allow or disallow certain HTML tags (nice!)
    • and quite a bit more.

    Have a look at

    the_excerpt_reloaded can replace any of the traditional WordPress Functions and do a lot more.

    • the_content()
    • the_excerpt()
    • the_content_rss() (depreciated and unreliable in WP version 2.7)
    • the_excerpt_rss()

    Happy Theming!





     
  • Jay Versluis 8:52 am on February 21, 2009 Permalink | Reply
    Tags: , Themes,   

    Categories: Themes ( 25 )

    How to add a NEW THEME to your site 

    One of the most amazing things about WordPress is that you can select a completely new layout for your site at the touch of a button. It’s just as easy to upload a new theme to your library – try it out for yourself.

    Here’s what you do:

    • download and un-zip your theme, so you end up with (usually) a folder of the theme’s name
    • use an FTP client (like Filezilla) to access your webspace
    • find a directory called wp-content/themes
    • upload your entire un-zipped folder into this folder
    • log into your WordPress Site (usually at http://www.example.com/wp-admin)
    • navigate to APPEARANCE – THEMES
    • find your theme and activate it
    • sit back and enjoy your site in a new layout

    You can find plenty of free and commercial themes around the net if you google WordPress Themes.

    I’ve put together a list of good sites here.





     
c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel