A Random Pattern

Second test. WP plugin and Sidenotes work.

As you can see by my last test post, I do have the arc90 lab javascript code working. Now I just need to clean it up (it’s a mess!) There are several things I want it to do differently, but hopefully you’ll just notice the improvements and not all the work (frustration) going on behind the scenes. :D

I’ve just been looking through some buttonsnap and moresmilies php code, and it looks like it might take me a little longer than I hoped to make my first plugin. So for now I’m going to manually insert my sidenotes by hand-coding.

While I’m on the subject, I’ll list the other things I want to accomplish with this plugin. But first, I’d really love your feedback on whether these sidenotes are useful or distracting, and what could be done to improve them.

1. Change the colors. I want to tone them down quite a bit. The free colorpix tool will help tremendously here.
2. Make them behave more like the other hyperlinks on this page. That is, red text until you move the mouse near them, at which point the sidenote shows up.

3. Behind the scenes, I want to make it easier to create sidenotes. Instead of manually typing a bunch (ok, a little) code, I just want to click a button and type in the sidenote. Even better, I hope to have it handle urls (web addresses) and perhaps images gracefully. Cross your fingers.

4. Finally, I’d like to clean it all up into one or two nice little plugins, then yank it out of my code and use it properly as a plugin. This is probably me dreaming, because I doubt I really have the know-how to finish this. Hey, if anyone wants to mentor, answer questions, or even just help out a little….

Last thing on WP plugins. Here are a few of the articles that helped me get started.

Good recommendations on software tools to use

How to write a simple WordPress plugin

Tons of useful WP articles. Tips, tricks, you name it she’s got it.

The codex (official WP documentation) on plugins. It’s all greek to me. :p

4 Responses to “Second test. WP plugin and Sidenotes work.”

  1. Lorelle Says:

    >>>You Name it she’s got itclass=”sidebox” and click that while writing a post and then fill in the blanks in the DIV with your content. Include the look of the sidebox in your stylesheet and it’s done. That’s what I do.

    If I want, say, a red background sidebox, I’d simply create a style for “red background” and then in the DIV for the sidebox, put in class="sidebox red" and it’s done. For blue, class="sidebox blue".

    I’ve been using these for years at my main site on photography and that’s what I do.

    So why the javascript?

  2. stephen.christopher Says:

    It looks like part of your comment got eaten, I don’t know why. I think I follow what you’re saying, though I’m not much of a coder. I’ve seen the same feedback elsewhere on the javascript, and the answer is “I don’t know”. :) I like the idea of easy footnotes (see daringfireball’s post), but I want them on the side. Basically I’m trying to have my cake and eat it too, but I don’t know enough about website coding yet to know how to best get what I want. Could you try to comment again with the full text of what you were saying, or email me at step AT ransomedhome dot com and let me know what’s wrong with my comment form?

  3. Lorelle Says:

    What got eatten? Oh, I see. Nothing is wrong with your comment form. The problem is with how WordPress filters code and it thought I put code in where I didn’t. Careless of me.

    What I was talking about was using a plugin for creating a sidenote, when you can do the same thing with HTML. If you don’t know HTML, then forget it. But all that is involved is putting the “note” in a paragraph or DIV with a class designating it so it looks different. For example:

    <div class="sidebox red">This is text inside of a red background colored box.</div>

    This would put the text in a red box. You control the look of the box with your stylesheet. So why use some plugin to do what is so easy to do in a post? That’s all I was saying. I do it constantly on my main site, and even offer up a bunch of “box looks” on my site. You can figure out how these are made by looking at the source code (VIEW > SOURCE CODE or VIEW > PAGE SOURCE in your browser), though it takes a bit of an understanding how HTML and CSS works to reproduce some of these.

    Anyway, I was just trying to understand why you want to use this feature, and why you want to make sidenotes, which is what you called them when I saw the original test page of this post.

    As for footnotes, a totally and completely different subject, I highly recommend the Footnotes WordPress Plugin which allows you to add footnotes simply and easily by putting double ((footnote information)) around the footnote and it automatically generates the footnote. As for putting them on the “side”, do you mean in the sidebar? That will be rather difficult as it is “outside of the WordPress Loop”. Your best bet is to have footnotes shown at the bottom of your post content area, as is traditional. Few will pay attention to a footnote in a sidebar, thinking it’s a blogroll link or something.

    A sidenote, as you were using them, is more like a pullquote or even a “post-it note” kinda look. Footnotes are citations and credits used in technical writing and blogs.

    Be sure and check out the many tutorials on web page design for WordPress on the WordPress Codex – WordPress Lessons that should also help.

    Good luck with whatever you decide. There is a lot to learn when it comes to messing with your own website.

  4. stephen.christopher Says:

    Yes, I took a look at your site. I like how you’ve done the pictures. The only thing is, I want a reference to the sidenote to show up in the main text – but perhaps this is un-necessary.

    I’ll check out the footnotes plugin. My main problem is I hate seeing footnotes on a webpage, because it’s so hard to jump down, read them, and jump back up. On the other hand, about 20-30% I can safely ignore (that is, I read them and immediately disregard because I realize I’m not interested). So my thinking was that if the footnotes were instead next to the paragraph, as your pictures are, it would be much easier to scan them and see if they’re of interest.

    Also, I do want a really easy way of inserting these footnotes or sidenotes, as I expect I will use them fairly often. Yes, it is more like a “post-it note” than a “real footnote” used for citations or credits. :)

    Basically I’ve got a lot to learn and explore with, and this is one area that caught my fascination. I think it might be good motivation for teaching me to create a plugin, at least. Of course, I am concerned about using javascript to do it, so maybe I’ll just end up going with footnotes. Thanks for helping refine my thinking on this!

    At least I now have a sandbox version of my website set up on my Ubuntu box, so I can try things out there without screwing up this public version of the site!

Leave a Reply