i am developing a wp theme and i have changed the “previous post” to “PREV” and “next post” to “NEXT” in the single.php template for posts navigation. is it acceptable? if yes. should i make them translatable?
yes acceptable. yes you must have to make translation ready.
1 Like
ALL static texts have to be translatable, no exceptions.
1 Like
thank you. so the question is how to make them translatable “PREV” & “NEXT” static text?
my theme.pot file contains the following :
#: single.php:23
msgid "Previous:"
msgstr ""
#: single.php:24
msgid "Next:"
msgstr ""
is that code will detect “PREV” & “NEXT” ? or there is another solution
You need to post your PHP code not a .pot file. The .pot file is the result of the correct PHP code, it is not something you should edit directly.
here is my navigation posts links in single.php:
<div class="nav-posts">
<aside class="aside-post-navigation previous-post center">
<?php
the_post_navigation(
array(
'prev_text' => '<span class="nav-subtitle">' . esc_html__( 'PREV', 'hireme' ) . '</span>',
'next_text' => '<span class="nav-subtitle">' . esc_html__( ' ', 'hireme' ) . '</span>',
)
);
?>
</aside><!-- .aside-post-navigation -->
<aside class="aside-post-navigation next-post center">
<?php
the_post_navigation(
array(
'prev_text' => '<span class="nav-subtitle">' . esc_html__( ' ', 'hireme' ) . '</span>',
'next_text' => '<span class="nav-subtitle">' . esc_html__( 'NEXT', 'hireme' ) . '</span>',
)
);
?>
</aside><!-- .aside-post-navigation -->
</div>
As for the translation-ready aspect, it is ok (except for those empty strings - that doesn’t make sense at all), but dividing it into two separate elements is IMHO nonsense. You can achieve it with just a single the_post_navigation call and some CSS styling.
Don’t try to be overly “creative” with the code, the simpler the better.
Imagine parsing it via screen reader - like blind person would use it, now you have like two separate navigations which is super confusing and absolutely unnecessary.
Also that’s not how ASIDE tag should be used. Just change it to DIV and try to read something about the more “niche” tags before you use them. You are better not using them at all if you are not sure you are using them correctly.
thank you @LSVRthemes for advices. but what do you mean with more “niche” tags? u mean semantic html tags ?
Right, tags should be used in semantically correct way.
1 Like
so at the end i can use “PREV” instead of “Previous” on the single.php ?
Yes you can
1 Like
But you should redo your code, because the way it is now is not good at all. That is much more important then using “Prev” instead of “Previous”, that’s detail.
1 Like
i am working on thank you
i have changed the code to the following:
the bellow code is located in single.php at the bottom of content-single.php
<div class="nav-posts">
<?php
the_post_navigation(
array(
'prev_text' => '<span class="nav-subtitle">' . esc_html__( 'PREV', 'hireme' ) . '</span>',
'next_text' => '<span class="nav-subtitle">' . esc_html__( 'NEXT', 'hireme' ) . '</span>',
)
);
?>
</div>
but the code above will be visible just for mobile sizes:
for desktop another code will be visible:
the bellow code is from content-single.page which is included on single.php
<aside id="desktop-post-nav-prev" class="aside-post-navigation previous-post center">
<?php
the_post_navigation(
array(
'prev_text' => '<span class="nav-subtitle">' . esc_html__( 'PREV', 'hireme' ) . '</span>',
)
);
?>
</aside><!-- .aside-post-navigation -->
<article id="post-<?php the_ID(); ?>" class="article-single " <?php post_class(); ?>>
//content here
</article><!-- #post-<?php the_ID(); ?> -->
<aside id="desktop-post-nav-next" class="aside-post-navigation desktop-post-nav next-post center">
<?php
the_post_navigation(
array(
'next_text' => '<span class="nav-subtitle">' . esc_html__( 'NEXT', 'hireme' ) . '</span>',
)
);
?>
</aside><!-- .aside-post-navigation --
on the desktop i made them as left and right aside:
I do not really understand why you are using two completely different code snippets for that.
The first code snippet is correct, but it should be used for both mobile and desktop. All the “hard work” should be done using the CSS. There is absolutely no need to overcomplicate code like that. The HTML/PHP should be as simple as possible - basically as you already have it in your first snippet.
The second snippet is nonsense, even worse as it was before. Again, use only the first snippet and style everything with CSS.
1 Like
thanks a lot. i aprecciate your advices