Category: Themes Toggle Comment Threads | Keyboard Shortcuts

Sometimes we have to dive deep into some scary code to make a theme or plugin do what we want. Here are some articles that deal with such things.

Keep in mind that software evolves fast and a tweak that worked a year ago may not work anymore today.

  • Jay Versluis 11:03 am on November 24, 2015 Permalink | Reply
    Tags:   

    Categories: Themes, WordPress ( 25 )

    How to turn plain URLs into clickable links in WordPress 

    The marvellous P2 Theme has an interesting feature: write out a plain link, and it magically becomes clickable without explicitly adding the a href tag.

    This may not be a big deal if you’re writing posts in the visual WordPress editor rather than HTML, but for those of us who like to write in HTML, it’s just one less thing to worry about.

    I was investigating this feature recently, and it turns out WordPress has a built-in function that can do this: they call it make_clickable(), and it works with URIs, FTP, Email addresses and anything starting with www. The function is really easy to use too: it only takes one parameter (a string), and returns the clickable HTML code.

    $clickableText = make_clickable($plainText);
    

    Let’s see how to use it in context, using the TwentyThirteen theme.

    (More …)





     
  • Jay Versluis 12:23 pm on October 4, 2015 Permalink | Reply
    Tags:   

    Categories: Themes, WordPress ( 25 )

    How to move the sidebar to the right in TwentyFifteen 

    I’ve never liked themes with sidebars on the left – probably because we in the western world start reading on the left, and I’d like there to be as little clutter as possible. Or perhaps I’m used to navigation items on the right.

    I was looking around for solutions to move the sidebar in Automattic’s TwentyFifteen theme to the right, and several options can be found on the internet. Here are two that worked for me:

    Option 1: CSS Tweak

    Thanks to the Stack Exchange community, this CSS tweak works a treat (for left-to-right languages):

    body:before {
        right: 0;
        left: auto;
    	direction: ltr;
    }
    .sidebar {
        float: right;
        margin-right: auto;
        margin-left: -100%;
    	direction: ltr;
    }
    .site-content {
        float: right;
        margin-right: 29.4118%;
        margin-left: auto;
    	direction: ltr;
    }
    .site-footer {
        float: right;
        margin: 0 35.2941% 0 0;
    	direction: ltr;
    }
    

    Add these declarations to your own TwentyFifteen Child Theme and you’re good to go. If added via a CSS widget or to the bottom of the original theme (which is a really bad idea), additional “!important” statements may be necessary.

    Kudos to toschero and Anteru for the combined solution to this puzzle. Check out the full discussion here:

    Option 2: Pre-made Child Theme

    Ruhul Amin from Tips and Tricks HQ has built a ready-to-use child theme and solved this puzzle in PHP. You can check it out here:





     
  • Jay Versluis 8:45 am on July 28, 2014 Permalink | Reply
    Tags:   

    Categories: Screencast, Themes, WordPress ( 74 )

    How to use the TwentyThirteen Theme by Automattic 

    In this screencast I’ll show you how to use TwentyThirteen, a simple yet powerful WordPress theme that looks gorgeous and is mobile friendly. I’ll explain Post Formats and their impact, how to show images in galleries and how to embed videos to your WordPress site too.

    I’ll finish it off by demonstrating how the site looks like on a desktop browser as well as the iOS Simulator on iPad and iPhone. I’m using WordPress 3.9 for this demo.

    I’m referencing some related articles in this video – here they are:





     
  • Jay Versluis 9:11 am on February 8, 2014 Permalink | Reply
    Tags: ,   

    Categories: Themes ( 25 )

    How to style block quotes in P2 

    I’ve just snazzed up the blockquotes styling on a couple of my P2 sites and thought I’d share the code that did it. Here’s an example of the final result in P2:

    This is a block quote. You can create one by adding blockquote tags to the beginning and end of a block of text you’d like to look a little different. It doesn’t always have to be a quote, just something you’d like to give a little emphasis to.

    This is a little plain in the original P2 and I thought it deserved a bit of styling. Here’s what creates the above:

    blockquote {
    	background: #fef;
    	padding: 20px;
    	font-size: 1.1em;
            border-style:dashed;
    	border-radius: 10px;
    	-webkit-border-radius: 10px;
    	-moz-border-radius: 10px;
    }
    

    The first line creates the background colour for the block. Any f/e variations work well as they give only a slight highlight. Try the following:

    • #eee for grey
    • #eef for yellow
    • #ffe for blue
    • you get the picture…

    Next we add a bit of breathing space all around the block of text by adding some padding, and we’ll increase the font size to something more readable.

    The border-style property adds the dotted outline to the blocks. Feel free to remove it if that’s too much emphasis, or try any of the following values as variations:

    • groove
    • double
    • ridge
    • dashed
    • dotted
    • inset
    • outset
    • solid
    • thin

    And finally we’ll add some rounded corners to those blocks with the last three lines (courtesy of that marvellous http://border-radius.com generator)

    Fell free to experiment with those values, and let me know if you find anything else that may look interesting. Add the above code to your child theme’s style.css file, or add it to a custom CSS field in your WordPress installation.

    Note that the effect of this styling will only be visible upon a browser refresh, as this is overriding styles provided by P2. So when you write a post, you’ll see the old (plain) version being inserted. Visitors will see the new styling right away.





     
  • Jay Versluis 2:41 pm on December 15, 2013 Permalink | Reply  
    Categories: Themes, WordPress ( 25 )

    How to replace fonts in TwentyThirteen 

    I must admit that the new default font in TwentyFourteen looks damn sexy – but I’ve only just gotten used to the TwentyThirteen theme. Don’t get me wrong, if you’re after a magazine style theme then TwentyFourteen does a great job.

    Since I didn’t want to change themes again over at versluis.com, I thought perhaps I’ll just replace the default fonts in TwentyThirteen (Bitter and Source Sans Pro) with TwentyFourteen’s new font Lato.

    Here’s how:

    Screen Shot 2013-12-15 at 14.21.14

    Screen Shot 2013-12-15 at 14.28.15

    Lato is an open source font by Warsaw based designer Łukasz Dziedzic hosted on Google Fonts. Lucky for us we can link to it in our CSS stylesheet right away. Do this somewhere near the top, just below any other @import statements:

    @import url(http://fonts.googleapis.com/css?family=Lato);
    

    Next, overwrite the existing TwentyThirteen declarations with this bit of CSS. If you’re using a child theme, add this right after the import statement. If you’re tweaking the original (which you shouldn’t) then you can add this to the very bottom of style.css. Alternatively you can declare this as additional CSS if you have the option (Jetpack does this for example):

    /* new font for 2014: Lato */
    html,
    button,
    input,
    select,
    textarea,
    h1.site-title,
    h1.entry-title,
    h2.site-description {
    	font-family: Lato, Helvetica, sans-serif;
    }
    

    This will style the following elements, overriding existing TwentyThirteen declarations:

    • site title and description
    • all post/page headlines
    • input text areas
    • drop down menus
    • button text

    Remove items as appropriate (for example the site title). If you don’t fancy Lato and would like to use another font instead, just link to it with an @import statement, then replace “Lato” in the font-family declaration with your own font. Here’s an article I’ve written that shows you howto do this:

    This tweak may also work on WordPress.com with the CSS extension subscription, but since I haven’t got that I couldn’t test it.

    Hope it helps!





     
  • Jay Versluis 9:17 pm on October 15, 2013 Permalink | Reply
    Tags:   

    Categories: Themes ( 25 )

    How to use your own random header images in TwentyThirteen 

    I really wanted to use the new WordPress TwentyThirteen theme over on my other site http://www.versluis.com. But I didn’t like the idea of using the default header images.

    Since my previous theme had random header images, I thought it would be great to tap into the now built-in function and prepare a child theme that overrides those existing header images with my own. Here’s how I did it:

    • first we’ll create a child theme
    • then we’ll remove the existing header images
    • and add our own images

    As a final touch I’ve tweaked the site title font and gave it a Photoshop-like outer glow, all in CSS. Let me talk you through it step by step.

    (More …)





     
    • Gavin 4:45 pm on October 25, 2013 Permalink | Reply

      In WordPress 3.7, I noticed the default images were still appearing even after adding the new action to unregister_default_headers.

      This is because the parent theme was setting the headers on an add_action with a priority of ’11’ and the child theme was removing the headers with an equal priority of ’11’.

      Setting the child theme to use a priority of 12 solved the issue by ensuring it was always called second:
      add_action (‘after_setup_theme’, ‘versluis2013_remove_default_headers’, 12);

    • Paul Wilkinson 8:23 am on November 6, 2013 Permalink | Reply

      Hi Jay,

      I’m in the process of trying this mod but the part where you remove the default images doesn’t work.

      The 3 existing banners are still there?

    • Paul Wilkinson 8:42 am on November 6, 2013 Permalink | Reply

      By the way, I tried Gavin’s edit there and still have the same result.

      • Jay Versluis 6:15 pm on November 6, 2013 Permalink | Reply

        Bizarre indeed! I only got a chance to look into this today, and here’s what I found:

        As soon as I updated TwentyThirteen to Version 1.1 the default header images came back to the list of my headers (under Appearance – Header). But when I’ve changed the code priority from 11 to 12 (as described by Gavin) they were gone again and everything worked fine. I’ve updated the article to reflect this.

        Did you create a child theme as discussed? And without adding your own header images, do the default ones not disappear when you add this to your child theme’s functions.php? Comment everything else out and see if that works:

        // let's remove the default header images - works with TwentyThirteen 1.1
        function versluis2013_remove_default_headers () {
        	// remove_theme_support ('custom-header');
        	unregister_default_headers (array('circle', 'diamond', 'star'));
        }
        add_action ('after_setup_theme', 'versluis2013_remove_default_headers', 12);
        
    • paulopitz137 2:50 pm on December 2, 2013 Permalink | Reply

      What happens to me is that the text of the functions.php file appear at the top of the screen with all line breaks and spaces removed. The function itself does not run.

    • paulopitz137 3:05 pm on December 2, 2013 Permalink | Reply

      Found the problem. functions.php must have the following as the first line of the file:
      <?php

    • mattg 6:18 pm on December 9, 2013 Permalink | Reply

      Hi Jay, thanks for your post – it all worked superbly, but for one thing: could you suggest any reasons you could think why, whilst I can see the new header options showing (header 1, header 2 etc etc in ‘Default Images’), they have no thumbnails alongside them and, if I select these new default headers (individually or random), I get a blank (white) header image.
      I thought it may be permissions, but they *seem* to be OK.

      • Jay Versluis 10:53 pm on December 9, 2013 Permalink | Reply

        Hi Matt, glad the code worked out. Images that aren’t showing up usually mean that the path to those isn’t right, perhaps it’s just one too many slashes. I’d try to look at the source code of the displayed page and examine the path to an image that isn’t showing properly. Post a link to the site if it’s life, I’m happy to take a look.

        • mattg 5:22 am on December 10, 2013 Permalink | Reply

          many thanks Jay, I was simply missing ‘/images’ before ‘/headers’; I’d assumed that %2$s was in some way recursive, so I just needed to explicitly specify the file location within the theme.

    • Mike 1:35 am on December 18, 2013 Permalink | Reply

      Thanks for the tutorial, this is exactly what I wanted to do and it worked perfectly. Thanks to Gavin and paulopitz137, they had the two errors I did, and their fixes worked great.

      The fuzzy glow and no underline were nice bonuses also! Interestingly, they do not show up on the preview screen. How would one make those effects show on the preview?

      I am new to WordPress and will definitely be checking back here.

      • Jay Versluis 5:42 pm on December 19, 2013 Permalink | Reply

        Hi Mike, glad it was useful. Yes I’m wondering why the preview is only an “almost” preview – I’m not sure why it doesn’t show the glow. It works fine once the theme is activated.

  • Jay Versluis 9:47 am on October 8, 2013 Permalink | Reply
    Tags:   

    Categories: Themes ( 25 )

    How to add drop down categories to Automattic’s P2 Theme 

    You know I love P2. I always have, and I always will. It’s the perfect theme that turns my WordPress installation into a notebook site.

    Many users – me included – have often wished for the addition of categories to P2, so that when you write a post, you can add it to the category from the front page, perhaps via a convenient drop down menu.

    Here’s how to do it with P2 Version 1.5.1.

    And if you don’t want to hack the code yourself, I’ve got a full working project on GitHub that’s ready to rock.

    (More …)





     
    • Jay Versluis 5:54 pm on November 22, 2013 Permalink | Reply

      I forgot to mention:
      To make those categories show up inside posts (like tags to by default), examine the entry.php file in my project. This is where we display those categories.

  • Jay Versluis 11:20 am on February 20, 2013 Permalink | Reply
    Tags:   

    Categories: Themes ( 25 )

    How to style the Add Media button in P2 

    Screen Shot 2013-02-20 at 11.08.52

    Before…

    I’ve noticed that the Add Media button in P2 version 1.4.2 is a bit too low when you write a Blog Post.

    The button usually sits neatly above the status box, however it cuts into the top of the box due to the additional text field for the blog post – like so:

    It’s not so pretty. As a quick fix we can shift it a few pixels higher, therefore it won’t interfere with the box anymore:

    /* The Add Media button is too low when a blog post is selected */
    #media-buttons {top: -2px;}

     

    Add it to the bottom of your style.css sheet and you’re golden!

    ... and after the fix

    … and after the fix





     
    • Scophi 9:37 pm on February 25, 2013 Permalink | Reply

      I found your P2 User Guide website and am glad that this theme is still active and being developed. I enjoyed reading about what you can do with lists. Very impressive.

      I wanted to let you know that I have a P2 site that I have modified heavily. I have re-organized and simplified the stylesheet, corrected some postbox problems, and made a few other tweaks. I’d be honored if you took a look.

      http://www.scophi.com

      I would not mind if you used any of my tips or tricks in either of your blogs. I don’t need credit. I just want to share what I have learned about P2.

      Thanks!

      • Scophi 9:39 pm on February 25, 2013 Permalink | Reply

        Sorry, I forgot to mention that my list of modifications is a page, not a post, called P2 Theme Modifications. Here’s the link:

        http://www.scophi.com/?page_id=206

        • Jay Versluis 11:38 am on February 26, 2013 Permalink | Reply

          Thank you Scophi, always good to meet a fellow P2 lover 😉 I’ll add your link it to the P2 User Guide!

          • Scophi 7:54 am on March 15, 2013 Permalink

            Jay-

            I have changed my website and no longer use P2. But I did update my P2 modifications page and wanted to give you the updated link so you could correct the reference links here and on P2 User Guide.

            Scophi’s P2 Theme Modifications: http://scophi.com/archives/8

            Thanks!

          • Jay Versluis 10:14 am on March 15, 2013 Permalink

            Thanks for the heads up, very kind of you. I’ve updated the P2 User Guide with your new link.

    • Jay Versluis 11:24 am on May 8, 2013 Permalink | Reply

      UPDATE:
      A new version of P2 has been released (1.4.3) which addresses several improvements under the hood. Sadly they haven’t fixed the above graphical problem, but I’ve just checked – my tweak still works with version 1.4.3.

      See the new improvements in the P2 User Guide before they disappear from the front page of p2theme.com:
      http://p2guide.wordpress.com/2013/05/08/p2-version-1-4-3-released/

  • Jay Versluis 10:24 am on April 16, 2012 Permalink | Reply
    Tags:   

    Categories: Themes, WordPress ( 25 )

    How to bring back Post Categories in P2 

    We’re all excited about the new features in Automattic’s P2 Theme v1.4.0 – however many of us have setup custom tweaks around Post Categories. In the latest version these have been replaced with Post Formats.

    Post Formats are great, but they are limited to values defined in the WordPress core. If you wanted to create a new post menu like “critical” or “alarm” this wouldn’t work. We could use Custom Post Types to add to those formats, however it’s way too big an operation for I wanted to achieve: which is bringing back the “posting into categories” feature we’ve come to love from the previous version.

    In this article I’ll show you how to back-port categories so posts will appear as they did in P2 v1.3.3 while retaining all functions of the latest update.

    (More …)





     
    • Ali 3:19 am on May 6, 2013 Permalink | Reply


      <a id="thoughts" class="post-format-button"class="selected" href="" title="">
      <a id="culture" class="post-format-button" class="selected" href="" title="">
      <a id="news" class="post-format-button"class="selected" href="" title="">

    • HG 7:14 pm on July 27, 2013 Permalink | Reply

      Hello, this hack works in P2 version 1.5.1 ?

    • Chris Bell 11:11 pm on September 22, 2013 Permalink | Reply

      What I’d like to be able to do is assign all of the P2 posts into an existing custom post type, e.g. Status Updates.

      I’m integrating P2 with a parent theme, so I’m hacking the theme as best I can.

      • Jay Versluis 9:50 am on September 23, 2013 Permalink | Reply

        Hi Chris,

        the answer lies in a file called post-form.php. This generates the buttons above the post box and sets the post type for each button. Look for an unordered list towards the top of the file and change them to your desired format.

        One thing about P2 child themes: they don’t seem to work properly, I’m not sure why. I’ve noticed that some modifications you make in your child theme don’t make it into the final output.

        • Chris Bell 3:59 pm on September 23, 2013 Permalink | Reply

          Hi Jay,

          My oversight: I accomplished posting to a special post_type by adding a hidden post_type input field.

          Now if only I could get the p2_load_entry to work correctly. 🙂

  • Jay Versluis 5:50 pm on March 24, 2012 Permalink | Reply
    Tags:   

    Categories: Themes, WordPress ( 25 )

    How to tweak P2: adding and replacing categories 

    Today I’m going to tweak the marvellous P2 Theme by Automattic.

    P2 is one of my all time favourite themes – not only because it transforms WordPress into something completely different, but also because it’s an innovative way we communicate internally here at WP Hosting. If you don’t know P2 yet, do check it out at p2theme.com and watch the video.

    At the time of writing P2 is at Version 1.3.3 and has been since November last year. Code changes quickly, so by the time you’re reading this my ramblings may be out of date.

    Let’s have a look at how we can add and amend the default categories (i.e. Status Update, Blog Post, Quote and Link).

    (More …)





     
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