MADE

Author: admin

  • Of love and slugs

    Client: Can we have every post category look different?

    A super quick trick today: the client requested that a listing of their wordpress blog posts be color coded with different heading styles to add a sense of excitement to their post page.

    The easiest way to go about that would be to create a CSS class based on each category. We would have to achieve the following:

    • Echo the category name to use as a new class
    • Display the category name as a slug (to use in CSS)
    • Create CSS classes
    • Append the category name as the new class to an existing element, like the header

    WordPress makes retrieving the category name easy with tags like get_the_category, but those tags output either lists or actual names, rendering a full name of a category like “Party Planning.” That formatting with the space is no use to us in css, we are looking for “party-planning” instead.

    That’s when we use the slug instead. Attached is the code used to achieve a dynamically generated CSS class for every post.

    <?php
$categories = get_the_category();
$cls = '';

if ( ! empty( $categories ) ) {
  foreach ( $categories as $cat ) {
    $cls .= $cat->slug . ' ';
  }
}
?>

<li class="<?php echo $cls; ?> ">
    <div class="content">
        <h4><?php the_title(); ?></h4>
    </div>
</li>

  • Death by a thousand clicks

    A client came to me with a realization: their site’s “always off canvas” hamburger menu was stylish, but painful to use when trying to quickly navigate through their product portfolio. Having to toggle the menu to simply to go back to the portfolio’s index became clunky and difficult.

    A look at the design suggested there was more real estate at the bottom of each post than the top. Adding a breadcrumb above the page title was a novelty idea, but seemed to create a top-heavy design. I was called to code a solution.

    A possible design was sent to me featuring a previous and next button:

    Although I agree that the site was hard to navigate, I didn’t believe this was the best solution. I could navigate back and forth, but through what, exactly? The user needed to know that the navigation was referring only to products if it wasn’t clear already.

    On top of that, all I could do was navigate back and forth alphabetically via these buttons. What if the next product I wanted to look at wasn’t necessarily the next product in alphabetical order? I highly doubted anyone was planning to read each product this way like a book. There needed to be a way to go back to the product index in general.

    I found the design of these buttons didn’t match the very modern and minimal look of the overall site. Despite the plain look of these buttons, right and left aligned buttons in general didn’t seem like the way to go.

    I suggested the following design instead:

      <div class="post-navigation">

<?php
$prev_post = get_previous_post();
if($prev_post) {
   $prev_title = strip_tags(str_replace('"', '', $prev_post->post_title));
   echo "\t" . '<a rel="prev" href="' . get_permalink($prev_post->ID) . '" title="' . $prev_title. '" class="prev-nav"><i class="fas fa-angle-left"></i></a>' . "\n";
} else {
  echo "\t" . '<a href="#" class="prev-nav disabled"><i class="nav fas fa-angle-left"></i></a>' . "\n";
}
 ?>

<a href="../../product-lineup" class="grid" title="Back to Products"><i class="fas fa-grip-horizontal"></i></a>
<?php 
$next_post = get_next_post();
if($next_post) {
   $next_title = strip_tags(str_replace('"', '', $next_post->post_title));
   echo "\t" . '<a rel="next" href="' . get_permalink($next_post->ID) . '" title="' . $next_title. '" class="next-nav"><i class="fas fa-angle-right"></i></a>' . "\n";
} else {
  echo "\t" . '<a href="#" class="next-nav disabled"><i class="nav fas fa-arrow-right"></i></a>' . "\n";
}
?>
         </div>

    This design had a modern look and feel to it, aligned itself with center with the heading above the description, and allowed the navigation to feel like its own section on the page rather than an afterthought of the section above it.

    I also included the title of the corresponding post when the arrows were hovered to let the user know where they were going. The center icon matched the boxed grid layout of the product index, signaling the user that this icon leads you back to that page.

    I lowered the opacity of the arrows on the first and last pages to indicate the user was at the beginning or end of the portfolio list without knocking off the balance of the navigation’s design.

    This design would also translate well with minimal coding changes for mobile.

    Live version

  • Breaking the grid

    A designer gave me a template that featured a row containing a 3-step process. Below the steps was a row of three images. I mistakenly designed the rows as two separate rows, not realizing that each image actually corresponded to a step. The appearance was fine in desktop, but in mobile, the images were not attached to their corresponding steps and appeared together in a sequence.

    Although I could have gone back in to redesign the columns and include the image within each step, I used somewhat of a hack to take care of the column ordering for me to save myself the time of redefining margins and paddings for the images vs. the step description.

    I went back into the code and gave each of the six columns its own class and used flexbox ordering to reorder the columns to achieve the mobile view above:

    @include tablet {

  .one {
    order: 1;
  }

  .two {
    order: 3;
  }

  .three {
    order: 5;
  }

  .four {
    order: 2;
  }

  .five {
    order: 4;
  }

  .six {
    order: 6;
  }

}

  • Joy, divisions

    A company with two distinct services sought to create a website that featured content from both divisions. Each division was assigned a color that would be featured in various elements of the site’s theme to differentiate each service.

    Through a clever implementation of a WordPress plugin called Advanced Custom Fields, a user could easily create color coded pages from templates that displayed and filtered content from the appropriate division, pictured.

    The Problem:

    An inspection of the site’s architecture revealed that the color coding was only being used for pages rather than posts, which meant that any dynamically generated content wouldn’t reflect the color coding. This became apparent when the client came to me requesting the addition of random related posts and a carousel slider featuring all posts on the homepage.

    Too many steps:
    ACF could be added to the post editor, allowing the client to select within each posts which color the post should be, but it seemed like an unnecessary step given that the colors correspond with the taxonomy. It seemed ideal to hook CSS to each post’s taxonomy rather than create a custom field for it. That would automate the posting process a bit more.

    ACF Queries:
    When displaying posts, ACF’s default interface only allowed the user to select specific posts one by one. There were no available settings to simply query random posts from each division and set their arguments. Even when implemented correctly, the posts still needed to somehow pull the right CSS class to represent their respective divisions

    Goal:

    1. Create queries that pull all posts from a certain taxonomy rather than having the user select specific posts one by one
      1. Allow such posts to be pulled in random order
    2. Attach CSS to post taxonomies to ensure they are color coded in dynamically generated sections of the site without adding a new step in the posting process

    Solution:

    Creating queries
    The first ask was to create the correct queries in ACF to dynamically pull all / random posts in a post gallery based on the existing taxonomy. This query needed to allow the user to select which taxonomy to use on the front end:

    Related Posts ACF Query

    The following code allows for posts from a selected taxonomy to be pulled in random order and excludes the current post from the query:

    <?php
$post_terms = wp_get_object_terms($post->ID, 'type', array('fields'=>'ids'));

$args = array(
    'posts_per_page' => '3',
    'post_type' => 'iwerk_case_study',
    'post__not_in' => array($post->ID),
    'orderby' => 'rand',
    'tax_query' => array(
        array(
            'taxonomy' => 'type',
            'field' => 'id',
            'terms' => $post_terms,

        )
    )
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {
        echo '';
    while ( $the_query->have_posts() ) {
        $the_query->the_post();
        $case_study = get_sub_field('division_case_study');
        $case_study_id = $case_study->ID;
        $case_study_title = get_the_title($case_study);
        $screen = get_field('homepage_image', $case_study_id);
        $description = get_field('short_description', $case_study_id);
        $thumbnail = get_field('thumbnail_image', $case_study_id);
        $link = get_permalink($case_study);
        $post_id = get_queried_object_id();
        ?>
                   <div class="case-study">   
              <a href="<?= $link ?>">         
                <div class="img" style="background-image:url('<?= $thumbnail ?>');">
                <div class="overlay <?php foreach( $terms as $term ) echo ' ' . $term->slug; ?>">
  					<div class="copy">
  					Learn More 
            </div>
            </div>
              </div>

              <div class="name <?php foreach( $terms as $term ) echo '' . $term->slug; ?>"><?= $case_study_title ?></div>
                </a>         
              </div>
            <?php
    }
        echo '';
} else {
    console.log("No related posts found.");
}
wp_reset_postdata();
?>

    Display all posts in taxonomy

    The code below dynamically pulls all posts from a certain taxonomy

    <?php
  $selected = get_field('related_posts');
  $args = array( 
    'post_type' => 'iwerk_case_study',
    'tax_query' => array(
      array(
        'taxonomy' => 'type',
        'operator' => 'IN',
        'terms' => array($selected),
        ),
      ),
  );
  $angebot_2 = new WP_Query( $args );
  while( $angebot_2->have_posts() ) : $angebot_2->the_post();
  $case_study = get_sub_field('division_case_study');
        $case_study_id = $case_study->ID;
        $case_study_title = get_the_title($case_study);
        $image = get_field('header_image', $case_study_id);
        $thumbnail = get_field('thumbnail_image', $case_study_id);
        $screen = get_field('homepage_image', $case_study_id);
        $description = get_field('short_description', $case_study_id);
        $link = get_permalink($case_study);
        $post_id = get_queried_object_id();
        $color = get_field('color', $post_id);
?>

  <div class="case-study">   
              <a href="<?= $link ?>">         
                <div class="img" style="background-image:url('<?= $image ?>');">
                <div class="overlay <?= $color ?>">
  					<div class="copy">
  					Learn More 
            </div>
            </div>
              </div>

              <div class="name <?= $color ?>"><?= $case_study_title ?></div>
                </a>         
              </div>

  <?php endwhile; wp_reset_postdata(); ?>

    Creating Taxonomy-based CSS
    Now that posts were being pulled correctly by taxonomy, the next step was to attach CSS to a post’s taxonomy to allow it to be displayed with the correct color coding in dynamic content sections and pages.

    I decided to simply add CSS classes for each taxonomy and then call that class in each template page by referencing the taxonomy name itself (seen in the code as “technology-services” and “software-development.”)

    Tab 1

    The following code pulls the taxonomy name of the current post inside of a class tag to create the correct CSS class:

    <?php $terms = get_the_terms( $post->ID, 'type' ); ?>
 <div class="hero-tagline <?php foreach( $terms as $term ) echo ' ' . $term->slug; ?>">

    Tab 2

    Below is the sass/css used to attach style to each taxonomy/class name:

      &.division-orange,
      &.software-development {
        background-color: rgba($orange, 0.85);
      }

      &.division-teal,
      &.technology-services {
        background-color: rgba($teal, 0.85);
}

 &:hover {
          cursor: pointer;

          .software-development {
            color: $orange;
          }

          .technology-services {
            color: $teal;
          }

     .title {
        &.software-development {
          color: $orange;
        }

        &.technology-services {
          color: $teal;
        }

    Creating a homepage post slider:
    The homepage slider functioned much like the related posts queries, but pulled content from all divisions with additional elements referencing the taxonomy name, including the category name, taxonomy-based link, and title for each post. The images below show content from both divisions in the same slider with the color coding intact.

    <div class="case-study-slide">
  <div class="case-arrow"  data-animation="fadeInLeftBig" data-delay="0.1s"></div>
     <div class="case-study-description">

       <div class="copy">

         <div class="type" data-animation="fadeInLeftBig" data-delay="0.25s">Case Study:

         <a href="<?php echo esc_url( home_url( '/' ) ); ?>division/<?php if( $my_terms) {foreach( $my_terms as $term ) {echo $term->slug;}} ?>" class="<?php if ($my_terms) {echo $term->slug. ' ';} ?>">

             <?php if ($terms) { echo ''.$terms.''; } else  {} ?>

           </a>

          </div>
         <h3 class="title <?php if( $my_terms) {foreach( $my_terms as $term ) {echo $term->slug;}} ?>" data-animation="fadeInLeftBig" data-delay="0.5s"><?= $case_study_title ?></h3>
         <p class="description"  data-animation="fadeInLeftBig" data-delay="0.7s">
           <?= $description ?>
         </p>
         <a href="<?= $link ?>" class="btn teal" data-animation="fadeInLeftBig" data-delay="0.8s">VIEW CASE STUDY</a>
       </div>
     </div>
     <div class="case-study-image">
       <img src="<?= $image ?>" alt=""  data-animation="fadeInRightBig" data-delay="0.5s">
     </div>
   </div>

    The queried case studies of each division, showing their respective color coding.

  • “These tabs don’t do anything”

    WP Bakery Pagebuilder is one of my favorite WordPress plugins of all time. In fact, I’m using it right now to post this article. However, there is one thing about it that bothers me time and time again and it’s the mobile handling of tabbed content.

    To say WP Bakery is the only tabbed content solution that bothers me would be unfair; most “responsive” tabs suffer from this same issue. Although the tabs scale down and stack in mobile, navigating from tab to tab lacks a UI that tells the user that anything has happened on the page when a tab is selected

    The image on the right shows a mobile view of a series of tabs listing different services provided by this client. The content within each tab is under the fold right below this list. When the user selects a service, the active link is highlighted but that’s all; there is nothing to indicate that any change has happened on the page.

    A user could easily assume these are external links, links to other pages, and so on. Without UI to show that content has indeed been changed, one could be lead to believe these links are all broken.

    That’s not the only issue; a user has to scroll up and down a fair amount every time they want to navigate and read. The simplest solution is to tuck the items into a dropdown.

    A surprise to no one, this is much easier said than done, especially within the confines of WP Bakery’s existing code. If we were to build these tabs from scratch, a combination of Jquery and CSS does the job easily. But because we are essentially modifying something that exists to extend its features, the process is a different animal entirely.

    Objective:

    Redesign WP Bakery’s existing module to clearly show changing content when navigating between tabs in mobile view.

    • Retain desktop tabbed view
    • Render tab list into dropdown in mobile
    • Minimize risk of tabbed content falling below the fold; minimize risk of tab navigation filling whole mobile screen
    • Create a fully responsive solution without modifying WP Bakery’s existing module

    Obstacles:

    • Seamless switching from mobile to desktop view
    • Adding some kind of controller to collapse and expand the menu ONLY in mobile view without modifying existing code
    • Making sure the navigation also collapses once a user has selected a list item ONLY in mobile

    The Solution

    Jquery and CSS Media queries were employed to add important classes and elements and control its behavior depending on screen size. In the content builder, I added a class, extraclass to a tabbed content module to target one specific tab set.

    Then, in Jquery, I added a button to use as the controller to expand/collapse the navigation list in mobile, .service-toggle.

    I targeted the content that the button would toggle, .tabbed ul

    One of the biggest obstacles in this process was hiding the tabs after the user has selected a service. It’s one thing to expand/collapse the section, but another function completely to close the same menu after a link is clicked since mobile relies on touch rather than hover states.

    Adding slideToggle function to .click(function) was relatively easy. However, the desktop version did not have the button controller and hiding the nav list onclick in desktop caused the entire menu to become inaccessible after one click. I would have to find some way to make the onclick function trigger only in mobile.

    Jquery was used once again to add a class to the mobile version of the tab navigation, .tab-sm. The click function was modified to target only this class, preventing this same function from firing in desktop.

    A separate and similar function had to be written to account for the possibility of the window being resized. Using CSS to add a class to the window resizing turned out to be better than using jquery to find out the window size, as resizing caused the function to fire multiple times.

    Jquery

    jQuery(document).ready(function($) {
  
    $(".extraclass").prepend('<button class="service-toggle" id="myButton1">Select a Service ▾</button>');

  
   $("button").click(function(){
        $(".tabbed ul").slideToggle();  
       });
  
   
  $(".extraclass a").click(function(){
        $(".tab-sm ul").slideToggle();
      });
  
 

$(window).resize(function() {
  if ($(window).outerWidth() < 825) {
          $('.extraclass').addClass('tab-sm');
     }
  else{
  $('.extraclass').removeClass('tab-sm');
  }
});
  
 

if ($(window).outerWidth() < 825) {
   $('.extraclass').addClass('tab-sm');
}
else {
   $('.extraclass').removeClass('tab-sm');
}  

  
  
})

    CSS

    .ui-tabs-nav {display: none;}
.service-toggle {display: none;}

.wpb_tabs_nav li {
white-space: normal !important;    
border-bottom: 1px solid #fff;
line-height: normal !important;
}


@media screen and (min-width: 785px) {
.tabbed ul {display: block !important;}
}

@media screen and (max-width: 784px) {
.ui-tabs-nav {display: none;}   
.tabbed ul {display: block;}
    
.service-toggle {
    cursor: pointer;
    display: block;
    width: 100%;
    background-color: transparent;
    border: 1px solid #efefef;
    border-radius: 4px;
    padding: 10px;
    font-size: 16px;
    color: #6f6f6f;
  
    
}

button:active {
background-color: #c1c1c1;
}


.tabbed .wpb_tabs_nav {
 width: 100% !important;   
}

.wpb_tabs_nav li {
 width: 100% !important;   
}

.extraclass .wpb_tab {
 margin-top: 30px;   
}
}

  • “We have too many verticals”

    The Client:

    “We want to have a section on the site that shows all of our case studies, filterable by industry/vertical. The problem is, we have quite a few verticals with long names and the current tabbed design doesn’t accommodate for more than a few tabs. Please advise.

    One of the biggest challenges of having any kind of tabbed or tab-like designs on a website is visually representing them in a mobile environment. Many times, when there’s a great deal of filters, the mobile version will force a user to scroll past the entire list just to see the initial content.

    Furthermore, other problems arise when the filters are using jquery or AJAX to load the information. The page may not scroll to the content and alert the user that the viewing area has changed. This has been a pain point in many of my projects.

    To address this particular issue, I had to keep in mind the following:

    • No category is more important than the other
    • The user needs to see the content change in the viewing area after they have selected their desired filter
    • It would be ideal if the user was not confronted with the full list of filters and be forced to scroll past the entire list on every page
    • There needs to be an initial view, probably a list of all case studies

    The solution I chose to pursue would be somewhat of a dropdown list. However, I was restricted by the nature of how the case studies were being rendered and the budget of the client to keep from redesigning the mechanics of the list.

    I had to come up with a mostly CSS-based solution that would leave the javascript undisturbed, yet give the whole section new mechanics.

    As I designed a solution, I was confronted with even more problems due to the native functionality of the existing code:

    • I had to create a toggling function for a static HTML list
    • I had to create new UI for interacting with the list, including hover states, active states, and inactive states for each list item
    • I had to make the list aesthetically pleasing within the full width space it had to exist in
    • I had to create UI for the arrow in the select filter to alert the user to toggle the menu open and closed
    • The entire list has to disappear once a user clicks an item
    • All interaction should be animated and without glitches

    Jquery

    The following jquery was used to add classes to the existing code for additional styling as well as select the classes to toggle and keep when interacting with the pseudo dropdown.

    (function($){

    $( document ).ready(function() {

    $('.cmsmasters_project_filter_list').addClass('notfirst');

  });

  $('.first').click(function(e){
        e.preventDefault();

        $('.notfirst').slideToggle();
    });

      $('.cmsmasters_project_filter_list li, .cmsmasters_project_filter_list .button').click(function(e){
        e.preventDefault();

        $('.notfirst').slideToggle();
    });

$('.first').click(function(){
  $('.first').toggleClass('add sub');
});  

})(jQuery);

    CSS

    The following CSS was added to work with the already existing pagebuilder, create the list styling, add spaces and characters before each item, and create the animating arrow to the right of the filter.

    .first:hover {cursor: pointer;}

.cmsmasters_project_filter_list {padding-bottom: 25px !important;}

.cmsmasters_project_filter_list li {
padding: 0px !important;
margin: 0px !important;
    margin: 0;
border-bottom: 1px solid #f7f7f7;
  display: block;
width: 100%;

}

.cmsmasters_project_filter_list .button {padding: 4px 0px !important; display: block !important; width: 100% !important; text-align: left !important;}

.cmsmasters_project_filter_list .button {font-weight: normal !important; color: #626262 !important;}

.cmsmasters_project_filter_list .current .button  {font-weight: bold !important; color: #49a33c !important;}

.cmsmasters_project_filter_block{position: relative; cursor: pointer;
}

.cmsmasters_project_filter_block .magic-line {display: none !important;}

 .cmsmasters_project_filter_list li:hover {background-color: #f7f7f7; z-index: 1000 !important;}

.first {padding: 25px 0px;}

.notfirst {display: none;}

.first span {float: left;}

.first span::after {
  content: "\00a0 ▾";
}

.sub span::after {
  content: "\00a0 ▴";
}

    The finished product was one that did not alter any complex plugin, pagebuilder, or WP files. The purely jquery / css solution allowed me to build on top of what existed and preserve all functionality of the original interaction. The solution proved to be far more user-friendly than even the original tab design even at its best by eliminating the need to scroll past a list in responsive and scroll up and down in order to see the changing content in the views section.

  • “Our footer is dead”

    The client:

    “The footer on our website could use a little help. It doesn’t look very dynamic and the theme we’re using is not very flexible in terms of column width. We’re not sure what content to put in the footer to complete or how to make it look less dead. We’d like something that looks like this site you built for another client.”

    They weren’t wrong. Although the overall design of the page had its own problems, the footer was a big piece of it. A full view of the page showed that the footer occupied almost a quarter of the overall page content and left the user staring at – no pun intended – a blue ocean at the bottom of each page.

    The WordPress theme in use allowed for a three or four column layout only. What is seen in the screenshot above is a four column design with only two widget areas filled out.

    The client asked me to step in.

    The solution:

    To combat the problems in the footer, I identified the following issues:

    • The footer is ‘too blue’
    • There is too much footer; it occupies an overwhelming amount of vertical space
    • The empty widget sections cause the footer content to seem imbalanced and add to the first bullet about there being far too much blue
    • The only difference between each column heading and the links that follow them are the capitalization
    • The client is not using the footer to its fullest potential, nor does the footer seem to have a focused goal

    The last bullet is especially critical. The footer is a very important part of a page or site. This section functions as somewhat of a miniature toolbox for a user when they reach the end of a page. The footer should contain links and items that a user may want to access no matter what page they are on.

    Examples include:

    • Contact information
    • Legal/copyright information
    • Privacy policy / Terms information
    • Social media links
    • Newsletter signup forms or links
    • Social media feeds
    • Login links
    • Links to a sitemap

    The footer should be predictable. Shoving random links on the bottom just to fill out the content doesn’t help the user whatsoever.

    In terms of design, a footer should not be the largest portion of a page. This is a hint that you do not have enough content in the body or that you have far too much going on in the footer.

    Links in the footer should be quick access. The user does not need a full rehash of the whole site navigation as it should already exist somewhere else on the site. Some designers think rehashing the entire navigation tree in the footer helps a user navigate once they reach the bottom of a page, saving them the need to scroll back up, but there are many solutions to this, including a scroll to top button or a fixed nav bar. There is no need to be redundant

    Knowing that the client wanted lists 5-7 items long proved to be a challenge. At this point, I knew that the content would have to be that much more well developed to keep the footer what it is: a footer.

    The remaining widget areas were filled with third party links that pertained to services offered by the client along with a quick access widget for contacting the company.

    The addition of icons, buttons, and bullets proceeding the links helped liven up the lists and content rather than present a wall of text.

    The headers for each menu were redesigned to be more prominent and identifiable. The borders beneath each header completed the grid lines for the eyes and anchored the menus beneath. It’s an especially effective strategy for lists and links that aren’t very long.

    One of the most prominent additions was the background image, which broke up the one shade of blue to give the section a more dynamic, less flat look. It was the flatness of the former design that made the section seem ‘dead.’ A simple abstract background image gave the section dimension and detail.

    Before:

    After:

    It may be the last thing the user sees on a page, but the footer is one of the most important elements on an entire website. Users will beeline straight for the footer when searching for contact information, business address, or legal info. And just because a footer may contain some of a site’s more boring information does not mean it also has to look that way too.

    Learn more about the full site redesign:

    See Project