CSS hyperlinking

  • kerin2014 · Member ·

    The “meta”-generated markup for my latest post which uses the Fontolio theme is as follows:

    <article class="post-4997 post type-post status-publish format-standard has-post-thumbnail sticky hentry category-general tag-needlepoint-land-the-store first" id="post-4997">
	<header class="entry-header">
		<h1 class="entry-title"><a rel="bookmark" href="http://needlepointland.com/2015/02/05/hyperion/">Hyperion</a></h1>
						<div class="entry-meta">
					</div><!-- .entry-meta -->
			</header> ...	</article>

    What I want to do is enable the use to click on the title of this post (this is the first post a user sees, and I have pinned it to the Home Page) and be hyper-linked to a post in another blog.

    Specifically I want to automatically take the user here

    To accomplish this, I tried 2 approaches

    first I included this HTML code in my post

    <header class="entry-header">
<h1 class="entry-title"><a href="http://wp.me/s4YLfr-hyperion" rel="bookmark">Hyperion</a></h1>
</header>

    this resulted in having two titles in the post page

    then I tried this CSS

    .post-4997 .entry-title h1 {

url('http://wp.me/s4YLfr-hyperion')

}

    which of course did nothing

    Then I tried to figure out houw I could use a:hover etc CSS but could not come up with a solution.

    I realize that the purpose of CSS is to change the appearance of content, while it is HTML’s job to specify behavior, such as hyper-linking

    however, absent JS (which would allow this), is possible to use some guru level trick to game WP’s CSS editor into somehow producing tag type behavior in my theme’s HTML “meta” code to which I do not have access?

    The blog I need help with is: (visible only to logged in users)

  • jsmutek · Member ·

    Short answer:

    Sorry, that’s not possible, but you can look into using the link post format, which your theme supports.

    Long answer:

    The markup you are seeing when you view source is generated by page templates that we do not have access to. The markup on the blog page is generated by one template, probably index.php, and the markup you see when you click on the post is generated by another template, probably single.php

    WordPress uses functions, specifically the_title() for the page title, the_permalink() for the page link, the_content() for the content, and all sorts of other cool stuff to build the pages that are rendered by your browser.

    So, a simple WordPress post or page template might look like this –

    the_title() – title of your post, as entered into the post editor

    the_content() – content of your post, as entered into the post editor.

    The index, or your blog home page would look like this –

    {start the loop}

    the_title() (wrapped in the_permalink(), to link to individual posts )
    the_featured_image()
    the_excerpt()

    {are there more posts? if so start at the top}
    {if not, end the loop and go on with other stuff}

    So, based on that you can see that the markup you added is being rendered along with the_content(), which is why you are seeing what appears to be two titles. It’s really not two titles though, it’s the real title of your post, along with the HTML markup you added to the post.

    That’s a really simple example, but if you want to dig in a little more check out this Codex entry on the .org website – http://codex.wordpress.org/Stepping_Into_Templates

    WordPress will not render HTML entered into the title box,in the post editor, and it’s not possible to swap the links out via CSS either.

    One upside is that your theme supports post formats, specifically the link post format, I’d suggest trying that and seeing if it’s formatted in a way that suits your needs. You can read more about post formats here – http://en.support.wordpress.com/posts/post-formats/

    Hope this helps!

  • kerin2014 · Member ·

    @jsmutek

    thank you for your excellent explanation of the WP template-driven env. i will study this further, per the tutorial links you provided, as i have much to learn.

    re Linked Posts – i did make that change.. and… ?
    unless I am missing something, what these do is supply nothing more that a technically trivial appearance difference between posts types

    there is no associated functionality to go with the stylistic differences, which amount to nothing more (again, unless I am missing something) than background changes, or partially opaque image overlays

    so in the case where I want my post’s bookmark title or thumbnail image to link to an external page or post as opposed to it’s associated post, Linked Posts does not provide any functionality to help me in that regard

    I was trying to make CSS dance through some hoops to achieve this, like the tricks one can use to make background images clickable. But in this case, the href does not have a link ID. so i’m dead in the water trying to do anything fancy with respect to hyperlinking via CSS.

    Had WP anticipated this need, they might have insisted on having theme designers include the CSS3 global attribute ID in their tags, & i might have been been able to come up with some workaround

    alternatively they could have allowed a more sophisticated way for users to add custom HTML code at the meta level — but that is another discussion, involving the WP mantra of having everyone run off the same underlying codebase

    as it stands, it looks like I would have to make do with the widget in the sidebar approach — which is far from satisfactory, being one level below the HP, and which may then cause me to migrate away from WP once I have my eCommerce environment set up

    yes I realize that WP can be semi-integrated with a couple of eCommerce solutions and allows for storefront embeds with these, but I can’t see the sense of paying $300 annually for that

  • jsmutek · Member ·

    Hey, no problem at all. I’m happy to help, or at least to try my best to do so. :)

    unless I am missing something, what these do is supply nothing more that a technically trivial appearance difference between posts types

    The core of post formats is in allowing for different formatting for different types of posts. It’s definitely a presentational item, but whether or not it’s useful to you depends on how the theme author has written the functionality into their theme.

    A theme author can output different markup for various post formats.

    For example, where a typical post, on a blog index page might be the title, excerpt, permalink and featured image (correction, the_post_thumbnail(), I think I wrote the_featured_image() earlier) – it would be completely possible instead to output the title wrapped in an anchor tag linked to another site, for link posts.

    What I mean to say that it is possible to do exactly what you are trying to do with a post format, but it depends on how the theme author wrote the functionality.

    If you were self hosted you could write this functionality yourself, or hire someone to do it. Inability to access template files is one of the limitations of hosting your blog on wordpress.com, but it’s also one of its strengths. This inability to customize certain aspects standardizes the code base, making it secure and stable.

    I keep a self hosted site and work in the self hosted space, but I also keep a wordpress.com site for my personal blog.

    Anyway, you seem to be a really inquisitive person, willing to explore and learn. You should check out this lynda.com course on building WordPress themes. Lynda is a paid service, but this entire course seems to be offered for free. It’s well worth the time if you’re interested.

    All the best!

  • kerin2014 · Member ·

    jsmutek

    again, many many thx! i checked out the codex / template stuff, which i find fascinating. i am even thinking now of writing my own theme as i have design and functionality ideas that i would like to implement. i am primarily a UIX sort of person, but can get into xml if necessary. in that regard, i will put up a separate thread on that topic.also many thx for the course info — there are some free resources on wp theme building on the net,but will see if this course is affordable and offer a deeper look. i will check out your other site, and also see if the Fontolio can do what you suggested:

    For example, where a typical post, on a blog index page might be the title, excerpt, permalink and featured image (correction, the_post_thumbnail(), I think I wrote the_featured_image() earlier) – it would be completely possible instead to output the title wrapped in an anchor tag linked to another site, for link posts.

    What I mean to say that it is possible to do exactly what you are trying to do with a post format, but it depends on how the theme author wrote the functionality.

    cheers!

  • kerin2014 · Member ·

    i tried for a few hours to use a ::before pseudo element combined with an attribute select (e.g a[rel=”bookmark”] { … do something…} combined with trying to use the CSS content property (in the body of the CSS decl to replace the href string that points from this theme’s home page bookmark to an actual post.

    finally i realized why it would never work: it quite obvious when you think about it: an href and the the content property operate at different level of abstraction. one operates at the markup level that is to say (speaking very generally) at the code level that tells the machine to execute a link to a doc somewhere, whereas the content property is concerned with replacing or creating new screen output, that is to say with replacing textual content, but is not concerned with changing the actual code that constitutes the html associated with a WP page. there is no self modifying code ability here, as found in certain prog langs.

    That said, I was able to code a naive trick with the bookmark images, namely have a mouse hover cause a background image to replace the main image of the bookmark. pretty trivial, but i was trying to see if somehow I could find some way to hyperlink from the background image. There isn’t, using pure CSS. It is pretty easy with a few simple lines of JS to do this, but absent JS, no can do.

    I would suggest to WP that the allow a user to specify an image link from within the Edit Media page, this way any user could accomplish this without coding. So from a usability standpoint, if you click on the title, you go to the associated post, but if you click on the bookmark image, you link to somewhere else.

    Meanwhile here’s the hover trick. The needlepoint icon is something i created starting with an SVG icon from Noun Project. I played with it in Inkscape, and changed enough of what I started with for it IMHO to be a different icon.

    /*  featured img trick */

#post-5063 .entry-thumbnail {
	background: url('//needlepointlandstore.files.wordpress.com/2015/02/needlepoint-icon2.png') center;
	background-size: 80% 100%;
	background-repeat: no-repeat;
	background-attachment: local;
}

#post-5063 .entry-thumbnail img:hover {
	opacity: 0;
}
  • The topic ‘CSS hyperlinking’ is closed to new replies.