How to add an additional class to headlines

Community Forums Forums Design Tips and Tricks How to add an additional class to headlines

This topic is: not resolved

Tagged: , ,

This topic contains 8 replies, has 3 voices, and was last updated by  Jen Baumann 1 year, 6 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #7397

    vic
    Participant

    Lets say I have written a custom CSS class by the name “headline-wrap” and want to wrap my h2 headlines (post titles) with this new class. Since I want this to be strictly a child theme, I don’t want to edit the template structure file manually. Maybe its something I have to add in the functions.php

    Can someone assist me with this?

    • This topic was modified 1 year, 6 months ago by  nickthegeek.
    • This topic was modified 1 year, 6 months ago by  nickthegeek.
    #7400

    Riavon
    Participant
    Post count: 95

    It would be helpful to know what theme you’re using and/or a link to your site so we can take a look. I don’t know what it is you intend to do with your h2 wrap, but if you just want to add style to a particular header, such as the post titles, just look in your stylesheet (style.css) you can find h1.entry-title { which will style your post titles. Just apply the style you want to the element you want. Also, you can consider using the Genesis Simple Hooks plugin to add your own code to the theme, as well. I hope this is helpful to you.

     

    PS – Note to mods, this post needs to be in the “Design tips and tricks” area rather than in the Forum Bugs and Suggestions area. Not sure if you have the power to move it or not? ~ Ria


    Twitter: @riavonentprises

    • This reply was modified 1 year, 7 months ago by  Riavon. Reason: Note to mods
    • This reply was modified 1 year, 7 months ago by  Riavon. Reason: Note to mods
    #7403

    vic
    Participant

    I am trying to make my own child theme. I am trying to get a ribbon effect on the post titles. So the horizontal part of the ribbon is pretty manageable by editing the elements in the CSS file but the small triangle part that forms the fold of the ribbon which goes outside the headline needs me to use an additional CSS class so that it fits the ribbon correctly.

    I am working on my local installation of WP.

     

    The ribbon css that I have is this :

    #content #title {

    width: 684px;
    height: 61px;
    margin-left: -79px !important;
    background: url(http://static.tumblr.com/bl61tiy/YSplmw2a2/title_bar.png);
    display: block;
    margin: 20px 0px;
    position: relative;
    font-family: ‘Arvo’, arial;
    line-height: 34px;
    z-index: 12;
    box-shadow: 0px 0px 5px black;

    }

    #content #title .shad {

    width: 26px;
    height: 26px;
    position: absolute;
    bottom: -26px;
    right: 0px;
    background: url(http://static.tumblr.com/bl61tiy/8svln7c0b/title_shad.png);

    }

    The first snippet adds a horizontal line of the ribbon and the second one adds a small triangle that acts as the fold. I want to add that to the h2 headings. If it makes it easier, lets say I am using the Focus child theme.

    #7404

    vic
    Participant

    It is something about adding a filter and an echo

    filter (fn_add_headline)
    <h2 <?php echo class=”headline-wrap”/>>title</h2>

    Something like that. I searched everywhere but could not get the syntax right. If someone could please type that line for me so that I can paste it in my functions.php that would be great.

    #7405

    Riavon
    Participant
    Post count: 95

    Oh cool, I really like that effect. I did that same thing on one of my client sites ( lakefestnc dot com ) and just so happens I built that one using my own child theme, too! It was my first child theme, and I remember wanting to learn how to do that CSS ribbon effect! :) Anyway… you can look at how that site is coded, if you want. I followed the css tutorials I found on the subject and utilized the CSS :after pseudo-element to do the ribbons. I’ll see if I can find the tutorial for you so you can learn, too.

    In case anyone is interested in learning how to make a ribbon effect using simple CSS, > HERE <  is the link I mentioned above. CSS Tricks is an amazing resource for CSS, by the way.

    Vic, good luck finding your echo. :)


    Twitter: @riavonentprises

    • This reply was modified 1 year, 7 months ago by  Riavon. Reason: Added link to CSS ribbon tutorial
    • This reply was modified 1 year, 7 months ago by  Riavon. Reason: Added link to CSS ribbon tutorial
    #7406

    vic
    Participant

    I am not so much after the output of the ribbon effect than the knowledge part itself. I would genuinely like to know how to wrap an element in the class that I want via PHP. Its something as simple as adding an echo, but I don’t get the syntax right.

    #7483

    Jen Baumann
    Keymaster
    Post count: 325

    Here’s an example for h1 titles:
    [php]//Filter Post Title
    add_filter(‘genesis_post_title_output’, ‘custom_post_title_output’);
    function custom_post_title_output( $title ) {
    if( is_singular() )
    return sprintf( ‘<h1 class="entry-title"><span>%s</span></h1>’, apply_filters( ‘genesis_post_title_text’, get_the_title() ) );
    }[/php]


    If you need technical support for your theme please file a ticket.

    The forums are community based. Staff only monitors the forum for issues relating to the forum itself and to redirect users to where they need to go.

    #7485

    vic
    Participant

    Thanks, but where do I insert the class name in the code above?

    #7560

    Jen Baumann
    Keymaster
    Post count: 325

    You can alter the code to give any output you need. I’m not entirely clear on the markup you need because, until today, code hasn’t pasted well in the forums.


    If you need technical support for your theme please file a ticket.

    The forums are community based. Staff only monitors the forum for issues relating to the forum itself and to redirect users to where they need to go.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.