Bookmarks in WordPress

Creating Bookmarks in WordPress used to be a bit complicated, but now I have found a plug-in that allows me to add them with ease.  The plug-in is called CKEditor for WordPress.  When activated it changes the dashboard kitchen and adds the ability to do several things including tables and bookmarks (or anchors as the plug-in calls them.)

Once you have installed the plug-in and activate it the kitchen of the post/page editor will look like this:

Once you have your text in where you want to have the link to the bookmark (anchor) and your text in for the bookmark (anchor) itself you are ready to use the icon in the kitchen to create it.

First you must create the bookmark.  To do this highlight the text you want for the bookmark (anchor).  Then in the kitchen you will click on the flag, shown here at the very end of the second row.

A window will open asking you what you want to name the anchor (bookmark).  I would suggest keeping it simple with no spaces.  When finished click OK.

Go to the text that you would like to link to the bookmark (anchor).  Highlight the text then click the chainlink over the world in the kitchen.  In this image it is the third from last icon in the second row.  

The window that opens requires you to determine two things.  The first is that you must choose is the link type "Link to anchor in the text" and the second is to select an anchor by Anchor Name.  Once you have done this you will be able to click ok and be done.

The more complicated way is to use HTML code and is shown below:

The first step is

to create an html file that has the link to the bookmark as well as the bookmark
itself that you want at the tip of your page or post.

Example Link to Example Bookmark

Once you have your example link, then put in the text below and create the
place that you want to bookmark the link to.

A graphical despiction of a very simple html d...

Example Bookmark

Once you have your text in place you must first make a bookmark where you
would like it to be using your dreamweaver directions.  Then go back and
make a link out of the text at the top of the page (or wherever you have it)
that takes you to the bookmark.

The next step is to copy the html code from your html file and paste it into
the html code section of your page or post in WordPress.  Once there you
will have to adjust the link code as follows:

  • Where the code says — <a href="#Example_Bookmark"> (which will be your
    link bookmark title)
  • You will need to change this to say — <a href="http://www.yourdomain.com/yourpagelink/#Example_Bookmark">
    • In the case of this page I change this to say <a href="http://dehaan-lovaas.info/testing-area/bookmarks-in-wordpress/#Example_Bookmark">
  • Then save the file.

Once this is done the bookmark should work correctly.

Enhanced by Zemanta