0

I am using the function below to to give the widget_title an array but I need a second array to handle a line I'm using next to the end of the title. How do I go about doing that?

I'm assuming I need to make another class and a second $title, but I've tried a hundred different ways and nothing.

add_filter('widget_title', my_title);

function my_title($title) {
  // Cut the title to 2 parts
  $title_parts = explode(' ', $title, 1);

  // Throw first word inside a span
  $title = '<span class="my_class">'.$title_parts[0].'</span>';

  // Add the remaining words if any
  if(isset($title_parts[1]))
    $title .= ' '.$title_parts[1];

  return $title;
}

CSS:

    .widget {
    margin: 0 0 1.5em;
    margin-top: 15px;
    width: 350px;
        overflow: hidden;
        background: #333846;


    box-shadow: 0px 0px 11px 2px rgba(42, 42, 42, 0.04);
-moz-box-shadow: 0px 0px 11px 2px rgba(42, 42, 42, 0.04);
-webkit-box-shadow: 0px 0px 11px 2px rgba(42, 42, 42, 0.04);
}

.widget-area{
    width: 350px;
}

.widget-title {
    text-transform: uppercase;
    font-size: 1.22rem;
    margin-bottom: 15px;
    font-weight: bold;
} 

.widget-title {
    position: relative;
    padding: 23px 23px;
    z-index: 1;
}

.second_title .widget-title> span {
    background-color:#383e4d;
}



.first_title:after {
    content: '';
    position: absolute;
    display: inline-block;
    top: 28px;
     right: 1px;
    left: 30px;
    height: 3px;
    background-color: #fff;
    z-index: -1;
}


/* Make sure select elements fit in widgets. */
.widget select {
    max-width: 100%;
}

.first_title {
    z-index:1;
    background: #383e4d;
    }
.second_title{
        color:#00d5c3;
        background: #383e4d;
        padding-right: 15px;
        z-index:-1;

}
.second_title::before{
    background: #383e4d;
    z-index: 1;
}

.widget-title{
        font-family: "GothamPro" !important;
        font-size:1.15em;
        color:#fff;
        background:#383e4d;
        padding-top:15px;
        padding-bottom:15px;
        z-index: 1;

   }
   .widget ul{

    }
  • So essentially you're trying to apply a class to just the first word of the title? – Jami Gibbs Dec 31 '16 at 20:48
  • no no. I want a class for the first word, then a class for the rest of the words. I need a second class because I have a line next to the title that simply uses the widget_title class. – geektripp Dec 31 '16 at 20:59
0

This will wrap a span around the first word and also the remaining words in the title. Adjust the class names as necessary:

add_filter('widget_title', 'yourprefix_custom_title');
function yourprefix_custom_title( $old_title ) {

  $title = explode( " ", $old_title, 2 );

  if ( isset( $title[0] ) && isset( $title[1] ) ) {
    $new_title = "<span class='first'>$title[0]</span> <span class='second'>$title[1]</span>";
  } else {
     return;
  }

  return $new_title;
}

UPDATE

The following CSS will apply a color to the first word and also a color to the remaining words in the title as well as add a decorative line after.

  .widget-title {
    position: relative;
    display: block;
    overflow: hidden;
  }
  .widget-title:after {
    content: "";
    position: absolute;
    top: 50%;
    border-bottom: 1px solid #333333;
    width: 100%;
    margin: 0 .8em;
  }
  .widget-title span.first {
    color: red;
  }
  .widget-title span.second {
    color: green;
  }
| improve this answer | |
  • It's sooo close. It ends up having the line to the left of the second word and to the right of the second word. I just want it on the right. Any ideas? – geektripp Jan 1 '17 at 17:34
  • You want something like: --- Recent Posts --- but you're getting: --- Recent --- Posts ? – Jami Gibbs Jan 1 '17 at 17:56
  • close! I want something like Recent Posts ------ – geektripp Jan 1 '17 at 18:31
  • And Recent and Posts have different colors. – geektripp Jan 1 '17 at 18:32
  • Can you add your CSS to your question? – Jami Gibbs Jan 1 '17 at 18:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.