HTML code of a page

Question

i have a question about this page: https://www.webovo.nl/blog/. When i inspect something on the website, i get to see a lot of html and css code. I understand i can find the css in the style.css file, but i don't know where i can find (and edit) the html code i'm seeing. Where (and how) can i see the source of the html code i'm seeing?

For example, i wanted to change the default text that u can see in the search field (which is: zoeken ..). I can't find that piece of code anywhere.

I'm using Onepress theme.

Can someone help me? Thanks

Answer 1

The search field in the Onepress theme is added in file template-parts/content-none.php (line 23 and 28) by this code:

<?php get_search_form(); ?>

This refers back to wp-includes/general-template.php where the search form is either included from the template, if a "searchform.php" exists, or it is built like this (line 192):

<input type="search" class="search-field" placeholder="' . esc_attr_x( 'Search &hellip;', 'placeholder' ) . '" value="' . get_search_query() . '" name="s" />

Your placeholder text "Zoeken ..." is inserted here:

esc_attr_x( 'Search …', 'placeholder' )

Then again the text "Zoeken ..." is pulled from a translation file that you have in your Wordpress installation. Changing these files is a bit "dangerous" in the sense that they might be overwritten by future updates.

That said, there is an easy way to get a custom search with custom text: Create your own searchform.php. You can, for example, just take the file from the twentyeleven theme: searchform.php. Copy this file into your Onepress theme folder, change the placeholder attribute and you are done.

<input type="text" class="field" name="s" id="s" placeholder="Whatever" />

Answer 2

It depends on what browser you are using. However, for Chrome upon right clicking and inspecting an element there will be a Styles and a Computed tab which shows the CSS for the element. On the Styles tab you can see where the style has been inherited from.

For the search bar you can see that the style was inherited from style.css on line 80.

Answer 3

If this is your site, it's this section.

However, I cannot suggest you where to look inside the HTML files, since I cannot view the structure of the files :).

Please review this for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder