phphtmlcsscustomization

how to position two elements left and right


In my Wordpress theme, I am trying to add a border at the bottom of the posts. On top of the border I want a comments link at the left and a share link at the right. I have tried multiple times to get it to look how I want it, but it never works. Does anyone have any suggestions for how I could achieve this? Thanks in advance. I have attached a picture of what it looks like now and how I want it to look along with my code.

How it looks now... enter image description here

how I want it to look... enter image description here

how it looks with suggestions (updated)... enter image description here single.php

<?php
get_header();
the_post_thumbnail('banner-image'); 
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<article class="post">
    
<?php wpb_set_post_views(get_the_ID()); ?>    
    <div class="post-info">    
    <h1 class="post-title"><?php the_title(); ?></h1>
    <h2 class="post-date"><?php echo strip_tags(get_the_term_list( $post->ID, 'location', 'Location: ', ', ', ' • ' ));?><?php the_date('F m, Y'); ?></h2>

    </div>
    <div class="post-content"><?php the_content(); ?></div>
    <div class="post-footer"><h1 class="post-footer-comment"><?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?></h1><h2 class="share">share</h2><?php get_template_part( 'share-buttons-post' ); ?></div>
<?php comments_template(); ?>
</article>
<?php endwhile;
else :
echo '<p>No content found</p>';
endif;
get_footer();
?>

and my css

.post-footer {
    border-bottom: 1px solid #000000;
    margin:40px 100px 0 100px;
    display: block;
    text-align: justify;
max-width:1865px;
}
.post-footer-comment {
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .2em;
    font-family: 'Lato', sans-serif;
    display: inline-block;
    float:left;
}
.post-footer-comment a:hover {
    color:#555555;
}
.share-buttons-post {
    letter-spacing: 10px;
    display: inline-block;
}
.share {
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .2em;
    font-family: 'Lato', sans-serif;
    display: inline-block;
    float: right;
}

comments.php

<?php if ( have_comments() ) : ?>
    <h4 class="comments-title">Post a Comment</h4>
    <ol class="comment-list">
        <?php wp_list_comments('callback=custom_comments'); ?>
    </ol>
<?php endif; ?>

<?php
$comments_args = array(
    'id_form'           => 'commentform',
    'class_form'        => 'comment-form',
    'id_submit'         => 'submit',
    'class_submit'      => 'submit',
    'name_submit'       => 'submit',
    'title_reply'       => __( 'Join the Conversation' ),
    'title_reply_to'    => __( 'Leave a Reply to %s' ),
    'cancel_reply_link' => __( 'Cancel reply' ),
    'label_submit'      => __( 'Post Comment' ),
    'format'            => 'xhtml',        
    'must_log_in' => '<p class="must-log-in">' .
        sprintf(
            __( 'You must be <a href="%s">logged in</a> to post a comment.' ),
            wp_login_url( apply_filters( 'the_permalink', get_permalink() ) )
        ) . '</p>',
    'logged_in_as' => '<p class="logged-in-as">' .
        sprintf(
            __( ' <a href="</a>. <a href="%3$s" title="Log out of this account"></a>' ),
            admin_url( 'profile.php' ),
            $user_identity,
            wp_logout_url( apply_filters( 'the_permalink', get_permalink( ) ) )
         ) . '</p>',
     'comment_notes_before' => '<p class="comment-notes">' .
         __( '' ) . ( $req ? $required_text : '' ) .
         '</p>',
     'author' => '<p class="comment-form-author"><label for="author">'
         . __( 'Name', 'domainreference' ) . '</label> '
         . ( $req ? '<span class="required">*</span>' : '' )
         . '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] )
         . '" size="30"' . $aria_req . ' /></p>',
     'email' => '<p class="comment-form-email"><label for="email">'
         . __( 'Email', 'domainreference' ) . '</label> '
         . ( $req ? '<span class="required">*</span>' : '' )
         . '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] )
         . '" size="30"' . $aria_req . ' /></p>',
     'url' => '<p class="comment-form-url"><label for="url">'
         . __( 'Website', 'domainreference' ) . '</label>'
         . '<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] )
         . '" size="30" /></p>',
);
comment_form($comments_args);
?>

functions.php


<?php
define( 'WP_DEBUG', true );
    function learningWordPress_resources() {
        wp_enqueue_style('style', get_stylesheet_uri());
        wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css', array('jquery'), '3.3.7', true );
        wp_enqueue_style( 'bootstrap-style', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
    }
 
add_action('wp_enqueue_scripts', 'learningWordPress_resources');
     
//Navigation Menus
register_nav_menus(array(
    'primary' => __('Primary Menu'),
    'footer' => __( 'Footer Menu'),
));
class CSS_Menu_Walker extends Walker {
    var $db_fields = array('parent' => 'menu_item_parent', 'id' => 'db_id');
    function start_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul>\n";
    }
    function end_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul>\n";
    }
    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
        global $wp_query;
        $indent = ($depth) ? str_repeat("\t", $depth) : '';
        $class_names = $value = '';
        $classes = empty($item->classes) ? array() : (array) $item->classes;
        /* Add active class */
        if (in_array('current-menu-item', $classes)) {
            $classes[] = 'active';
            unset($classes['current-menu-item']);
        }
        /* Check for children */
        $children = get_posts(array('post_type' => 'nav_menu_item', 'nopaging' => true, 'numberposts' => 1, 'meta_key' => '_menu_item_menu_item_parent', 'meta_value' => $item->ID));
        if (!empty($children)) {
            $classes[] = 'has-sub';
        }
        $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
        $class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';
        $id = apply_filters('nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args);
        $id = $id ? ' id="' . esc_attr($id) . '"' : '';
        $output .= $indent . '<li' . $id . $value . $class_names .'>';
        $attributes  = ! empty($item->attr_title) ? ' title="'  . esc_attr($item->attr_title) .'"' : '';
        $attributes .= ! empty($item->target)     ? ' target="' . esc_attr($item->target    ) .'"' : '';
        $attributes .= ! empty($item->xfn)        ? ' rel="'    . esc_attr($item->xfn       ) .'"' : '';
        $attributes .= ! empty($item->url)        ? ' href="'   . esc_attr($item->url       ) .'"' : '';
        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'><span>';
        $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
        $item_output .= '</span></a>';
        $item_output .= $args->after;
        $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
    }
    function end_el(&$output, $item, $depth = 0, $args = array()) {
        $output .= "</li>\n";
    }
}
 
// Add Widget Areas
function ourWidgetsInit() {
     
    register_sidebar( array(
        'name' => 'Sidebar',
        'id' => 'sidebar1',
        'before_widget' => '<div class="widget-item">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>',
    ));
     
    register_sidebar( array(
        'name' => 'Footer Area 1',
        'id' => 'footer1',
        'before_widget' => '<div class="widget-item">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>',
    ));
     
    register_sidebar( array(
        'name' => 'Footer Area 2',
        'id' => 'footer2',
        'before_widget' => '<div class="widget-item">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>',
    ));
     
    register_sidebar( array(
        'name' => 'Footer Area 3',
        'id' => 'footer3',
        'before_widget' => '<div class="widget-item">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>',
    ));
     
    register_sidebar( array(
        'name' => 'Footer Area 4',
        'id' => 'footer4',
        'before_widget' => '<div class="widget-item">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>',
    ));
     
}
 
add_action('widgets_init', 'ourWidgetsInit');

// Theme setup
function learningWordpress_setup() {
// Navigation Menus    
register_nav_menus(array(
    'primary' => __('Primary Menu'),
    'footer' => __( 'Footer Menu'),
));

// Add featured image support
    add_theme_support('post-thumbnails');
    add_image_size('medium-thumbnail', 446, 345, true);
    add_image_size('large-thumbnail', 1386, 595, true);
    add_image_size('popular-posts', 256, 256, true);
        add_image_size('banner-image', 5555,2500, true);
}

add_action('after_setup_theme', 'learningWordpress_setup');
// Register Custom Taxonomy
function location() {

    $labels = array(
        'name'                       => 'Locations',
        'singular_name'              => 'Location',
        'menu_name'                  => 'Location',
        'all_items'                  => 'All Items',
        'parent_item'                => 'Parent Item',
        'parent_item_colon'          => 'Parent Item:',
        'new_item_name'              => 'New Item Name',
        'add_new_item'               => 'Add New Item',
        'edit_item'                  => 'Edit Item',
        'update_item'                => 'Update Item',
        'view_item'                  => 'View Item',
        'separate_items_with_commas' => 'Separate items with commas',
        'add_or_remove_items'        => 'Add or remove items',
        'choose_from_most_used'      => 'Choose from the most used',
        'popular_items'              => 'Popular Items',
        'search_items'               => 'Search Items',
        'not_found'                  => 'Not Found',
        'no_terms'                   => 'No items',
        'items_list'                 => 'Items list',
        'items_list_navigation'      => 'Items list navigation',
    );
    $args = array(
        'labels'                     => $labels,
        'hierarchical'               => false,
        'public'                     => true,
        'show_ui'                    => true,
        'show_admin_column'          => true,
        'show_in_nav_menus'          => true,
        'show_tagcloud'              => true,
    );
    register_taxonomy( 'location', array( 'post' ), $args );

}
add_action( 'init', 'location', 0 );
// Carousel
function carousel_scripts() {
    wp_enqueue_style( 'owl.carousel', get_template_directory_uri() . '/css/owl.carousel.css' );
    wp_enqueue_style( 'owl.theme', get_template_directory_uri() . '/css/owl.theme.css' );
    wp_enqueue_script( 'owl.carousel', get_template_directory_uri() . '/js/owl.carousel.js', array('jquery'), '20120206', true );
    wp_enqueue_script( 'effects', get_template_directory_uri() . '/js/effects.js', array('jquery'), '20120206', true );
}
add_action( 'wp_enqueue_scripts', 'carousel_scripts' );
// Custom control for carousel category
 
if (class_exists('WP_Customize_Control')) {
    class WP_Customize_Category_Control extends WP_Customize_Control {
 
        public function render_content() {
   
            $dropdown = wp_dropdown_categories( 
                array(
                    'name'              => '_customize-dropdown-category-' . $this->id,
                    'echo'              => 0,
                    'show_option_none'  => __( '&mdash; Select &mdash;' ),
                    'option_none_value' => '0',
                    'selected'          => $this->value(),
                     
                )
            );
 
            $dropdown = str_replace( '<select', '<select ' . $this->get_link(), $dropdown );
  
            printf(
                '<label class="customize-control-select"><span class="customize-control-title">%s</span> %s</label>',
                $this->label,
                $dropdown
            );
        }
    }
}
 
// Register slider customizer section 
 
add_action( 'customize_register' , 'carousel_options' );
 
function carousel_options( $wp_customize ) {
 
$wp_customize->add_section(
    'carousel_section',
    array(
        'title'     => 'Carousel settings',
        'priority'  => 202,
        'capability'  => 'edit_theme_options',
    )
);
 
$wp_customize->add_setting(
    'carousel_setting',
     array(
    'default'   => '',
  )
);
 
$wp_customize->add_control(
    new WP_Customize_category_Control(
        $wp_customize,
        'carousel_category',
        array(
            'label'    => 'Category',
            'settings' => 'carousel_setting',
            'section'  => 'carousel_section'
        )
    )
);
 
$wp_customize->add_setting(
    'count_setting',
     array(
    'default'   => '6',
 
  )
);
 
$wp_customize->add_control(
    new WP_Customize_Control(
        $wp_customize,
        'carousel_count',
        array(
            'label'          => __( 'Number of posts', 'theme_name' ),
            'section'        => 'carousel_section',
            'settings'       => 'count_setting',
            'type'           => 'text', 
        )
    )
);
 
}
//MORE COMMENTS
/**
 * Return the default comment form fields.
 *  Customize comment form default fields.
 * Move the comment_field below the author, email, and url fields.
 */
function wpse250243_comment_form_default_fields( $fields ) {
    $commenter     = wp_get_current_commenter();
    $user          = wp_get_current_user();
    $user_identity = $user->exists() ? $user->display_name : '';
    $req           = get_option( 'require_name_email' );
    $aria_req      = ( $req ? " aria-required='true'" : '' );

    $fields = [
        'author' => '<p class="comment-form-author">' . '<label for="author">' . __( '', 'textdomain'  ) . ( $req ? ' <span class="required"></span>' : '' ) . '</label> ' .
                    '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30" maxlength="245"' . $aria_req . $html_req . ' /></p>',
        'email'  => '<p class="comment-form-email"><label for="email">' . __( '', 'textdomain'  ) . ( $req ? ' <span class="required"></span>' : '' ) . '</label> ' .
                    '<input id="email" name="email" ' . ( $html5 ? 'type="email"' : 'type="text"' ) . ' value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30" maxlength="100" aria-describedby="email-notes"' . $aria_req . $html_req  . ' /></p>',
        'url'    => '<p class="comment-form-url"><label for="url">' . __( '', 'textdomain'  ) . '</label> ' .
                    '<input id="url" name="url" ' . ( $html5 ? 'type="url"' : 'type="text"' ) . ' value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" maxlength="200" /></p>',
        'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x( '', 'noun', 'textdomain' ) . '</label> <textarea id="comment" placeholder="Comment" name="comment" cols="45" rows="8" maxlength="65525" aria-required="true" required="required"></textarea></p>',
    ];

    return $fields;
}
add_filter( 'comment_form_default_fields', 'wpse250243_comment_form_default_fields' );

/**
 * Remove the original comment field because we've added it to the default fields
 * using wpse250243_comment_form_default_fields(). If we don't do this, the comment
 * field will appear twice.
 */
function wpse250243_comment_form_defaults( $defaults ) {
    if ( isset( $defaults[ 'comment_field' ] ) ) {
        $defaults[ 'comment_field' ] = '';
    }

    return $defaults;
}
add_filter( 'comment_form_defaults', 'wpse250243_comment_form_defaults', 10, 1 );
//COMMENTS
add_filter( 'comment_form_default_fields', 'wpse_62742_comment_placeholders' );

/**
 * Change default fields, add placeholder and change type attributes.
 *
 * @param  array $fields
 * @return array
 */
function wpse_62742_comment_placeholders( $fields )
{
    $fields['author'] = str_replace(
        '<input',
        '<input placeholder="'
        /* Replace 'theme_text_domain' with your theme’s text domain.
         * I use _x() here to make your translators life easier. :)
         * See http://codex.wordpress.org/Function_Reference/_x
         */
            . _x(
                'Name',
                'comment form placeholder',
                'theme_text_domain'
                )
            . '"',
        $fields['author']
    );
    $fields['email'] = str_replace(
        '<input id="email" name="email" type="text"',
        /* We use a proper type attribute to make use of the browser’s
         * validation, and to get the matching keyboard on smartphones.
         */
        '<input type="email" placeholder="Email"  id="email" name="email"',
        $fields['email']
    );
    $fields['url'] = str_replace(
        '<input id="url" name="url" type="text"',
        // Again: a better 'type' attribute value.
        '<input placeholder="Website" id="url" name="url" type="url"',
        $fields['url']
    );

    

    return $fields;
}
//Comments Continued
if ( get_option ('thread_comments') ) {
    wp_enqueue_script('comment-reply');
}
//Comments
function custom_comments ($comment, $args, $depth) {
    $GLOBALS['comment'] = $comment; ?>
  <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
      <div id="comment-<?php comment_ID(); ?>">
          <header class="comment-author-vcard">
              
              
              <?php printf (__('<cite_class="fn">%s</cite> <span class="says"></span>'), get_comment_author_link()) ?>
    </header>
          

          
          <div class="comment-meta"><a href="<?php echo htmlspecialchars( get_comment_link($comment->comment_ID )) ?>"></a></div>
              
              <div class="comment-content"><?php comment_text() ?></div>
              
          <div class="comment-time"><?php printf(__('%1$s at %2$s'), get_comment_date(), get_comment_time() ) ?><?php edit_comment_link(__('(Edit)'), '   ', ' ') ?><?php comment_reply_link(array_merge($args, array('depth' => $depth, 'max_depth' => $args['max_depth'] ))) ?></div>                           
          
           
          
          <div class="reply">
              
          </div>
      </div>
          <?php
}

//New Menus
function register_my_menus() {
  register_nav_menus(
    array(
      'new-menu' => __( 'Footer Menu Secondary' ),
      'another-menu' => __( 'Another Menu' ),
      'an-extra-menu' => __( 'An Extra Menu' )
    )
  );
}
add_action( 'init', 'register_my_menus' );

// Wordpress
function load_fonts() {
    wp_register_style('et-googleFonts', 'https://fonts.googleapis.com/css?family=David+Libre|Crimson+Text|Questrial|Montserrat|Catamaran|Pathway+Gothic+One|PT+Serif|Days+One|Lato:300|Work+Sans:400,500,600,700');
    wp_enqueue_style( 'et-googleFonts');
}
add_action('wp_print_styles', 'load_fonts');

// Popular Posts
function wpb_set_post_views($postID) { 
    $count_key = 'wpb_post_views_count'; 
    $count = get_post_meta($postID, $count_key, true); 
    if($count==''){ 
        $count = 0; 
        delete_post_meta($postID, $count_key); 
        add_post_meta($postID, $count_key, 0); 
    }else{ 
        $count++; 
        update_post_meta($postID, $count_key, $count); 
    } 
} 
//To keep the count accurate, lets get rid of prefetching 
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);

function wpb_track_post_views ($post_id) { 
    if ( !is_single() )
        return; 
    if ( empty ( $post_id) ) { 
        global $post; 
        $post_id = $post->ID; 
    } 
    wpb_set_post_views($post_id); 
}
add_action( 'wp_head', 'wpb_track_post_views');

Solution

  • I presume you're trying to right-align the share buttons.

    Try changing this part:

    <h2 class="share">share</h2><?php get_template_part( 'share-buttons-post' ); ?>
    

    to this:

    <div class="share"><span>share</span> <?php get_template_part( 'share-buttons-post' ); ?></div>
    

    EDIT based on further comments: to now put the footer line below the comments / share information, add this to the .post-footer CSS:

    overflow: hidden;
    

    And to move the word 'share' down slightly, use the updated <div class="share"> line above, and then this CSS should do it:

    .share span {
        display: inline-block;
        position: relative;
        top: 2px;
    }