Set up an "English version" button on my posts

  • Author
  • #2885654



    I have a bilingual blog and every post exists in French and English.
    I link the posts by adding on top of the posts the hyperlink “Click here for English version” or “Cliquez ici pour le fran├žais”.

    The problem is that I want to place the possibility to switch languages at the top of my post otherwise people will never see it.
    But when I create these hyperlinks, my post thumbnails (and therefore FB shares) start with the ridiculous first words “click here for English”.

    Hence my idea (or hope) to create an “English version” and “French version” buttons that would be located at the top of my posts without showing on my thumbnails of FB shares.

    Thanks a lot!


    The blog I need help with is


    Hi Loren, about your only choice on this is to add it to the actual content of the post or page, as you are doing. If you add them to the bottom of the posts, CSS can be used to move it to the top without it showing up at top in search engines and shares since as far as the html is concerned, it is still at the bottom.

    My suggestion would be to add a CSS class to the paragraph you have your link in so that it looks like this from within the Text tab in the post editor.
    <p class="lang-link"><a href="" target="_blank">Read it in English</a></p>
    Once you have moved one or two to the bottom of the content and then let me know which post(s) you have done that to and I can work on the CSS to move it to the top.




    Thanks for the trick.
    On the following posts, I put “Read it in English” at the very bottom of the post.

    And on this one “Click here for English version”

    Then I added the CSS you gave me.

    Question: should I be consitent with the wording of my refering sentence? Would it makes things easier to set it up automatically in the code so I don’t have to code for every post?

    Thanks a lot



    Hi, this would be the CSS required, but you need to add the “p” tag to each of the click here for English versions and then add the class declaration to the that like I have above. We have to have the CSS class in order to be able to move it.

    We cannot use CSS to add dynamic links, or even just links, to the posts. That is HTML, and CSS cannot be used to add HTML, such as links. Also, the link changes for each post since the URL changes. To make this automatic would require something like Ajax, Javascript or PHP, and we cannot use that at




    Thank you very much.
    Although, I’m little lost.

    I added the “p” tag in both my posts.
    How do I create a CSS class?

    One I’ve created the class, then I should add the CSS code gave me earlier, right?



    I’m sorry, I somehow forgot to post that for you. For the class in the p tag, make the opening p tag look like this.
    <p class="en-lang">
    And then add this to your custom CSS and see what you think.

    .entry-content {
    	position: relative;
    	padding-top: 50px;
    .en-lang {
    	position: absolute;
    	top: 0;



    Thank a lot for your answer.

    However I still don’t understand where I put write the “class in the p tag”

    In the CSS Code ???
    I’m lost


    Sorry, I messed up again. This would be what your opening p tag should look like. Switch to the Text tag in the editor to enter it.
    <p class="en-lang">


    Actually I didn’t mess up, our system isn’t showing things correctly at the moment.



    I’m very sorry, but where should I write <p class=”en-lang”> ??

    I have no idea what “an opening p tag” is nor where to switch to the tag text.

    Where is this editor?


    The editor is where you write and edit your posts. Open that post to edit it. Click on the HTML tab at the top right and scroll to the bottom where you have the link. You will see that it starts with
    <a href="https....
    and ends with
    Add this before the <a href… so it looks like this
    <p class="en-lang"><a href="https...
    and then add </p> after the ending so it looks like this

    When you are done it should look like this.
    <p class="en-lang"<a href="" target="_blank">Read it in English</a></p>




    Thank you very much, the light finally came and I was able to do everything you advised me.

    The trick works perfectly for the 2 posts I did as tests.

    However, I’m now bumping into a display issue on my home page. In the posts thumbnails, there is a “blank” between the posts title and the first lines of text.
    I think it has been created by moving up the “Read it in English”.

    Any addtional trick to fix this display issue?

    Thank you sincerely


    Ah, yeah I see that. Let’s replace the code I gave earlier with the following, which excludes your front page.

    body:not(.blog) .entry-content {
    body:not(.blog) .en-lang {




    Brilliant, thanks a lot!

    However, it only does the trick on the home page and not on the sub menus pages:

    How could I extend the magic?


    I’m sorry for the run around on this. I’m having trouble getting the category pages, such as the one you mention to behave correctly, so let’s do this the other way and specifically target single post pages. Replace what I have given you with this.

    .single .entry-content { 
    .single .en-lang {



    You nailed it!

    Thank you so much for for help and patience


    Hooray and you are welcome!

The topic ‘Set up an "English version" button on my posts’ is closed to new replies.