Skip to content

Commit 1d8c7e6

Browse files
adictonatoradictonator
committed
updated blog page and single article page UI
- update UI for comments section
1 parent b9bd314 commit 1d8c7e6

File tree

9 files changed

+839
-346
lines changed

9 files changed

+839
-346
lines changed

‎comments.php

Lines changed: 145 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,145 @@
1-
<?php
2-
/**
3-
* The template for displaying comments
4-
*
5-
* This is the template that displays the area of the page that contains both the current comments
6-
* and the comment form.
7-
*
8-
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
9-
*
10-
* @package cjt
11-
*/
12-
13-
/*
14-
* If the current post is protected by a password and
15-
* the visitor has not yet entered the password we will
16-
* return early without loading the comments.
17-
*/
18-
if (post_password_required()) {
19-
return;
20-
}
21-
?>
22-
23-
<div id="comments" class="comments-area">
24-
25-
<?php
26-
// You can start editing here -- including this comment!
27-
if (have_comments()) :
28-
?>
29-
<h2 class="comments-title">
30-
<?php
31-
$cjt_comment_count = get_comments_number();
32-
if ('1' === $cjt_comment_count) {
33-
printf(
34-
/* translators: 1: title. */
35-
esc_html__('One thought on &ldquo;%1$s&rdquo;', 'cjt'),
36-
'<span>' . wp_kses_post(get_the_title()) . '</span>'
37-
);
38-
} else {
39-
printf(
40-
/* translators: 1: comment count number, 2: title. */
41-
esc_html(_nx('%1$s thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', $cjt_comment_count, 'comments title', 'cjt')),
42-
number_format_i18n($cjt_comment_count), // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
43-
'<span>' . wp_kses_post(get_the_title()) . '</span>'
44-
);
45-
}
46-
?>
47-
</h2><!-- .comments-title -->
48-
49-
<?php the_comments_navigation(); ?>
50-
51-
<ol class="comment-list">
52-
<?php
53-
wp_list_comments(
54-
array(
55-
'style' => 'ol',
56-
'short_ping' => true,
57-
)
58-
);
59-
?>
60-
</ol><!-- .comment-list -->
61-
62-
<?php
63-
the_comments_navigation();
64-
65-
// If comments are closed and there are comments, let's leave a little note, shall we?
66-
if (! comments_open()) :
67-
?>
68-
<p class="no-comments">
69-
<?php esc_html_e('Comments are closed.', 'cjt'); ?>
70-
</p>
71-
<?php
72-
endif;
73-
74-
endif; // Check for have_comments().
75-
76-
comment_form();
77-
?>
78-
79-
</div><!-- #comments -->
1+
<?php
2+
/**
3+
* The template for displaying comments
4+
*
5+
* This is the template that displays the area of the page that contains both the current comments
6+
* and the comment form.
7+
*
8+
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
9+
*
10+
* @package cjt
11+
*/
12+
13+
/*
14+
* If the current post is protected by a password and
15+
* the visitor has not yet entered the password we will
16+
* return early without loading the comments.
17+
*/
18+
if (post_password_required()) {
19+
return;
20+
}
21+
?>
22+
23+
<div id="comments" class="comments-area bg-white rounded shadow-lg p-8 mt-8">
24+
<div class="max-w-3xl mx-auto">
25+
<?php
26+
if (have_comments()) :
27+
$cjt_comment_count = get_comments_number();
28+
?>
29+
<h2 class="comments-title text-2xl font-bold mb-6">
30+
<?php
31+
if ('1' === $cjt_comment_count) {
32+
printf(
33+
/* translators: 1: title. */
34+
esc_html__('One thought on &ldquo;%1$s&rdquo;', 'cjt'),
35+
'<span class="font-normal">' . wp_kses_post(get_the_title()) . '</span>'
36+
);
37+
} else {
38+
printf(
39+
/* translators: 1: comment count number, 2: title. */
40+
esc_html(_nx('%1$s thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', $cjt_comment_count, 'comments title', 'cjt')),
41+
number_format_i18n($cjt_comment_count), // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
42+
'<span class="font-normal">' . wp_kses_post(get_the_title()) . '</span>'
43+
);
44+
}
45+
?>
46+
</h2>
47+
48+
<?php the_comments_navigation(array(
49+
'prev_text' => '<span class="text-brand-blue hover:text-brand-blue/80">&larr; ' . __('Older Comments', 'cjt') . '</span>',
50+
'next_text' => '<span class="text-brand-blue hover:text-brand-blue/80">' . __('Newer Comments', 'cjt') . ' &rarr;</span>',
51+
)); ?>
52+
53+
<ul class="comment-list space-y-6 mb-6">
54+
<?php
55+
wp_list_comments(array(
56+
'style' => 'ul',
57+
'short_ping' => true,
58+
'callback' => 'cjt_custom_comment_output'
59+
));
60+
?>
61+
</ul>
62+
63+
<?php
64+
the_comments_navigation(array(
65+
'prev_text' => '<span class="text-brand-blue hover:text-brand-blue/80">&larr; ' . __('Older Comments', 'cjt') . '</span>',
66+
'next_text' => '<span class="text-brand-blue hover:text-brand-blue/80">' . __('Newer Comments', 'cjt') . ' &rarr;</span>',
67+
));
68+
69+
if (!comments_open()) :
70+
?>
71+
<p class="no-comments bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-6">
72+
<?php esc_html_e('Comments are closed.', 'cjt'); ?>
73+
</p>
74+
<?php
75+
endif;
76+
77+
endif; // Check for have_comments().
78+
79+
comment_form(array(
80+
'class_form' => 'space-y-4',
81+
'class_submit' => 'bg-brand-blue hover:bg-brand-blue/80 text-white font-bold py-2 px-4 rounded',
82+
'comment_field' => '<div class="comment-form-comment">
83+
<label for="comment" class="block text-sm font-medium text-gray-700 mb-1">' . _x('Comment', 'noun') . '</label>
84+
<textarea id="comment" name="comment" rows="5" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-blue/30 focus:ring focus:ring-brand-blue/20 focus:ring-opacity-50" required></textarea>
85+
</div>',
86+
'fields' => array(
87+
'author' => '<div class="comment-form-author">
88+
<label for="author" class="block text-sm font-medium text-gray-700 mb-1">' . __('Name', 'cjt') . '</label>
89+
<input type="text" id="author" name="author" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" required>
90+
</div>',
91+
'email' => '<div class="comment-form-email">
92+
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">' . __('Email', 'cjt') . '</label>
93+
<input type="email" id="email" name="email" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" required>
94+
</div>',
95+
'url' => '<div class="comment-form-url">
96+
<label for="url" class="block text-sm font-medium text-gray-700 mb-1">' . __('Website', 'cjt') . '</label>
97+
<input type="url" id="url" name="url" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
98+
</div>',
99+
),
100+
'title_reply_before' => '<h3 id="reply-title" class="comment-reply-title text-xl font-bold mb-4">',
101+
'title_reply_after' => '</h3>',
102+
));
103+
?>
104+
</div>
105+
</div>
106+
107+
<?php
108+
// Custom comment output function
109+
function cjt_custom_comment_output($comment, $args, $depth) {
110+
$GLOBALS['comment'] = $comment;
111+
?>
112+
<li id="comment-<?php comment_ID(); ?>" <?php comment_class('bg-gray-50 p-4 rounded-lg'); ?>>
113+
<article id="div-comment-<?php comment_ID(); ?>" class="comment-body">
114+
<footer class="comment-meta mb-2">
115+
<div class="comment-author vcard flex items-center">
116+
<?php echo get_avatar($comment, 40, '', '', array('class' => 'rounded-full mr-2')); ?>
117+
<?php printf('<b class="fn">%s</b>', get_comment_author_link()); ?>
118+
</div>
119+
<div class="comment-metadata text-sm text-gray-500 mt-1">
120+
<time datetime="<?php comment_time('c'); ?>">
121+
<?php printf(_x('%1$s at %2$s', '1: date, 2: time'), get_comment_date(), get_comment_time()); ?>
122+
</time>
123+
<?php edit_comment_link(__('Edit'), ' <span class="mx-1">|</span> <span class="edit-link">', '</span>'); ?>
124+
</div>
125+
</footer>
126+
<div class="comment-content prose mt-2">
127+
<?php comment_text(); ?>
128+
</div>
129+
<div class="reply mt-2">
130+
<?php
131+
comment_reply_link(array_merge($args, array(
132+
'add_below' => 'div-comment',
133+
'depth' => $depth,
134+
'max_depth' => $args['max_depth'],
135+
'before' => '<div class="reply">',
136+
'after' => '</div>',
137+
'class' => 'text-brand-blue hover:text-brand-blue/50'
138+
)));
139+
?>
140+
</div>
141+
</article>
142+
</li>
143+
<?php
144+
}
145+
?>

‎functions.php

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -188,3 +188,39 @@ function add_additional_class_on_li($classes, $item, $args)
188188
return $classes;
189189
}
190190
add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);
191+
192+
// Add this function to your theme's functions.php file
193+
function cjt_widget_classes($params) {
194+
// Add classes to the widget container
195+
$params[0]['before_widget'] = str_replace('class="', 'class="mb-8 last:mb-0 ', $params[0]['before_widget']);
196+
197+
// Add classes to the widget title
198+
$params[0]['before_title'] = '<h2 class="text-xl font-bold mb-4 pb-2 border-b border-gray-200">';
199+
$params[0]['after_title'] = '</h2>';
200+
201+
return $params;
202+
}
203+
add_filter('dynamic_sidebar_params', 'cjt_widget_classes');
204+
205+
// Add this function to your theme's functions.php file
206+
function cjt_widget_list_classes($output) {
207+
$output = str_replace('<ul', '<ul class="space-y-2"', $output);
208+
$output = str_replace('<li', '<li class="text-gray-700"', $output);
209+
$output = str_replace('<a', '<a class="text-blue-600 hover:text-blue-800 transition-colors duration-200"', $output);
210+
return $output;
211+
}
212+
add_filter('widget_output', 'cjt_widget_list_classes', 10, 3);
213+
214+
// Add this function to your theme's functions.php file
215+
function cjt_search_form( $form ) {
216+
$form = '<form role="search" method="get" class="search-form flex" action="' . home_url( '/' ) . '">
217+
<label class="sr-only">
218+
<span class="screen-reader-text">' . _x( 'Search for:', 'label' ) . '</span>
219+
</label>
220+
<input type="search" class="flex-grow border border-gray-300 rounded-l-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="' . esc_attr_x( 'Search …', 'placeholder' ) . '" value="' . get_search_query() . '" name="s" />
221+
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-r-md hover:bg-blue-600 transition-colors duration-200">' . esc_attr_x( 'Search', 'submit button' ) . '</button>
222+
</form>';
223+
224+
return $form;
225+
}
226+
add_filter( 'get_search_form', 'cjt_search_form' );

‎index.php

Lines changed: 25 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -15,45 +15,28 @@
1515
get_header();
1616
?>
1717

18-
<main id="primary" class="font-body">
19-
20-
<?php
21-
if (have_posts()) :
22-
23-
if (is_home() && ! is_front_page()) :
24-
?>
25-
<header>
26-
<h1 class="page-title screen-reader-text">
27-
<?php single_post_title(); ?>
28-
</h1>
29-
</header>
30-
<?php
31-
endif;
32-
33-
/* Start the Loop */
34-
while (have_posts()) :
35-
the_post();
36-
37-
/*
38-
* Include the Post-Type-specific template for the content.
39-
* If you want to override this in a child theme, then include a file
40-
* called content-___.php (where ___ is the Post Type name) and that will be used instead.
41-
*/
42-
get_template_part('template-parts/content', get_post_type());
43-
44-
endwhile;
45-
46-
the_posts_navigation();
47-
48-
else :
49-
50-
get_template_part('template-parts/content', 'none');
51-
52-
endif;
53-
?>
54-
55-
</main><!-- #main -->
56-
57-
<?php
58-
get_sidebar();
59-
get_footer();
18+
<main class="bg-gray-100 min-h-screen py-8">
19+
<div class="container mx-auto px-4">
20+
<div class="flex flex-col lg:flex-row gap-x-4 md:gap-x-6">
21+
<div class="w-full">
22+
<?php
23+
if (have_posts()) :
24+
while (have_posts()) :
25+
the_post();
26+
get_template_part('template-parts/content', get_post_type());
27+
endwhile;
28+
29+
the_posts_navigation();
30+
31+
else :
32+
get_template_part('template-parts/content', 'none');
33+
endif;
34+
?>
35+
</div>
36+
37+
<?php get_sidebar(); ?>
38+
</div>
39+
</div>
40+
</main>
41+
42+
<?php get_footer(); ?>

‎sidebar.php

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
1-
<?php
2-
/**
3-
* The sidebar containing the main widget area
4-
*
5-
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
6-
*
7-
* @package cjt
8-
*/
9-
10-
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
11-
return;
12-
}
13-
?>
14-
15-
<aside id="secondary" class="widget-area">
16-
<?php dynamic_sidebar( 'sidebar-1' ); ?>
17-
</aside><!-- #secondary -->
1+
<?php
2+
/**
3+
* The sidebar containing the main widget area
4+
*
5+
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
6+
*
7+
* @package cjt
8+
*/
9+
10+
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
11+
return;
12+
}
13+
?>
14+
15+
<aside id="secondary" class="widget-area bg-white rounded shadow-md p-6 md:w-1/3 lg:w-1/4">
16+
<div class="space-y-8">
17+
<?php dynamic_sidebar( 'sidebar-1' ); ?>
18+
</div>
19+
</aside><!-- #secondary -->

0 commit comments

Comments
 (0)