I just learned about adding chemical graphics in wordpress using the QuickLaTeX plugin and the chemfig package (links: QuickLaTeX, chemfig and chemfig).
Here is my first attempt, starting with something simple: molecular hydrogen.
This code gives:
And now for a double bond: molecular oxygen.
Putting these together we get water.
However a water molecule actually has an angle of about 104.5 degrees. The angle below is raised 75.5 degrees because it would normally be 180 degrees between the hydrogens, 
.
![\begin{verbatim} \chemfig{H-O-[:+75.5]H} \end{verbatim}](https://hawaiireedlab.com/wpress/wp-content/ql-cache/quicklatex.com-795c21c1ec128098ab8804335fad1425_l3.png "Rendered by QuickLaTeX.com")
![\chemfig{H-O-[:+75.5]H}](https://hawaiireedlab.com/wpress/wp-content/ql-cache/quicklatex.com-b91add6a2ca4b974da0008ad4f351e84_l3.png "Rendered by QuickLaTeX.com")
The oxygen has a higher affinity for electrons (is highly electronegative) and develops a negative charge while the electrons pulled away from the hydrogen give them positive charges from the proton nucleus.
![\begin{verbatim} \chemfig{H^+-O^{-}-[:+75.5]H^+} \end{verbatim}](https://hawaiireedlab.com/wpress/wp-content/ql-cache/quicklatex.com-6290413fd56a565140ba72884ef995fd_l3.png "Rendered by QuickLaTeX.com")
![\chemfig{H^+-O^{-}-[:+75.5]H^+}](https://hawaiireedlab.com/wpress/wp-content/ql-cache/quicklatex.com-c99874556af3e4417f54e9029f254f93_l3.png "Rendered by QuickLaTeX.com")
These charges result in hydrogen bonds between water molecules, which allows water to be a solid and a liquid at higher temperatures than is usual for a molecule of its size. This also is responsible for the expansion of ice compared to the liquid form (the molecules take up more space to arrange themselves with optimal hydrogen bonding).
![\begin{verbatim} \chemfig{H^+-O^{-}-[:+75.5]H^+-[::+0,,,,dash pattern=on 2pt off 2pt]O^{-}(-[:+104.5]H^+)-H^+} \end{verbatim}](https://hawaiireedlab.com/wpress/wp-content/ql-cache/quicklatex.com-b1dbc55bf74ecd137c9d0b42d28b5bec_l3.png "Rendered by QuickLaTeX.com")
![\chemfig{H^+-O^{-}-[:+75.5]H^+-[::+0,,,,dash pattern=on 2pt off 2pt]O^{-}(-[:+104.5]H^+)-H^+}](https://hawaiireedlab.com/wpress/wp-content/ql-cache/quicklatex.com-0d6474b73c6dfb50cdcfeb360a129a9a_l3.png "Rendered by QuickLaTeX.com")
And here is an actual reaction (the bond angles in the water come from 
:
![\begin{verbatim} \chemname{\chemfig{O=O}}{Oxygen} \chemsign{+} 2 \chemname{\chemfig{H-H}}{Hydrogen} \chemrel{->} 2 \chemname{\chemfig{H^+-[:-37.75]O^{-}-[:+37.75]H^+}}{Water} \end{verbatim}](https://hawaiireedlab.com/wpress/wp-content/ql-cache/quicklatex.com-814d1d7ef06286f1a1ab2eb8ab76810e_l3.png "Rendered by QuickLaTeX.com")
![\chemname{\chemfig{O=O}}{Oxygen} \chemsign{+} 2 \chemname{\chemfig{H-H}}{Hydrogen} \chemrel{->} 2 \chemname{\chemfig{H^+-[:-37.75]O^{-}-[:+37.75]H^+}}{Water}](https://hawaiireedlab.com/wpress/wp-content/ql-cache/quicklatex.com-1a31e6d1d91c99772de53a85b7b294fd_l3.png "Rendered by QuickLaTeX.com")
Switching gears with carbon, here is methane.
![\begin{verbatim} \chemfig{C(-[:0]H)(-[:90]H)(-[:180]H)(-[:270]H)} \end{verbatim}](https://hawaiireedlab.com/wpress/wp-content/ql-cache/quicklatex.com-bd3029b0249b7dfd3f5806894cc03cd2_l3.png "Rendered by QuickLaTeX.com")
![\chemfig{C(-[:0]H)(-[:90]H)(-[:180]H)(-[:270]H)}](https://hawaiireedlab.com/wpress/wp-content/ql-cache/quicklatex.com-8f0d98d25779add44e95b35e16b58562_l3.png "Rendered by QuickLaTeX.com")
Actually methane is organized into a tetrahedron with approximately 109.5 degree angles between the hydrogen atoms (
, 
, 
). Projecting above and below the plane of the image can be indicated with Cram-style bonds.
![\begin{verbatim} \chemfig{C(-[:90]H)(<:[:-9.75]H)(<[:-29.25]H)(-[:199.5]H)} \end{verbatim}](https://hawaiireedlab.com/wpress/wp-content/ql-cache/quicklatex.com-497a67c603a2390b4851e0770dba06bb_l3.png "Rendered by QuickLaTeX.com")
![\chemfig{C(-[:90]H)(<:[:-9.75]H)(<[:-29.25]H)(-[:199.5]H)}](https://hawaiireedlab.com/wpress/wp-content/ql-cache/quicklatex.com-c6573ba7b47be31302f1428d735cc8b7_l3.png "Rendered by QuickLaTeX.com")
Now for cyclic hydrocarbons! Benzene is:
And as is typically done for hydrocarbons, we can leave out the hydrogen atoms and just show the carbon backbone:
Finally, the delocalized pi-bonds can be illustrated as a ring which better reflects the aromatic p molecular orbitals (these give benzene and similar aromatic hydrocarbons enhanced molecular stability):
Glucose! (the most common form at least) I actually had help on this one; I started to put it together than found it already assembled in Section 11.3.4 P. 37 of the ChemFig Documentation. I just modified it slightly:
![\begin{verbatim} \setcrambond{2pt}{}{} \chemname{\chemfig{HO-[2,0.5,2]?<[7,0.7](-[2,0.5]OH)-[,,,, line width=4pt](-[6,0.5]OH)>[1,0.7](-[6,0.5]OH)-[3,0.7]O-[4]?(-[2,0.3]-[3,0.5]OH)}}{$\alpha$-D-Glucopyranose} \end{verbatim}](https://hawaiireedlab.com/wpress/wp-content/ql-cache/quicklatex.com-9fad4143ce64c550d06caf7a7ff536e7_l3.png "Rendered by QuickLaTeX.com")
![\setcrambond{2pt}{}{} \chemname{\chemfig{HO-[2,0.5,2]?<[7,0.7](-[2,0.5]OH)-[,,,, line width=4pt](-[6,0.5]OH)>[1,0.7](-[6,0.5]OH)-[3,0.7]O-[4]?(-[2,0.3]-[3,0.5]OH)}}{$\alpha$-D-Glucopyranose}](https://hawaiireedlab.com/wpress/wp-content/ql-cache/quicklatex.com-e060a85b20d841d498b22efb1a74105e_l3.png "Rendered by QuickLaTeX.com")
Finally, let me have a shot (double entendre) at putting together caffeine. First the hydrocarbon shorthand:
Then the full version with all the atoms labeled:
![\begin{verbatim} \chemname{\chemfig{*6(C-N(-C(<:[:-9.75]H)(<[:-29.25]H)(-[:199.5]H))-C(=O)-N (-C(<:[:+129.75]H)(<[:100]H)(-[:-40.5]H))-C(=O)-C(*5(-N(-C(<:[:+180]H) (<[:+170]H)(-[:-307.5]H))-C(-H)=N-C=C)))}}{Caffeine} \end{verbatim}](https://hawaiireedlab.com/wpress/wp-content/ql-cache/quicklatex.com-245af7b42f9a5539f4226e37d9edc917_l3.png "Rendered by QuickLaTeX.com")
![\chemname{\chemfig{*6(C-N(-C(<:[:-9.75]H)(<[:-29.25]H)(-[:199.5]H))-C(=O)-N(-C(<:[:+129.75]H)(<[:100]H)(-[:-40.5]H))-C(=O)-C(*5(-N(-C(<:[:+180]H)(<[:+170]H)(-[:-307.5]H))-C(-H)=N-C=C)))}}{Caffeine}](https://hawaiireedlab.com/wpress/wp-content/ql-cache/quicklatex.com-11bfed4cfad666d88537d3490df7fb87_l3.png "Rendered by QuickLaTeX.com")