Tips and Code Snippets to Use in Custom Code Blocks

The most flexible block in your Headway arsenal is the custom code block. Whatever you can’t accomplish with the other core blocks (Navigation, Slider, Embed, Content, Breadcrumbs, Widget Area, Footer, Text an Header) you can accomplish with the custom code block. The part that trips up a lot of our newbies is the fact that this is a custom code block – it’s basically just a placeholder for you to dump your custom code, be it PHP, HTML, Javascript, etc.

The good news is that most of you don’t really need a full lesson in another computer language; most often you just want to be able to create some really simple HTML and perhaps use a little custom CSS to style it. Read on for some common code snippets and tips on how to style your content with custom CSS. This tutorial will give some examples for HTML and CSS, but we won’t go over PHP or Javascript/jQuery in this article, but I’ll also go over some resources you can turn to when you need to learn the basics of HTML, CSS, PHP or jQuery/Javascript.

Adding a Custom Code Block

Adding a custom code block to your layout is just like adding any other block; open up the Visual Editor, ensure you’re in Grid Mode, and then drag a box anywhere you have room. Choose Custom Code Block as the block type, and open up the block options. The only block open is the Content – click the edit pencil and drop in your custom code.

Note: The custom code block doesn’t have any syntax highlighting because it supports so many different languages. Syntax highlighting is a valuable tool, especially to the new developer, so consider creating your code in a program like Notepad++ (Windows) or Textmate (Mac) – both free. This will help tip you off to errors and save you a ton of frustration; then you can just copy/paste between your code editor and Headway!

HTML Code Snippets

Mix and match the following code snippets to create your custom content. You can read a basic primer on HTML Elements here, but the idea is that there are different bits of code called tags that represent something to web browsers. For example, an A tag represents that a link is being defined, and an IMG tag represents that an image is going to be embedded. Within these tags you define different attributes, such as the SRC attribute in an IMG tag, or the HREF attribute in the A tag.

Images

Most HTML has an opening tag and a closing tag, but images are an exception. An image tag is a self-closing tag. To insert an unlinked image:

<img src="http://yourdomain/path/to/your/image/imagefilename.jpg" title="This appears when you hover over the image" alt="This appears if the image cannot be loaded and is used for accessibility" />

The SRC parameter is where you put the URL to your image. This can be a relative URL or an absolute URL. I’m oversimplifying this, but for your purposes in general a relative URL will be the URL but excluding your domain – so, for example, /wp-content/uploads/2012/12/myimage.jpg vs. http://yourdomain.com/wp-content/uploads/2012/12/myimage.jpg. The former is useful if you’re developing a site on a test URL or if the URL may change later. The TITLE attribute defines the friendly title for the image, and the ALT attribute defines the alternative text if the image can’t be viewed.

Hyperlinks

You can surround nearly anything with a hyperlink, but it’s most often found that a hyperlink is added to an image, or text. To add a hyperlink to a piece of text, the syntax is very simple:

<a title="This text appears on hover" href="http://thisistheurltoopen.com" target="_blank">This is the text that appears linked. I defined the target as _blank, which means this will open in a new window.</a>

We open with an A tag and define the HREF attribute as the URL that we want to link out to. You can also replace the hyperlinked text in the middle of the element with an IMG element.

Paragraphs and Line Breaks

You may know this one already! Paragraphs are just blocks of text surrounded in a P tag, like below. You may also see folks sprinkling “line breaks” – BR tags – into their content. The difference here is mainly that on most sites/themes, your P tag will give you a “hard return” and the line break will give you the “soft return”. The former is more space between lines, the latter has no extra space.

<p>Sed nec arcu vel nibh ultricies tristique vitae vitae purus. Sed sollicitudin lacinia tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>

Lists

There are two types of lists as far as HTML is concerned; you’ve got ordered lists (numbered lists) and unordered lists (bulleted lists). The structure for either of these is incredibly simple:

<ul>
	<li>This is a list item</li>
	<li>This is another list item</li>
	<li>I could do this all day</li>
</ul>

Above is an unordered list, a UL element. You can also make this list numbered by swapping out the opening and closing UL tags for OL tags (stands for Ordered List, get it?) Lists typically have text as the list items, but list items can also be images. (You can go so far as to put other elements like paragraphs, page division elements (DIVS) and such, but you’ll get validation errors if you run your code through a validator – just a little FYI!)

Page Divisions a.k.a DIVs

Sometimes you need a little more control over the placement and style of an element or a group of elements, and that’s where our trusty friend the DIV comes in. A DIV is sort of your wildcard HTML element; you can add a DIV around a group of elements, give it a class, and then style the crap out of it in ways that you previously could only have dreamed about. :)

Creating a DIV isn’t hard at all (it’s learning the CSS to do exactly what you want that might trip you up!):

<div class="mySpecialDiv">This all happens inside this DIV. I can even add an image, a list, whatever the heck I want!</div>

Note that the class isn’t a required attribute, but it’s handy if you need to add styles to your DIV. The class can be anything you want – it’s smart to name classes semantically and use consistent capitalization such as all lowercase, or my favorite, camelCase. Remember: capitalization matters with classes!

Styling Your Custom Code

Design mode has a few limited options for styling within the custom code block – there aren’t any definite elements that we know will appear there – it’s all up to you! So often, the styling within a custom code block is up to you as well. Yes, this means custom CSS!

My favorite way to target a custom code block in general is to give the block a custom class. You can do this in the block options under the Config tab. It’s not required, but if you don’t have a lot of custom classes within your custom code block content, it’s harder to target just your custom code block.

CSS is an extensive language, but we love it for it’s simplicity. Once you know the basics, you can do a lot with just a few lines. Because it’s so broad, however, the easiest way to show you the options with CSS is to throw out a few examples, so let’s do just that!

You may want to at least skim through a few of the articles aimed at beginners on great sites like CSS-Tricks, Tuts+, Code Academy and W3 Schools. You may also want to bookmark this great list of available CSS attributes.

Example: Image on one side, text on the other

This is a common one you’ll see throughout the web. You know how to add a custom code block and drop in your IMG element and your P elements, but how do you get the dang image to show up to the right or left side with the text on the other side?

To review, your HTML code might look something like this:

<img src="http://yourdomain/path/to/your/image/imagefilename.jpg" title="This appears when you hover over the image" alt="This appears if the image cannot be loaded and is used for accessibility" />
<h2>This is a heading</h2>
<p>Sed nec arcu vel nibh ultricies tristique vitae vitae purus. Sed sollicitudin lacinia tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>

This gives you something like this (may vary depending on the design defaults you have set on your site)
Screenshot+2012-12-19+at+15.25.03

Let’s say we’d like to make the heading orange, the text a light gray (we’ll also change the font sizes and fonts) and we want that image to hang out over on the left side with a little extra room horizontally so the text doesn’t bump up against it.

Assuming we have given our custom code block a class of mySpecialDiv, Our CSS code might look something like this:

.mySpecialDiv img {
    float: left;
    margin: 0px 10px;
}

.mySpecialDiv h2 {
display: inline-block;
font-family: Impact, Haettenschweiler, “Franklin Gothic Bold”, Charcoal, “Helvetica Inserat”, “Bitstream Vera Sans Bold”, “Arial Black”, sans serif;
color: orange;
}

.mySpecialDiv p {
color: #888;
font-size: 14px;
font-family: “Big Caslon”, “Book Antiqua”, “Palatino Linotype”, Georgia, serif;
}

This custom CSS should go into the Live CSS Editor (found in the Tools drop-down in Design Mode in the Visual Editor). When you drop it in there, it’ll give you something like this!

Screenshot+2012-12-19+at+15.34.04

Small changes can make a big difference here. We used our special class, .mySpecialDiv to target our specific custom code block in all of our code. All our code is structured the same way – first the custom class we defined, and then the element we want to target within the element with that class. So for example, here we target the IMG within the custom code block effectively. Note that if we had more than one image in our code, this would affect *all* images in our code – which may give you unexpected results! You can also add a class attribute to any other HTML element, so feel free to add and use custom classes as necessary on your HTML elements when you need something more specific!

What Do You Think?

Hopefully now you’ve got a better idea of how you can start leveraging those custom code blocks to insert linked images, blocks of text or links that you can’t or don’t want to insert using one of the other core Headway blocks. How have you recently used custom code blocks? How are you planning to use them in the future?

Additional Resources

HTML & CSS

  • W3Schools – Learn HTML (Freebie)

jQuery/Javascript

Spread the word!

5 Responses

  1. nomad411 says:

    Nicely done, great article for those just starting. :)

  2. The snippet for the picture and text is a great bit of code. The only thing is my title and text are too close…. what would be the best way to add a little gap?

    • tyler93023 says:

      @lukerichardson09  try adding this:
      margin-top: 10px;
      as an attribute below .mySpecialDiv p (between the {} with the other lines)

  3. code syntax says:

    Howdy! Quick question that’s entirely off topic. Do you know how to make your site mobile friendly?
    My site looks weird when browsing from my iphone.
    I’m trying to find a template or plugin that might be able to fix this problem.
    If you have any suggestions, please share. Many thanks!

    • Grant Griffiths says:

      Have you tried the latest version we just pushed out, 3.6.3 There are new responsive features where you can actually set the responsive breakpoints. This might help with your issues.

Leave a reply

Headway Newsletter

Get the latest updates from our blog directly in your inbox! Are you ready to learn the latest from Headway Themes?

Copyright © 2013 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress