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 9:11 am on February 8, 2014 Permalink | Reply
    Tags: ,   

    Categories: Themes ( 22 )

    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
    Tags:   

    Categories: Themes ( 22 )

    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 ( 22 )

    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 ( 22 )

    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 ( 22 )

    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 | Reply

            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 | Reply

              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 ( 22 )

    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 …)

     
    • ray 12:20 pm on April 16, 2012 Permalink | Reply

      very nice… thanks. P2 has a lot of promise

    • valuser 11:40 am on April 18, 2012 Permalink | Reply

      Awesome. Works ! Many, many thanks for this.

    • Madis 7:14 pm on May 29, 2012 Permalink | Reply

      Thanks, that’s very useful (Y).

    • Nofia 10:55 pm on June 18, 2012 Permalink | Reply

      Would be great if I could format the input fields to take recipes…and restaurant locations. I’ve been looking for a recipe theme to do that..I liked P2 from the beginning..if I could make recipe posts and restaurant location posts with geo data from the front I’d be a very happy camper.

    • matt 3:10 pm on June 27, 2012 Permalink | Reply

      I’m having difficulties implementing this fix. Whenever I apply the edits, and then go to my front end I get a pop up telling me I need to login. This happens anytime I click in the status update box.
      This is a fresh P2 install, v1.4.

      My $post_id = area started around line 237.

      Should I just be able to simply paste in your code examples and go or am I missing a step?

      • Jay Versluis 8:53 am on June 29, 2012 Permalink | Reply

        Hi Matt,

        copy and paste should work fine, but remember you’re amending existing code so make sure it looks like what I’ve shown. Make sure the second block goes above the array block. Here’s what it should look like in its entirety:

        On this note, I’ve just discovered that a code highlighter plugin that I had installed last week has screwed up some of the characters. I’ve corrected it now so all is as intended again (albeit without code highlighting). Still works with WordPress 3.4.1, I’ve just tested it.

        • matt 4:45 pm on June 29, 2012 Permalink | Reply

          Thanks Jay. I did see the broken code and replaced it, but I must have overlooked something. Your new code works perfect with no issues.
          I was able to do exactly what I wanted, thanks so much. :)

          • Jay Versluis 5:41 pm on June 29, 2012 Permalink | Reply

            You’re very welcome, glad it works! I think they should put this into the P2 core for legacy purposes. As much as I love the new features in P2, I really miss this function!

            • matt 5:43 pm on June 29, 2012 Permalink | Reply

              I agree. I have no need for links or blog posts, but I’d like for people to be able to subscribe or post to specific categories that are relevant to them. This solves that. Hopefully the Automaticc will se that eventually.

    • Nofia 10:52 am on June 29, 2012 Permalink | Reply

      I get the same errors.

      Plus, I want to know if it is possible to change the form styles for each form. I really want to use P2 for a website, but I need it to be more specific to my site, which is to have a restaurant directory and a recipe databank..

      • Jay Versluis 5:44 pm on June 29, 2012 Permalink | Reply

        Try again Nofia, think there was a code hitch before. I’ve tested it this morning and it worked for me and Matt.

        Which forms would you like to style? There’s only really one generic input form, not a lot you can do with it I’m afraid. Works slim and light for me as it is though, so I’m not sure if I can help you there.

    • lobong 10:26 am on March 3, 2013 Permalink | Reply

      Hi Jay, nice post here. I’m now on P2 1.4.2 &WP3.5.1 and encounter same issue as Matt. Are you able to post the sample that you have shown Matt (Here’s what it should look like in its entirety:) as I couldn’t see anything after. I’m still seeing broken characters (> instead of >) and wondering if i’m missing out anything.

      • Jay Versluis 11:39 pm on March 3, 2013 Permalink | Reply

        Thanks lobong! Not sure how I can help you – I think Matt was happy with the sample code. What is it that’s not working for you, and what would you like to achieve?

    • lobong 12:18 am on March 4, 2013 Permalink | Reply

      Well I have inserted the define $post_cat block directly on top of the $post_id block, but when I came to front end I got an error that says I’m not connected to the server, and I couldn’t post anything from front end. Removing these codes reverts the functionality of P2. So I’m not sure if it’s the latest version of P2 that blocks it or latest WP version, or the fact that I have entered the codes incorrectly. Can you show me exactly how the two block of codes should go?

      (Side note, the code snippets above still show broken characters as I see it, for example the character “>” is shown as “&-g-t-;” (without dash)).

      Thanks Jay!

      • Jay Versluis 10:22 am on March 4, 2013 Permalink | Reply

        Hi lobong, thank you so much for bringing this to my attention – it’s one of those posts in which it’s vital never to switch to the visual editor… I’ve attempted to correct the sample code, hopefully it displays correctly now.

        But that’s not all: I’ve also added a gist at the bottom in case this happens again. Even better: you can get a full working version of this mod on GitHub now:

        I hope this will help bring category goodness back to your site! All the best ;-)

        • lobong 9:58 am on March 5, 2013 Permalink | Reply

          Hey Jay you’re awesome! Works like charm now!

          Thanks so much. Am surely following your blog for other tweak tips!

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

      Hey I’m using your categories p2 theme hoping to have 3 categories news as default – thoughts and culture.

      the only page I have updated is post-form –

      however all the posts are being assigned to the default post cat. news – following is the code

      <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=””>

      can you please help?

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

    Categories: Themes, WordPress ( 22 )

    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 …)

     
    • Jay Versluis 6:31 am on April 12, 2012 Permalink | Reply

      UPDATE: Tweaking categories and labels this way no longer works since Version 1.4.0. See here for all the latest features: http://wpguru.co.uk/2012/04/new-features-in-p2-140/

      Sadly this means that we have to go back to the drawing board here…

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

      But the good news is I’ve found a way to back-port categories into v1.4.0:
      http://wpguru.co.uk/2012/04/how-to-bring-back-post-categories-in-p2/

    • Luis 6:42 am on September 4, 2012 Permalink | Reply

      Hey Jay, thanks a lot for this. I’ve been racking my head for the last 24 hours trying to edit a child theme with P2. With this and the newer post for back-porting cats I’m almost set.

      I do have a final question though. For people who change the theme’s color scheme. How would I go about changing the background color of notifications? My bg is no longer white, but every time I post a new comment or status I get the slow animation that fades to white. Please help!

      • Jay Versluis 11:16 am on October 8, 2012 Permalink | Reply

        Hi Luis,

        that’s a really tricky one – I know what you mean though, a new post always fades from yellow to white. I’ve been through all the CSS and the ajax.php but can’t find where this is being done, sorry I can’t help on this occasion. If you find out please let me know, I’ll add it to http://p2guide.wordpress.com ;-)

        It’s worth asking that question in the P2 Forum: http://wordpress.org/tags/p2

    • nav 7:43 pm on November 13, 2012 Permalink | Reply

      very useful post. P2 should have had this in built. i spent hours before i found both of your posts.

    • Jay Versluis 10:56 am on July 28, 2013 Permalink | Reply

      UPDATE:
      There appear to have been some messed up code samples in my post – this happens time and time again if I correct a typo and then ALL my code turns into 5H1T standard. I’m happy to report that this is now fixed.

  • Jay Versluis 11:58 pm on June 14, 2011 Permalink | Reply  
    Categories: Themes, WordPress ( 22 )

    How to style the Motion Theme for WordPress 

    I had a closer look at this theme the other day when I made some upgrades on Nadia’s website.

    I really like the look and feel of Motion but I felt certain things were missing from this wonderful theme, such as drop down submenus.

    Let’s take a look at some tweaks and how you can make Motion your own.

    This article was written for Version 1.1.6 – these tweaks may not work in later revisions of the theme.

    (More …)

     
    • william meara 12:33 am on June 15, 2011 Permalink | Reply

      Hi mister guru, firstly i would like to say thank you for going through the trouble of writing this up, i’ve bookmarked at and have decided to use it as my holy bible for my site as I use the motion 1.1.6 theme. Only problem is, it may sound stupid but in my primary menu, the one that is set by your catagories, when clicked on, the pages have too many posts on them. is there anyway i can get these to just show small abstracts and then a ….Read More link? would be realy helpful in reducing the loading time for the page. thanks a million

      william meara

      • Jay Versluis 9:45 am on June 15, 2011 Permalink | Reply

        You’re very welcome, William!

        There are two ways you can deal with this: if you want full control over where the break is happening, and if you only have a handful of articles on your site, edit each post and insert a <!–more–> tag. There’s a handy button next to the spell checker which does this for you, you’ll see a line where the page break is inserted. I reccommend this approach.

        Alternatively, if you have a lot of articles on your site and you can’t go through every single one of them, edit your archives.php file and have a look for this line of code:

        <?php the_content( 'View full article &raquo;' ); ?>

        Replace the_content with the_excerpt and these breaks will happen automatically. The downside is that they only show text and no pictures you may have inserted.

        Good luck ;-)

    • william meara 11:41 am on June 15, 2011 Permalink | Reply

      wow, they dont call you the guru for nothing, ill be sure to give this a go. If it works, i might just throw ya a cuppa :D legend

      • Jay Versluis 11:34 pm on June 15, 2011 Permalink | Reply

        Excellent, glad to hear it helped. In fact I was just reading your comment over a lovely cup of joe :-)

    • Derek 12:36 am on June 28, 2011 Permalink | Reply

      Jay!

      Thanks for the very helpful tutorial! I am currently editing this theme for a client’s site to customize it, and had one question: for some reason, I can’t get the Page Title to change size at all! This should be a simple fix, but it’s causing me some stress.

      Here’s why:
      ========================

      Testimonials
      Blah, blah, blah…
      ========================

      In this case, I want to change the size of the Page Title “Testimonials”. The page title’s CSS appears to be something dynamic (in this case referencing the page’s Permalink ID of 13). I thought I had traced it back to this CSS class correctly:

      ========================
      .posttop h2.posttitle a {
      color: #afdaff;
      font-size: 1.2em;
      }
      .posttop h2.posttitle a:hover {
      color: #a8ef9d;
      border-bottom: 1px dashed #a8ef9d;
      }
      =============================

      …however, that only controls a POST title. I want to change a PAGE title.

      Any ideas, guru? I’d love your help on this, if you can spare a second. :D

      • Jay Versluis 1:19 pm on June 28, 2011 Permalink | Reply

        Hi Derek,

        sure thing – that’s a bizarre puzzle indeed. You’re absolutely right, it should work but it doesn’t. You’re using the default page template without the sidebar, correct? Because the one with the sidebar works just as we’d expect.

        There are two parts to solving this puzzle. First, have a look at the page.php file (that’s the one without the sidebar). It looks very different from the page-with-sidebar.php file. Not only does the non-sidebar file not create a permalink in the title, it also has a title-empty query before it styles the headline… why is a mystery. Let’s take it out – I’m just adding PHP comment tags here:

        <?php // if (!(the_title() == "")){ ?>
        <div>
        <h2><?php the_title(); ?></h2>
        </div>
        <?php // } ?>

        That should style our headline just like the with-sidebar template – IF the headline would be a link. It’s not though, and it doesn’t need to be. Let’s amend the CSS so that the syling happens regardless of there being a link or not:

        .posttop h2.posttitle a, .posttop h2.posttitle {
        color: #afdaff;
        font-size: 3.4em;
        }

        I’ve added .posttop h2.posttitle (without the a) to the handle so it works both ways. I’ve also increased the font-size to 3.4em to see if it has the desired effect.

        Style away – and let me know if it works ;-)

    • Derek 7:29 pm on June 28, 2011 Permalink | Reply

      Jay,

      You are AWESOME! I screwed around for an hour with that yesterday and couldn’t get it to work! That totally did the trick. :D

      Got another query for you: I have a home page which will show no posts (this is primarily a static site). I cut out all the post/comment related code in the home.php template file, and will replace it with custom CSS/graphics to meet the clients wishes.

      Once that’s done, am I able to add “Home” as a menu item in the navigation bar at the top of the page? I’m aware that you can just click on the Site Title and it will take you there, but the “Home” nav option is another client request. Do I need to change anything in the “Reading” settings, as well?

      Thanks so much for the help, Jay! :D

      • Jay Versluis 9:39 pm on June 28, 2011 Permalink | Reply

        Thank you thank you, glad it worked!

        Yes you can add a Home tab via the WordPress Menu. Use a custom link, call it Home and make it point tomyour site’s URL (under Appearance – Menus)

    • Derek 9:53 pm on June 28, 2011 Permalink | Reply

      Hmmm, followed your instructions to a T and it didn’t work…any other ideas?

      • Jay Versluis 10:35 pm on June 28, 2011 Permalink | Reply

        For the menu to be active, you need to first create one, then activate it. Once that’s done you can add posts, pages, custom links and categories to the menu.

        Motion has two menu areas, one at the top above the header, one below the header. Make sure you activate your menu where you’d like to see it.

        Good luck!

    • Raj 12:36 pm on July 4, 2011 Permalink | Reply

      I want to remove title from the pages(with sidebar and without sidebar). Can you please help me how to do that?

      Thanks.

      • Jay Versluis 8:33 am on July 8, 2011 Permalink | Reply

        Hi Raj,

        you need to amend two files – page.php and page-with-sidebar.php. In each of them has this code in it:


        <div class="posttop">
        <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
        </div>

        Remove it or comment it out – and your page headlines will be gone.

    • Derek 6:51 pm on July 4, 2011 Permalink | Reply

      Jay! Just wanted to follow up with you and let you know that I got everything working just great! (Turns out I may have followed your directions to a lower-case “t” – my bad!) In the end, the client was super happy with how everything turned out, and I have you to thank, so…THANK YOU! :D

      • Jay Versluis 9:22 am on July 5, 2011 Permalink | Reply

        Thank you Derek, what a nice thing to say :-)

        May there be many more happy clients for you and me in the future!

    • William V. Burns 11:49 am on September 26, 2011 Permalink | Reply

      Your instruction on how to enable drop-down submenus fixed my site!
      Thanks!

      …for saving me time and trouble and lost hair I bought you a cup o’ coffee.

      • Jay Versluis 12:38 pm on September 26, 2011 Permalink | Reply

        Thank you William, that’s muich appreciated! I’ll have it this afternoon ;-)

    • Susan 8:19 pm on October 31, 2011 Permalink | Reply

      Hello WP Guru. I have another modification I would like to do to Motion 1.1.6 that is not mentioned in this post and I was wondering if you could help. The side bar does not show up on each page. How do I get the sidebar to show up on all the pages?

      Thanks in advance.

      -NetSocialMOM

      • Jay Versluis 2:28 pm on November 2, 2011 Permalink | Reply

        Hi Susan,

        by default Motion shows the sidebar only on posts, not on pages. But there is a page template that does show the sidebar: while you’re editing a page, have a look at the right hand side – there’s a box called Page Attributes. In it you’ll see a drop-down menu for your Template. If this is set to Default then the sidebar won’t be show. Set this to Page with Sidebar, hit update and you’ve got the sidebar back.

        Most themes do it the other way round. Templates only work on pages – posts don’t have a templates as such.

        Hope this helps ;-)

    • Tim Clare 6:57 am on November 3, 2011 Permalink | Reply

      Hi Jay,

      I’m also using the motion theme, but i’m trying to hide the Page Title which is currently called “Home”. I would like it not to appear on the home page (and also have the option of switching it off on other pages if and when I need to).

      Any help on the code to enter and which part of the theme code to edit?

      Many thanks for any assistance.
      Tim

      • Jay Versluis 2:51 pm on November 3, 2011 Permalink | Reply

        Hi Tim,

        I’m not entirely sure what you mean by the Home Template. If you mean the tab that says “home” above (and below) your page title then that’s done via Custom Menus. By default, Motion has both menus activated and fills it with categories (at the top) and pages (at the bottom).

        To override this, head to Appearance – Menus and define two custom menus there. Select and activate them both, then populate them with elements you’d like to appear there.

        I’m explaining more about Custom Menus in this screencast.

        Hope this helps ;-)

  • Jay Versluis 9:05 am on April 7, 2011 Permalink | Reply
    Tags: buddypress, default theme   

    Categories: Themes ( 22 )

    How to style the BuddyPress Default Theme 

    Ray and I have been working on Livestatus, a status report system for television broadcasters. We decided that BuddyPress would be a superb platform to use for this and went with it.

    There aren’t many Themes available for BuddyPress so we went with the default theme which I think works best. However there’s still a lot of clutter we didn’t need so I made some quick amendmends.

    Here are my notes if you’d like to have a go.

    (More …)

     
    • FC Barcelona 7:51 pm on June 21, 2011 Permalink | Reply

      Hi thanks for sharing the tips, I am looking to change the menu items in buddypress, if you want a suggestion for a new topic :)

      • Jay Versluis 5:34 pm on June 22, 2011 Permalink | Reply

        I know what you mean,

        it should be as simple as adding a custom menu there – but I’m afraid it isn’t. The only (future-proof) way of changing those labels at the top is to translate BuddyPress via the method I described. The snag is that for example “Groups” isn’t just used in one single place. Every time a descriptive message mentiones something about groups, that’s where you need to replace it.

    • sandy 4:00 am on June 28, 2011 Permalink | Reply

      am using bp-nicey theme in that groups,forums,blogs,create an account are not working it shows page not found.Is there any need to change permalink settings and general settings.

      • Jay Versluis 1:08 pm on June 28, 2011 Permalink | Reply

        Hi Sandy,

        I think that’s a BuddyPress issue – the Permalink strucure with any BP theme needs to be something other than the WordPress default “ugly” structure. Under Settings – Permalinks try the second option from the bottom, that always works for me.

        Hope this helps ;-)

    • sandy 4:31 pm on July 6, 2011 Permalink | Reply

      thanks for ur response

    • zahid 9:36 pm on May 9, 2012 Permalink | Reply

      In which css file i should add this. i can not find #login-text in any of my css files. but i can see this id on slidebar.php.

      /* remove login form */
      #login-text {display: none;}
      #sidebar-login-form {display: none;}

      /* remove yellow members box from sidebar */
      .item-meta .activity {display: none;}

      • Jay Versluis 2:20 pm on May 10, 2012 Permalink | Reply

        Put it at the bottom of your style.css file, the one that comes with the theme or your child theme.

    • Zebra 1:33 am on April 3, 2013 Permalink | Reply

      Lets say I wanted to have the forum post title change to a different color when someone new comments on a forum post the user has clicked on previously, upon their return to view activity?

      Is there a way to insert a “New Comments” number in the topic activity displaying the number of new comments since the users last visit?

      Tks

    • charliepryke 4:09 am on November 23, 2013 Permalink | Reply

      When I change the name “Groups” to “teams” the slug remains the same, can we change this ?

      • Jay Versluis 12:02 pm on November 23, 2013 Permalink | Reply

        Pass I’m afraid – it’s been a while since I’ve looked into BuddyPress. Sorry :-(

  • Jay Versluis 4:03 am on January 7, 2011 Permalink | Reply  
    Categories: Themes ( 22 )

    How to style Modularity Lite 1.3 by GraphPaperPress 

    Modularity Lite returns with version 1.3, this time boasting WordPress Menus and a dynamic slideshow option to keep us excited. You can even change colours and your background image. Making it your own was never easier. Here are my notes from when I created minor amendmends for Simon’s website SoundCredit.tv.

    My original article on how to style this puppy goes back to version 1.1. With each update, the code has dramatically changed and therefore needs different tweaks. If you’re running an older version of Modularity Lite, check out my instructions for Version 1.2.

    (More …)

     
    • Jade 7:14 pm on January 7, 2011 Permalink | Reply

      Great tutorial ! Thank you so much !
      I would have a few questions :
      How could I :

      • reduce the height of the images on the static slideshow
      • only have the slideshow on the first page
      • replace the existing menu by an accordion image menu instead (which file of the theme should I edit?)

      Thanks again for your help !!!

      • Jay Versluis 12:14 am on January 8, 2011 Permalink | Reply

        Hi Jade,

        those are tough questions! I can’t help you with the accordion image idea (because I don’t know what you mean), but I can help you with the height of the slideshow. Take a look at the style.css file and see if you can find the code at the bottom that reads

        /* Slideshow */
        #slideshow {
        padding: 0;
        list-style: none;
        margin: 0 0 3em 0;
        overflow: hidden;
        min-height: 425px
        }

        Change the min-height parameter to your liking for a slimmer slideshow.

        As for the static slideshow (as explained above) you can add the code I’ve posted in the index.php (underneath the get_header() statement). This will insert the slideshow on the front page, IF you show your blog entires there. It won’t show up if you have a static page selected here.

    • Jade 9:19 am on January 8, 2011 Permalink | Reply

      Hi Jay,

      I followed your instructions and it perfectly works. I managed to get a slimmer slideshow ! Thanks.

      However, I am having some problems when it comes to only showing the slideshow on my front page. I added the code you’ve posted in the index.php (underneath the get_header() statement) but nothing happens and I still have the slideshow on every page…

      I’m sorry to keep bothering you but I have a few more questions reg. the sidebar and the menu.

      How could I possibly modify the width of the sidebar ? I would like to make it slimmer. Is there also a way to get rid of the thin black lines which separate the widgets ? (I am using a white background)

      My question reg. the menu is : which part of which file should I edit in order to replace the existing navigation bar (the one which shows up on the top right corner of the page) by an accordion image menu ?

      I apologize for those questions but your help would be greatly appreciated.

      Thanks you again for all of your work !

      • Jay Versluis 6:48 pm on January 9, 2011 Permalink | Reply

        Hi Jade, glad it worked for you so far. You can always to say thanks ;-)

        About the slideshow: it depends what you’ve set under Settings – Reading. If you set this to display “yoru latest posts”, the code above needs to go into the index.php file. If it’s set to “a static page”, the code needs to go into the page.php file. I’ve amended the article to include instructions to make this conditional. It’s complex but it works.

        About the sidebar width: this is a tricky one too – have a look in /library/screen.css for this. Under the section /* grid.css */ you’ll find several “span” values. Two of them are responsible for the content (.span-15) and sidebar width (.span-8). Thsoe numbers have to add up to the default container width (which is 900 by default). Make one slimmer and the other one bigger to modify your sidebar width.

        About the Nav Menu: the latest version fo this theme (1.3) uses the WordPress Menu option to create the navigation (under Appearance – Menu). In previous versions you could amend the nav.php file but that’s gone now. I can code this back for you if you’re interested for a small fee – however you will lose the option to use WordPress Menus.

        Hope all this helps ;-)

    • George Simpson 10:28 pm on January 11, 2011 Permalink | Reply

      hello Jay
      I was wondering how would i add Google search for adsense to all of my pages in the sidebar?

      • Jay Versluis 10:25 am on January 15, 2011 Permalink | Reply

        I’m not sure I understand your question… Google offer two products: one is Custom Search (that’s a search box), the other is Adsense (that’s the display of adverts). I don’t know Google Search for Adsense though.

        There are several plugins available that offer Google Search – go to Plugins – Add New – then search for “Google Search” and pick one from the list. These will offer widgets that you can embed into your sidebar.

        However if you’d like to display adverts in the sidebar, you can either grab the code that Google give you and put it into a text widget. Alternatively, you can use one of the many plugins that are available.

        Hope this helps ;-)

    • Jade 7:40 pm on January 12, 2011 Permalink | Reply

      Hello Jay,

      Thanks a lot for the tips regarding the width of the sidebar !

      I figured a way to take the nav menu away so I won’t need your help. Thanks for your concern though.

      I still have some problems to only show the slideshow on my front page. I uploaded the slideshow.php file into the theme’s directory and added the conditional statement underneath the get_header() statement in the page.php file (I changed the page ID) but I get 2 slideshows on the top of each other…

      My last question is about adding my own logo to the top left corner of the page. The logo is there but I can’t manage to have it linked to my homepage. I wrapped it in a link as you indicated in your 1.2 tutorial but it doesn’t work. Perhaps the 1.3 version does not allow such a change…

      Thanks again for your support !!!

      • Jay Versluis 12:40 pm on January 15, 2011 Permalink | Reply

        Ah, the second slideshow will be the one generated by the theme. Since you’re using your own, you should switch the theme slideshow off under Appearance – Theme Options.

        When you inserted your header, there’s a statement that looks similar to this:

        <img src="http://yourdomain.com/yourlogo.jpg">

        In order to make this a clickable link, you’ll put an A tag in the front and close it at the back. Ths can be on the same line, or on the line before and after. Just make sure you don’t wrap anything else into these parameters. Here’s the same image turned into a link:

        <a href="yourwebsite.com">
        <img src="http://yourdomain.com/yourlogo.jpg>
        </a>

        you may have to re-type this code – copy and paste doesn’t work sometimes…

    • Nestor 2:37 am on January 28, 2011 Permalink | Reply

      Hi Jay,

      Thanks for the tutorial!! very helpful! ;)
      And thanks for replying to all this comments.

      I’ve to say that I’ve followed all the instructions, but I don’t achieve to make it work. I’ve a static frontpage, and I’ve added to the frontpage.php file the code you show us in the tutorial. Anyway, I’ll review many times until I make it work!

      But the question I wanted to ask: Is it possible to show the pictures in the slideshow in a random order?

      Thanks in advance!

      • Jay Versluis 9:43 am on January 28, 2011 Permalink | Reply

        Thank you Nestor, much appreciated!

        You’re talking about the static slideshow, correct? If you’re using a static front page then the code needs to be placed in the single.php file. What I always do when I want to make a complex block show up is to place a simple word (like “Hello”) in the code. If that shows up where I want it then I know I’ve modofied the right file at the right place. Try that first and see if you’re getting a simple statement. Then move on to the code block.

        Currently the slideshow script shows pictures in sequential order as they are numbered – making it random is sligthly more tricky. Imagine if a random generator gives out the same number twice, you’d show the same picture twice – so the routine would have to account for that. I’ll look into this…

        • Nestor 6:55 pm on January 28, 2011 Permalink | Reply

          Thanks for the quick reply!

          I’ve achieved to make it work :)
          http://www.ineditt.com

          The only thing I miss at the moment is the random picture code. I’ll dive into google to look for something.

          • Jay Versluis 11:36 pm on January 28, 2011 Permalink | Reply

            Hi Nestor,

            I had a look at your site and now it makes perfect sense to me why you’d want a feature like this: having a front page which is 100% slideshow is a VERY cool idea indeed ;-) So here’s a little script that will generate a random number array for you. Place this above the slideshow code (underneath the get_header statement):

            <!-- Begin slideshow -->
            <?php
            // Randomizr
            $i = 1;
            while ($i <= 5):
            $image[$i] = rand (1,5);
            $i++;
            endwhile;
            ?>

            For this example I’ll stick with five images – but this works better if you have 10 or more (because the chances of getting the same image more than once are slimmer then). If you’re working with more images, replace both 5′s with however many images you have. Next up replace the five lines of slide show code with this:

            <div id="slideshow">
            <div><img src="<?php bloginfo('stylesheet_directory'); ?>/images/slideshow/image<?php echo $image[1]; ?>.jpg" alt="<?php bloginfo('name'); ?>" /></div>
            <div><img src="<?php bloginfo('stylesheet_directory'); ?>/images/slideshow/image<?php echo $image[2]; ?>.jpg" alt="<?php bloginfo('name'); ?>" /></div>
            <div><img src="<?php bloginfo('stylesheet_directory'); ?>/images/slideshow/image<?php echo $image[3]; ?>.jpg" alt="<?php bloginfo('name'); ?>" /></div>
            <div><img src="<?php bloginfo('stylesheet_directory'); ?>/images/slideshow/image<?php echo $image[4]; ?>.jpg" alt="<?php bloginfo('name'); ?>" /></div>
            <div><img src="<?php bloginfo('stylesheet_directory'); ?>/images/slideshow/image<?php echo $image[5]; ?>.jpg" alt="<?php bloginfo('name'); ?>" /></div>
            </div>

            Notice there are 5 lines – one for each image you want to call. They’re almost identical apart from the $image[] variable. If you’re working with 10 images, you’d repeat this line ten times and change the $image[] value accordingly.

            Looking forward to seeing this in action :-)

            • Nestor 4:20 am on February 1, 2011 Permalink | Reply

              Hi Jay!
              Thanks for the help!
              That’s a very “nice” piece of code!!

              I’ve implemented it in the .php file, and it works!!
              At the first time, there was some problem, but I’ve seen that it was because of one plugin that I had installed. I’ve deactivated it and … you can see here the final result:

              http://www.ineditt.com

              The only thing is that I have, at the moment, only 5 pictures. I’ve to upload more in the following days.

              Thanks again! :D

              • Nestor 4:25 am on February 1, 2011 Permalink | Reply

                By the way, I had to delete the sharing buttons that I had in the front page.
                The buttons were from “Sharethis”.

                The problem was that the page was loaded, but the slideshow was stopped, only showing the first picture, while the browser was getting some information from the “sharethis” server. This process lasts more than 10 seconds (too much!). So, at the end, I’ve decided to get rid of them.

                PS: the plugin I was commenting in the previous reply is the “sliding read more”. Really cool, and really useful… but, you know. :P

    • Max 3:48 am on February 6, 2011 Permalink | Reply

      Hi Jay,

      All your tutorials have been overwhelmingly helpful — I really can’t thank you enough.

      I was hoping you could maybe direct me as to how I can make certain changes on my site:

      1) In the bar below each individual blog post, I’d really like it if I could eliminate all the standard data (i.e. date, category, comments) and insert some other data (i.e. “Status: Available or Unavailable”). I’ve tried fiddling around with this before, but I can’t manage to pinpoint where exactly to make the appropriate customizations.

      2) When I go to my navigation bar and click on any of the categories which drop down from “Lamps”, the category title always appears (in dark, barely noticeable font) at the top of that page. How can I eliminate that? I was able to eliminate page titles, but this seems to be a blog category title — and I can’t figure it out…

      Thanks so much!

      Max

      • Jay Versluis 1:09 pm on February 7, 2011 Permalink | Reply

        Hi Max,

        glad I could help a fellow artist. Those are some awesome lamps you’ve got there ;-)

        Let me answer your first question first – the Meta Data display on Single Posts. Have a look at your single.php file and find the following code block:

        <p class="postmetadata alt" >
        <small>
        <?php
        $tag_list = get_the_tag_list( ' and was tagged with ', ', ' );
        printf( __( 'This entry was posted on %1$s. It was filed under %2$s%3$s.', 'modularity' ),
        get_the_time( get_option( 'date_format' ) ),
        get_the_category_list( ', ' ),
        $tag_list
        );
        ?>
        <?php edit_post_link( __( 'Edit this entry', 'modularity' ), '', '.' ); ?>
        </small>
        </p>

        Delete this entire block to remove the strip completely. Alternatively you could replace it with this:

        <p class="postmetadata alt">
        <small>
        <?php
        $tag_list = get_the_tag_list( 'This item is ', ', ' );
        echo $tag_list . ' | ';
        ?>
        <?php edit_post_link( __( 'Edit this entry', 'modularity' ), '', '.' ); ?>
        </small>
        </p>

        Now the strip only shows post tags – which means that if you have an item available you could tag it as “available”, and when it’s sold you remove the tag and replace it with “sold” or even “sold to Steven Spielberg”. You could even tag it as “available for $200″ all from where you’d write a post for each item. The advantage is that customers can look for similarly tagged pieces: all available, all for $200, all sold to Steven Spielberg, etc.

        Let’s have a look at removing the Category headline. Have a look at the archive.php file and find this piece of code:

        <h3>
        <?php if ( is_category() ) {
        /* If this is a category archive */
        single_cat_title();

        The last line is the one that displays the category title. Remove it and it will be gone for good. Or if you’d like to being it back in the future you can comment it out by putting /* in the front and */ at the end of it (like the line before).

        Hope it works ;-)

    • Max 7:31 am on February 8, 2011 Permalink | Reply

      Jay,

      Thank you so much for your response! Your tip on how to remove the category headline worked like a charm.

      I also followed your instructions on modifying the Meta Data bar by altering the code on the single.php file. I added the code just as you gave it to me — however, for some odd reason, any changes I made there don’t seem to impact what my blog ultimately displays. Even when I completely remove that entire segment of code, my site still continues to show a Meta Data bar below each post. Any further suggestions?

      Once again, Jay, I really can’t thank you enough for all your help.

      -Max

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

        Hi Max,

        my mistake indeed – the code I gave you appears in two other places in the theme with a slight variation, one is in blog.php and the other is in archives.php. This is the block you’re looking for:

        <?php
        $tag_list = get_the_tag_list( '| Tags: ', ', ' );
        printf( __( '%1$s | Categories: %2$s %3$s | ', 'modularity' ),
        get_the_time( get_option( 'date_format' ) ),
        get_the_category_list( ', ' ),
        $tag_list
        );
        ?>

        Replace the entire thing with the one I gave you earlier and you’re on to a winner. All three files are called on different occasions: single.php when you show a single post, archives.php when you’re browsing a category and blog.php when you’re using the “latest blog posts” function.

        Currently there seems to be a problem with your single.php file (when you click on the headline of a post, an error message comes up). You may have accidentally deleted a closing PHP tag or somesuch. If you run into any problems, let me know.

        Good luck ;-)

    • Max 7:33 am on February 8, 2011 Permalink | Reply

      By the way, let me not forget to tell you that I love your suggestion for adding customized tags to each of my posts as a way to notify customers of a product’s status/cost/etc. I can’t wait to get that working!

    • Max 6:49 am on February 10, 2011 Permalink | Reply

      Hey Jay,

      So I think I’m getting one step closer to eliminating all the information in the Meta Data bar (with the exception of Tags). The problem now, however, is that when I go ahead and delete the exact same code (as designated earlier) from the page.php, blog.php & archive.php and insert the new code you provided me in all three of those places, an error always occurs when I visit the blog section of the site (interestingly, it specifically points references an error on the archive.php). After using your suggestions and messing around with the code some more, I was able to get my blog to display only Tags and Comments in the Meta Data Bar — however I’m still trying to eliminate the comment option as well.

      I am very grateful for all that you’ve already shown me and if there is anything else that comes to mind, I’d be more than appreciative.

      Thanks so much,

      Max

      • Jay Versluis 7:34 pm on February 10, 2011 Permalink | Reply

        Hi Max,

        thank you so much for the coffee :-)

        I know this isn’t a simpe fix – so I’ve taken the liberty to make the amendmends for you in this handy zip file. It contains the files single.php, archive.php and blog.php. Assuming you’re using Version 1.3 you should be able to copy those over to /wp-content/themes/modularity-lite/ and all should work as expected (backup your old ones just in case…)

        I’ve left comments in the code so you can see where the amendmends are – so you can recreate the changes in your files. Have fun ;-)

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