Adding Social Media Icons to a Web Page [Part 2]
After I figured out how to write the CSS code to create the space on the page in which to place the icons, the next step was to modify the HTML code in the header.php file. This file contains the language that describes what goes in the header of the website.
Below you can see an outline of the code. The header refers to ID="masthead". hgroup names the group and h2 class="socialmedia" refers to the CSS code that I wrote in Part 1 of this series. You can see from the picture below, by hovering my cursor over the h2 class="socialmedia" line it highlights the box that I created which contains the social media icons, the subscribe button and our phone number. This indicates that the code which causes these items to display is located in that section.
The red arrow in the image above points to a triangle to the left of h2 class=”social media". Clicking the triangle expands the code in this section. Please don’t be intimidated. It looks like a bunch of gobbledy gook but it is all easily deciphered if you know what you are looking at.
I expanded a couple lines of the code (indicated by the upside-down gray triangles) so you can see exactly what is written there. I’ll break it down.
[Please note that I am leaving out the “” and “>” symbols. These begin and end each command. I leave them out because they will cause the code to run in this article causing it to not appear correctly.]
h2 class=”socialmedia” refers to the CSS code in the above image. It dictates where on the page to place what follows.
a href="..." refers to a hyperlink and to where someone will go once they click on it. The web address is in blue font
target=”blank” indicates that a new window will open when they click it.
img src="..." names where in the www the picture is, in this case the LinkedIn icon; the physical location of the image is in blue font
width and height describe the size of the icon, to keep them all uniform.
/a means the end of the section.
The 4 lines that follow are all the same except for the pictures and their hyperlinks. As you saw, they are all on the same line because I didn’t write in anything to indicate that a new line on the site should begin. Thus, all of the icons are lined up horizontally. After the fifth a href line, there is a line break indicated by br>. It is actually coded as br /> which says to begin a new line.
This is followed by another clickable button for our email signup form.
br / begins a new line where our phone number is located.
span describes formatting
style allows you to modify the font-size and the font-family
/span notes the end of the formatting
b says to make the text bold and it ends with /b
If I didn’t use any formatting, the phone number would have appeared in the font class that the CSS file dictates for the whole site. Instead, I toyed with with bold and font size so that it was pretty much lined up with the icons above it.
/h2 closed out the section.
If I didn’t use span (formatting), the phone number would have appeared in the font class that the CSS file dictates for the whole site. Instead, I toyed with with bold and font size so that it was pretty much lined up with the icons above it.
I know for beginners that seems like a lot to do and can be stressful. I learned a lot of this by tinkering with my AR blog by clicking the button to reveal the source code. In there I spent some time learning what the different functions do, such as a href, span and style.
Next, I will talk about creating a child theme and its importance to increasing simplicity and helping to NOT screw up the site leaving us to start from scratch.
Comments(3)