Style and place most recent post separately using jQuery (Squarespace)


Here’s a quick tip that will let you display the most recent post in a Squarespace journal in a different part of the page than the previous ones, as shown above.

This will also work for other blogging platforms, you’ll just need to find out what particular class the div containing each post has.

Step 1: Include jQuery

Reference jQuery in your header using code injection. You can probably use the Google-hosted one. Your header should contain something like this:

<code><script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</code>

Step 2: Include this code

Insert the following code into the header of the journal that you want to display in this way. In Squarespace this is done by clicking “Blog Settings” and then going to the “Advanced” tab.

<code><script type="text/javascript">
$(function() {
$('.hentry').not(':eq(0)').appendTo($('#secondaries'));
});
</script>    
</code>

What you’re doing here is appending all but the first element with class “hentry” to another element which has the id “secondaries”.

Step 3: Place the secondaries div

Make sure that you have a code block somewhere on your page which contains a div with the id “secondaries”:

<code><div id="secondaries"></div>
</code>

This is where the rest of your posts are going to show up.

Step 4. Style with CSS

If you want to style the posts in #secondaries differently, you can accomplish this in your Custom CSS along these lines:

<code>#secondaries h1 {color:#fff;}
#secondaries p {font-size:x-small;}
</code>

And so on.