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...
how I want it to look...
how it looks with suggestions (updated)...
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' => __( '— Select —' ),
'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;
}
- How/when mysql compiles stored procedures?
- Search a 2d array by one column value and return another value from the qualifying row
- Search a multidimensional array by one column value and return another value from the qualifying row
- Get element value from a 2d array row which qualifies because of another column value
- Can I use array_search() to find a whole-row match in a 2d array?
- How to secure my login page
- Symfony 2: How to get route defaults by route name?
- php - find if an array contains an element
- Doctrine entity object to array
- Get URL to a Sulu page by content id
- Determine if an associative array of strings or arrays is equal to another array with the same structure
- PHP How to determine the first and last iteration in a foreach loop?
- Disable Undefined Property error in PHP Devsense extension on VSCode
- Fill the ACF field who modified the user profile
- How to Integrate 3rd party API in Wordpress
- Coverting a .BAK file into a .SQL for use in XAMPP phpmyadmin
- Add product thumbnails to Woocommerce admin orders list, only if product still exists
- Merge two 2d arrays, group by one column and sum another column within each group
- PHP json_decode multiple arrays or array in array to database
- laravel try/catch doesn't work for a failed query
- Return the first level key when a column value is found in a 2d array
- Find key of parent in array / PHP
- Find parent key of match in a multidimensional array
- Recursively search a multidimensional array for the parent key of a matched key or value
- Find a parent key in a 2d array
- Get first level key in a 2d array of the first row with a specified value in any element
- Removing currency symbol, except on Woocommerce cart and checkout pages
- How to display course list in moodle form?
- Multiple Image Upload PHP form with one input
- How to remove "Shipping" label from Woocommerce Email notifications?