This is another general WordPress question that I see quite often: how can I create a menu item that displays a page of posts belonging to a particular category? For example, let’s say I have a site about animals, and I’ve created a category called Dogs and a category called Cats, and by clicking on a menu item labeled Dogs, I want to display a list of posts that have the Dogs category assigned to it.
Continue readingAdding Google Analytics to Your Site
Adding Google Analytics to your site is very easy. You first need to get your scripting code from Google Analytics. Your tracking code is going to look something like this:
Continue readingUsing jQuery to Change Images
This post is an example of how to change an image “in place” when the mouse is hovered over different areas.
Continue readingFixed Borders
Had a question about how to recreate the fixed borders as seen on this page. It’s not too difficult, all you need to do is first fix the header at the top (and add some Javascript if you want to scale down the menu after the user scrolls down the page), and then add three other empty <div>s to form the left, right, and bottom borders, making them fixed as well. You can either add the empty <div>s using a simple text widget, or add them to one of your main templates.
Continue readingImage Magnifying Glass
Wanted to try out the example code from here.
When you move the mouse over this image, the cursor will turn into a magnifying glass and enlarge the section of the image underneath:
Setting the Mouse Cursor
There are a number of standard cursors that are used depending upon where on the web page the mouse is located. The default cursor is the arrow, but if held over a hyperlink, the cursor usually turns into a pointing hand.
The cursor property allows you to use CSS to change the cursor image when the mouse is moved over a particular element. For example, if you hover your mouse over the block below, you’ll see that the cursor changes into a pizza slice:
Move the mouse over this box.
The CSS to change the cursor to an image looks like this:
.pizza {
cursor: url(/wp-content/uploads/2020/03/42559-e1565325592349.png),auto;
}The DIV with the red borders was assigned a class of pizza, so the rule comes into play when the mouse moves over it. You want to make sure that the image you’re using has dimensions of 32×32 to insure compatibility across all browsers.
If you want to make the image the default cursor for the page instead of just a certain element, then try using the body element as a selector:
body {
cursor: url(/wp-content/uploads/2020/03/42559-e1565325592349.png),auto;
}As an example, pick Whole Page from the options below to see how the cursor will change to a pizza slice for the whole page:
If you do change the default cursor for the entire page, then you may want to use an altered image for hyperlinks so your users know if they are positioned over one.
Vertical Marquee using jQuery
This is from the page How to Have the Marquee Effect without Using the Marquee Tag (with CSS, JavaScript and jQuery).
Message 1
Message 2
Message 3
Message 4
Message 5
YouTube Posts
This is a YouTube block:
William Coulter - Gilles Chabenat - Crested Hens
This is an embed block:
William Coulter - Gilles Chabenat - Crested Hens
Substituting Line Breaks
Based on this question in WordPress support forums. There is a post that contains one big paragraph using line breaks to separate the lines. See if Javascript can be used to change the line breaks to paragraph end and begin tags.
This is paragraph 1.
This is paragraph 2.
This is paragraph 3.
This is paragraph 4.
Hotlinked Image
Let’s see if vhbt.org will allow hot linking.
