How to find the text, tag or block of code that you need to edit.
If you are customising a pre-built website template, deploying a Blog, Content Management System (CMS) or setting up and Ecommerce Website, one of the commonest tasks is to edit small blocks of HTML or other code. This is normally done by editing a copy of the website on your local hard drive or network, and then uploading the amended file to your production or test website using FTP (File Transfer Protocol.)
If you’ve hand-coded the site from scratch yourself, then you need not read on, as you’ll know where each line of code resides, however, if you’re modifying WordPress, Joomla!, OSCommerce, Prestashop or any other of the hundreds of pre-built, Open Source web applications, then it’s not so easy.
The first thing you’ll need is a good text editor. I personally use EditPlus 2 which is quite a dated piece of software now, but having used it for over 10 years, I find it hard to switch to something else. Occasionally, EditPlus can’t do the task I need it for, so I’ll temporarily fire up another editor, but I always come back to EditPlus 2. If I was going to recommend a text editor for dealing with HTML, Javascript etc I would point you in the direction of UltraEdit or PSPad, both of which have a better feature-set than EditPlus 2.
OK, on to some real world examples – I will demonstrate using a selection of common tasks and Open Source packages, using EditPlus 2 screenshots to illustrate the procedures.
Example 1. Removing the “Powered by Joomla!” text which appears in the footer of many Joomla! templates.
This is a very common request on the Joomla! forums – many web designers want their site to look totally bespoke, and it is very simple to achieve.
To accomplish this task, we use the “find in files” feature of EditPlus 2 (this is a feature available in all good text editors.)
Find in Files - Editplus
“Find in Files” does what it says on the tin – you enter a piece of text (in this case “powered by Joomla!” – without quotation marks) and then tell the editor where your Joomla! templates are. The editor will then read through all of the contents of the files in the template folder and will show you where, and in which files, the text occurs. You can then edit the appropriate file and remove or amend the text as you wish.
In the “find in files” dialogue box, type the string of text you wish to find – in this case I have entered “powered by” (without the quotation marks) – if I had entered “powered by Joomla!” the search would not have found the piece of text I am looking for. If your search does not yield the desired results, try changing the string of text you are searching for, as it is common for parts of the strings of text you see on the final webpage to be generated programatically. Also, if I had searched for just the word “Joomla!” (without quotes) I would have been overwhelmed by hundreds of results, so a bit of trial and error with the text string you search for may be required.
Find in files - set options
The filetype is set to *.* – the asterisk (*) is used here to represent “anything and everything” in a filename, so *.* will look into every single file in the specified directory. If you wanted to look at just text files (which have the file extension .txt) you would set this to be *.txt – if you wanted to search just in files beginning with the letter t and with the file extension .php you would set this to t*.php and so on.
Set the folder to where your template files are located (this is the folder on your hard disk – these operations can’t be carried out on your web server) and make sure that the “include subfolders” checkbox is ticked – this will look at the files in the templates folder, and all of the sub-folders contained therein.
Select the template folder
Now click the “find” button – a pane will appear at the bottom of the window, which will display a list of the files which contain the string of text you’re searching for, along with the location of the file, the line-number in the file where the text appears and a preview of the actual line as it appears in the file.
EditPlus - the results pane
In our example, the string of text appears in 2 places – this is because there are 2 templates installed – Beez and rhuk_milkyway, and the “powered by Joomla!” appears in the footer of both templates. Assuming that rhuk_milkyway is the template that we want to edit, we can simply double-click on the appropriate line in the new pane (shown highlighted in the screenshot) and that file will be opened at the appropriate place – I have done this in the example screenshot, and you can see the text string we are interested in at line 159 in the main pane.
The file displayed in EditPlus
Now you can simply edit, remove or comment-out the text, save the file and upload the new version of your file to your webserver.
This is the simplest way to use the “find in files” function. Next I will show some more advanced, though equally simple examples to help you in your day-to-day web development.
Finding a string of text which doesn’t seem to be in the files on your hard disk.
This sounds a bit strange, but most of today’s Content Management Systems, Blogs, Ecommerce Sites etc are built using a combination of HTML (the codes used to display webpages in a browser window,) CSS (the code which formats the HTML & makes it look nice,) a programming language – eg PHP or ASP (these are programming languages which generate the actual HTML which you see in your browser) and a database (usually MySQL) which stores the words, stories, product descriptions etc.
When you click a link to a CMS/Blog page etc, the HTML code that is shown as a web page in your browser is generated “on the fly” – in other words, the program (written in PHP or ASP) requests data from the database, combines this with the information in your templates and then generates a HTML page, which is then sent to your web browser for display.
Because of this process, the string of text which you can see in your browser, and which you want to edit or delete, may be stored in the database and thus searching with “find in files” will not work – what you need to do is find the piece of code, in either the template or the program file, which has generated the HTML containing the string of text which you are interested in.
To get to grips with this situation requires a bit of creativity. Instead of searching for the string of text itself, we search for something contained in the template or program file, which is near to the piece of text that we want to change. A common thing that I use as a marker is a CSS Style. Chosen carefully, this will lead you to the part of a template or program which displays the part of the webpage that you are interested in.
A powerful feature of web browsers is the “show page source” option which appears when you right-click on a webpage (you must right-click on the page, not on an image or other content.) This shows the HTML “Source Code” for the page you are viewing. When you view the Source Code, you will see any text strings in which you are interested (as this HTML is the result of the information from the database and template files being combined.
By viewing a HTML page’s Source Code, you will get clues as to which template or program files you should be editing, as shown below.
