0

Hello I want to know how to edit wordpress html and add custom html for example I want to add html element like icon beside a link. here is the code:

wordpress original source code:

<a rel="nofollow" class="comment-reply-link"> Reply </a>

I want to edit this wordpress html code to add this icon to be:

<a rel="nofollow" class="comment-reply-link">
<i class="material-icons"> Reply </i>
</a>

UPDATE: another example to be clear: I want to add custom id to the link which is wordpress blog comment element source code not a theme source code. please, how to do that? and many thanks in advance

1
  • Note that you cannot and should not directly edit the source of WP core, any answer will be as a plugin or theme, either as a template or a filter/hook that replaces or changes the original markup. Additionally, there is no PHP code in your question, so we have no context for your question – Tom J Nowell Sep 25 '20 at 16:07
1

That HTML is generated in the get_comment_reply_link function:

https://github.com/WordPress/WordPress/blob/0418dad234c13a88e06f5e50c83bcebaaf5ab211/wp-includes/comment-template.php#L1654

Which gives us what's needed. Here are 3 options:

  1. The function takes an arguments array, and reply_text is one of the options, so just set this value to what you wanted e.g. 'reply_text' => '<i class="material-icons"> Reply </i>'
  2. There's a filter at the end of the function that gives you the opportunity to modify the entire links HTML named comment_reply_link, look up the docs for that filter for details
  3. You don't need to modify the HTML markup at all, this can be done with CSS

Changing the call to get_comment_reply_link will require changes to your theme, possibly the creation of a comments template. You will need to adjust wp_list_comments to take a callback argument with a function to display the comment, allowing you to change its HTML

Using the filter can be done in a themes functions.php or in a plugin.

Using CSS will require you to enquire with the material design library you've chosen.

3
  • thanks so much for your detailed and helpful reply. I really do appreciate. just want answer to my other question which is how to to add custom id to the link <a rel="nofollow" class="comment-reply-link"> for example I want to add id="custom-link" and many thanks in advance. – social Sep 25 '20 at 16:51
  • 1
    I'd be wary of doing that, id's need too be unique and you're going to have one of these reply links on every comment so you'll get invalid HTML. But perhaps you're adding an ID on the end so they're unique, if so, the callback parameter can render a comment HTML as you want it but you'll have to write it from scratch. You can also use the filter – Tom J Nowell Sep 25 '20 at 17:31
  • thanks a million for your helpful reply – social Sep 25 '20 at 22:11
0

TL:DR;

Quick answer would be that you can't add text to a custom icon library html tag. Here is how it should be formatted.

Based on the documentation from Material Icons, you would need to have something like this :

<a rel="nofollow" class="comment-reply-link">
<span class="material-icons">reply</span> Reply 
</a>

Documentation : http://google.github.io/material-design-icons/#using-the-icons-in-html

Long answer

You can use custom icon library like Material Icons or Font Awesome.

Let's assume you want to use Font Awesome.

Go to https://fontawesome.com/start to start creating a self-hosted icon kit. You might need to create a free account before creating the kit.

Start a New Project with a Kit

Just give the name of your project and click on Create & Use This Kit.

Once you have create your kit, you will have a kit link that looks like this :

<script src="https://kit.fontawesome.com/XXXXXXXXX.js" crossorigin="anonymous"></script>

Copy this code and head over your header.php file in your WordPress project.

Once you are in, go in the <head> section and paste your code into it.

<!doctype html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="profile" href="https://gmpg.org/xfn/11" />
    <?php wp_head(); ?>

    <script src="https://kit.fontawesome.com/XXXXXXXXX.js" crossorigin="anonymous"></script>

</head>

<body>
  ...

Note : It is recommended to use wp_enqueue_script() function. You can find the documentation on the WordPress Codex : https://developer.wordpress.org/reference/functions/wp_enqueue_script/

You can save your file and now go into your template file where you want to edit your HTML.

You can browse the Font Awesome Free icons and find an icon that fits your need : https://fontawesome.com/icons?d=gallery&m=free

Once you have your icon, simply copy-paste the html tag into your WordPress template file.

fas fa-reply

<a rel="nofollow" class="comment-reply-link">
<i class="fas fa-reply fa-flip-horizontal"></i> Reply
</a>

When reloading your page, you will be able to see the icon.

4
  • thanks. but I am not asking to edit a theme file. I am asking to edit the wordpress blog source code not a theme source code. the code on my example not from a theme but from the wordpress blog comment source code which I want to edit it and add the icon. not from the theme – social Sep 25 '20 at 16:02
  • You speak of a WordPress hosted on WordPress.com ? – Patrice Poliquin Sep 25 '20 at 16:03
  • I am speaking about wordpress.org – social Sep 25 '20 at 16:04
  • Since it is a free website, I am not sure you can edit the theme files. Sorry the question was not clear enough. Tom J Nowell♦ gave more details about it. – Patrice Poliquin Sep 25 '20 at 16:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.