Pods CPTs versus ACTs – coding for them

Leave a reply

One of the biggest areas of confusion with most people jumping in to pods is the difference between CPTs (Custom Post Types) and ACTs (Advanced Content Types). Pods lets you create and extend other content types as well, but these two are the most common and the most commonly confused.

The Pods team has actually created a really great comparison chart for you which I highly recommend looking over either before you decide which one you need or if you are stuck or confused after already creating one or the other. The thing is, while that is a great chart that shows you the features of using each, it can be overwhelming and not give you the whole picture in terms of coding for them.

When to use CPTs

I prefer to use CPTs when the content I will be entering is somewhat of an article and not just a piece of data. I consider WordPress’ post table a good place to maintain a list of articles. Articles could be anything from pages, blog posts, news items, or recipes. To me, they are generally things that I would consider working in to the main blog feed or at least they would not be completely out of place in such a feed. For instance, I used Pods to extend a CPT called “Fitness Tips”. These are mini articles written weekly. They are separated in to their own page but they could easily be pulled right in with all blog posts and it would feel logical.

Pulling in CPTs
Now here is the kicker. There is nothing inherently special about pulling in content from a CPT created by Pods. It is exactly the same as pulling in content from any CPT.

Instead of dealing with Pods Pages and Pods Templates and such, you simply treat it like a normal Custom Post Type and create a custom template using WordPress’ template hierarchy tree for reference. So if you created and extended a CPT called ‘recipes’ using Pods, you can simply create single-recipes.php and WordPress will use that as the template to display the content of that CPT.

With that being said, you then build your loop the same way you build ANY loop for CPTs and pull in the additional fields using get_post_meta() where the $key is the name of the field you added via pods.

It is really that simple. A lot of people make it harder than it should be, and that is why I have written this blog post.

When to use ACTs

I tend to use ACTs when the data I am wanting to store does not fit in to a news or article style format. Typically I consider this more “tabular” data versus news stream information.  This is data that typically would not have the typical WordPress post fields such as title and content and instead would be more like a list of unique fields that make up this piece of data. One example I use quite often is when I use ACTs to build an easy to manage UI for content sliders. When you think about a single slide in a slider, would you put that in the realm of posts as well? Is it a piece of data that would be well suited to the posts UI or would it be better off as a list of fields represented as a form. For me, the slide fields are best displayed as a form with a name, image, tag line, and link-to fields and individually they would not make any sense fed in to the main WordPress posts feed. Other examples would be an employee database or a list of houses for sale.

Coding for each is not the same

This is where the confusion comes in. Pulling Pods ACTs in to your theme is very simple albeit very feature rich but also quite different from what we are used to when working with WordPress’ loop. Pulling in Pods data requires that you create code to query your new table using the $myvariable = pods (‘mypodname’); This is a step you do not have to do with traditional WordPress posts because of how the loop is created.

Pulling in ACTs
There are a number of tutorials that show you all of the different ways you can pull Pods ACT content in to your WordPress theme. You have a number of tools such as Pods Pages, Pods Templates, and even WordPress Pages to use in pulling in and displaying these items and it would be up to you to decide which is best. When I first started using Pods I was consistently using the Pods Templates but have since switched to writing my code inside of a WordPress Page Template and simply choosing that page template from the drop down select on my Pods Page.

Useful links:

Pulling Pods into your Theme using pods pages and templates
WordPress Template Hierarchy
Content Type Comparison Chart
Displaying Pods Data – A Tutorial

Pods – Pages and Templates and more Pages OH MY!

Leave a reply

If you haven’t noticed, the Pods Framework is one of my favorite WordPress plugins of all time. I love it because, as a developer, I am able to really manipulate and store data any way I see fit. As a designer, I can easily pull data in to my theme and get to work designing it instead of focusing on how to pull it in.

The Pods Framework gives us a number of ways to pull in and display data on you’re site so you can get down to the themeing (fun) part of WordPress dev.

What’s the difference between all of these?

Pods Page – This is a page that is created in the pods settings area. These are separate from WordPress pages and gives you fields far beyond what WordPress pages give you. For a full list of these, check out this page here.

WordPress Page – These are your typical, run of the mill pages that you have been creating within WordPress for years. You have the basic UI for adding in data and the ability to select a page template.

Pods Templates – This is one place where you would start to add in the HTML structure for the stuff you want to display on your site. Pods Templates uses “magic tags” instead of traditional php. So for instance, if you wanted to display the contents of the field called “name” you would simply type {@name}. This is the super fast, super easy way to get pods data up and running. Here is a great tutorial for making pods templates and displaying them.

There are a few other ways that you can display the contents of a pod as well. You could use the pods shortcode which is added using a handy dandy button on the posts/pages write panel. You still need to build a template with the actual content structure, however.

Using Pods Pages with WordPress Page Templates

If you are comfortable using page templates, then you will be comfortable with this method of displaying pods content within a page template.

  1. Create your pods page
  2. Title it whatever you would like
  3. Click Save (we will come back to this in a minute)

Build your WordPress page template as you would any WordPress page template. Below is some demo code for you to take a look at.

A quick explanation of the above code:
We are first setting the global $pods by telling it which pod to query and then sorting it in alphabetical order based on the name field. After that we loop through each pod item in our ‘mypods’ pod and define a variable for each field. Finally we simply echo the contents of those variables in to our HTML structure inside of our loop.

Hooking it all together now
Now you are going to go back to your pods page that you created previously and you will now see “Pod Page Template” in the drop down list. Choose that and save your pods page again.

Now you should be able to go to yourdomain.com/your-pod-page and see a listing of all of the items you added in to that pod!

What about ‘single’ pages for each pod item?

Pods has you covered there as well. For this we will be making a second pods page and a second page template.

  1. Create a new pods page and name it your-pod-page/* (replace ‘your-pod-page’ with the name of the page you created previously. The * is a wildcard and tells it to use this page for any page that is a child of ‘your-pod-page’. Save it (we will come back in a moment)
  2. Create another new page template with code like this

A quick explanation of the above code:
This code is almost exactly the same as the code in the first page template that we created except that we are moving the “while” statement and including a new parameter in the pods() function. The ‘where’ parameter is basically  making sure that it only gets the pod item that matches the url permalink.

Hooking it all together again
Now you are going to go back to your pods page that you created previously and you will now see your new page template. Choose that page template and save your pod.

You should now be able to go to domain.com/your-pod-page/name-of-a-pod-item

If you get a 404 not found:

Make sure to go to your wordpress permalinks setting and that it is set to anything other than ‘default’. The pods permalinks will not work without a permalink setting set.

Also make sure that you have a detail page set in your pods setting to /{@permalink}

 

Adding a new field to the page edit screen and displaying that in your template – using pods

3 Replies

This is a very simple tutorial on how to easily extend your page edit area of your admin and display the value of these new fields on your page. Super simple!

Basically someone came to the support room asking how to create two WYSIWYG areas when adding a WordPress page so that they can create a two column layout in the page template. This is so simple it seems wrong.

1. Extend the “Page” post type using pods
Screen Shot 2013-03-25 at 1.19.26 PM

2. Choose the type of WordPress object you want to expand
Screen Shot 2013-03-25 at 1.20.06 PM

3. Add your new field and save your Pod
Screen Shot 2013-03-25 at 1.23.31 PM

YOU’VE NOW ADDED A NEW FIELD TO YOUR PAGES AREA!!!
Screen Shot 2013-03-25 at 1.26.03 PMThe only thing left to do is output the contents of this new field which is, again, very simple to do.

Basically what you want to do is get the contents of the new field and assign it to a variable, then you echo the variable where you want to. This all must be done inside of the loop.

Find your page.php theme file or your custom page template file.

Then you are going to add this inside of your HTML structure

I have wrapped this in an ‘if statement’ so that you can hide the field if it is not filled out.

 

 

 

 

Handy HTML Cheat Sheet

Leave a reply

I found this HTML cheat sheet from webmonkey.com. Definitely helpful to keep all of these in one place since I usually just google for tags I need to use. One thing that I google at least 5 times a week is creating link tags. Now that I found this I can easily just pull it up and copy and paste it to use it in whatever I’m working on.

HTML Cheatsheet

Keep this cheatsheet handy — it contains the most common HTML tags and their proper syntax.

Basic Tags

<html></html> Creates an HTML document

<head></head> Sets off the title and other information that isn’t displayed on the web page itself

<body></body> Sets off the visible portion of the document

 

Body Attributes

<body bgcolor="pink"> Sets the background color, using name or hex value

<body text="black"> Sets the text color, using name or hex value

<body link="blue"> Sets the color of links, using name or hex value

<body vlink="#ff0000"> Sets the color of followed links, using name or hex value

<body alink="#00ff00"> Sets the color of links on click

Text Tags

<pre></pre> Creates preformatted text

<hl></hl> Creates the largest headline

<h6></h6> Creates the smallest headline

<b></b> Creates bold text

<i></i> Creates italic text

<tt></tt> Creates teletype, or typewriter-style text

<cite></cite> Creates a citation, usually italic

<em></em> Emphasizes a word (with italic or bold)

<strong></strong> Emphasizes a word (with italic or bold)

<font size="3"></font> Sets size of font, from 1 to 7

<font color="green"></font> Sets font color, using name or hex value

Links

<a href="URL"></a> Creates a hyperlink

<a href="mailto:EMAIL"></a> Creates a mailto link

<a href="URL"><img src="URL"> </a> Creates an image/link

<a name="NAME"></a> Creates a target location within a document

<a href="#NAME"></a> Links to that target location from elsewhere in the document

Formatting

<p></p> Creates a new paragraph

<p align="left"> Aligns a paragraph to the left (default), right, or center.

<br> Inserts a line break

<blockquote></blockquote> Indents text from both sides

<dl></dl> Creates a definition list

<dt> Precedes each definition term

<dd> Precedes each definition

<ol></ol> Creates a numbered list

<ul></ul> Creates a bulleted list

<li></li> Precedes each list item, and adds a number or symbol depending upon the type of list selected

<div align="left"> A generic tag used to format large blocks of HTML, also used for stylesheets

<img src="name"> Adds an image

<img src="name" align="left"> Aligns an image: left, right, center; bottom, top, middle

<img src="name" border="1"> Sets size of border around an image

<hr /> Inserts a horizontal rule

<hr size="3" /> Sets size (height) of rule

<hr width="80%" /> Sets width of rule, in percentage or absolute value

<hr noshade /> Creates a rule without a shadow

Tables

<table></table> Creates a table

<tr></tr> Sets off each row in a table

<td></td> Sets off each cell in a row

<th></th> Sets off the table header (a normal cell with bold, centered text)

Table Attributes

<table border="1"> Sets width of border around table cells

<table cellspacing="1"> Sets amount of space between table cells

<table cellpadding="1"> Sets amount of space between a cell’s border and its contents

<table width="500" or "80%"> Sets width of table, in pixels or as a percentage of document width

<tr align="left"> or <td align="left"> Sets alignment for cell(s) (left, center, or right)

<tr valign="top"> or <td valign="top"> Sets vertical alignment for cell(s) (top, middle, or bottom)

<td colspan="2"> Sets number of columns a cell should span (default=1)

<td rowspan="4"> Sets number of rows a cell should span (default=1)

<td nowrap> Prevents the lines within a cell from being broken to fit

Frames

<frameset></frameset> Replaces the <body> tag in a frames document; can also be nested in other framesets

<frameset rows="value,value"> Defines the rows within a frameset, using number in pixels, or percentage of width

<frameset cols="value,value"> Defines the columns within a frameset, using number in pixels, or percentage of width

<frame> Defines a single frame — or region — within a frameset

<noframes></noframes> Defines what will appear on browsers that don’t support frames

Frames Attributes

<frame src="URL"> Specifies which HTML document should be displayed

<frame name="name"> Names the frame, or region, so it may be targeted by other frames

<frame marginwidth="value"> Defines the left and right margins for the frame; must be equal to or greater than 1

<frame marginheight="value"> Defines the top and bottom margins for the frame; must be equal to or greater than 1

<frame scrolling="value"> Sets whether the frame has a scrollbar; value may equal “yes,” “no,” or “auto.” The default, as in ordinary documents, is auto.

<frame noresize="noresize"> Prevents the user from resizing a frame

Forms

For functional forms, you’ll have to run a script. The HTML just creates the appearance of a form.

<form></form> Creates all forms

<select multiple name="NAME" size=?></select> Creates a scrolling menu. Size sets the number of menu items visible before you need to scroll.

<option> Sets off each menu item

<select name="NAME"></select> Creates a pulldown menu

<option> Sets off each menu item

<textarea name="NAME" cols=40 rows=8></textarea name> Creates a text box area. Columns set the width; rows set the height.

<input type="checkbox" name="NAME"> Creates a checkbox. Text follows tag.

<input type="radio" name="NAME" value="x"> Creates a radio button. Text follows tag

<input type="text" name="NAME" size=20> Creates a one-line text area. Size sets length, in characters.

<input type="submit" value="NAME"> Creates a Submit button

<button type="submit">Submit</button> Creates an actual button that is clicked

<input type="image" border=0 name="NAME" src="name.gif"> Creates a Submit button using an image

<input type="reset"> Creates a Reset button

Happy coding!

73af12164a3aaaa6c0981d2856a96d15

Position: relative, static, absolute or fixed?

Leave a reply

So its been about 5 or 6 months since I’ve started working with CSS and lately I’ve been working with the position property often. Basically, just changing the value of relative, absolute, static, or fixed until it works like I would want it to. This post will be some of my research to see what these terms mean, do, and most importantly: how to properly use them in CSS.

First I looked up the definition of the property which I get: The position property specifies the type of positioning method used for an element (static, relative, absolute or fixed). Doesn’t mean much to me at this point. I know it basically tells the browser there to position content/elements, but what does the rest of that mean?

In CSS the default position is static. So if you don’t apply any other values to content (pictures, text, whatever) it will be static. This means that all of the containers will stack one on top of another like how you would think it would lay out on a page. Think of blocks placed one on top of another. But using static you wouldn’t be able to shift those elements around using offset properties such as top, right, bottom and left.

Relative works similarly to static but you can change those offset properties. Like so:

Elements will be stacked one on top of another but you will be able to push an element to the left or right and also change other properties that are unable using the static value of position.

Now onto the absolute value…with this the elements are removed from normal flow (no longer stacked on top of each other) and each element can be put anywhere. It isn’t affected by the other elements’ locations. You can set the offset properties so one element is located in the top left corner of a page while another is in the bottom right corner. It is responsive to the page’s size. If you change the size of a page the elements will remain in those positions and will even overlap each other if the page size shrinks. Or place one element within another element. Like this:

css-fixed-absolute-relative

Absolute elements also scrolls with the page as you scroll down or up.

Finally there is position: fixed. It acts similarly to absolute where you can change the offset properties and it isn’t affected by the other elements on the page. However, where you set the rules for the element it will remain there regardless of how small or big the page is.

In this example, the light grey icon will always remain in that position behind the text and in the left hand top corner of the page, even when a reader scrolls down to read the rest of the article:

And this footer will always remain at the bottom of the page regardless of where you are and where you scroll on the page.

I think this all has helped me visualize and figure out what each of the position values do. Quick notes:

  • Relative: default position, acts like blocks, elements stack on top of each other, cannot change offset properties.
  • Static: elements stacked on top of each other but gives ability to change offset properties.
  • Absolute: elements are not affected by other elements, can change offset properties, will remain where it is set on the page regardless of how big or small the page is.
  • Fixed: follows much of the absolute rules, but will remains ‘fixed’ to where it is told to even with scrolling.

 

82d87000add4a030bf18f947d24c64b7

My ‘ah ha’ Moment with CSS

Leave a reply

I haven’t had any formal training or education on CSS. I’ve just been going through Code Academy courses and minor tinkering with various websites. Before I get to my ‘ah ha’ moment, let’s begin this post with some basic information about HTML and CSS that I’ve learned from Code Academy.

Tags

  • They are HTML elements such as <body> </body> or <p> </p>. Lesson one I learned while working on a website: ALWAYS close a tag if there is an opening tag!
  • The text between an opening <body> tag and a closing </body> tag is for content, while <p> </p> is for paragraphs. Within a body there could be a title, multiple paragraphs, links, images, etc.- all are tags that can be used to separate the content to be styled using CSS.

CSS Syntax

selector{

property: value(s);

}

  • I like using this outline where the selector is on top with a { then on the second line with the property and value and finally on with a } on the last line. This is just my personal preference. You can use: selector{property:value(s);} or whatever you want to but its important to keep the syntax the same.
  • A selector is the tag that you want to style such as p for paragraph. The selector tells a browser where there are different styles.
  • Properties are things like font-size, font-family, color, border, margin and so on and so forth. This is tells a browser what to change about the content.
  • The value is usually a number, a color, or a keyword; Values give instructions on how to change the text, image, url, whatever is within the tag. For example, if I want to have all the text that are tagged with <p> </p> on my website to have size 14px, Verdana, #00ffc3 and all uppercase font this is what it should look like on the CSS style sheet:

 p{

font-size: 14 px;

font-family: Verdana;

color: #00ffc3;

font-transform: uppercase;

}

  •  Also, it is important to put semi-colons after each CSS attribute (even after the last one, not necessary but a good habit to pick up) so a browser knows where to separate and end instructions for that property; much like a period in reading a sentence.

Ok, here is where I will begin telling my “ah ha” story. So in my online courses I have been just doing CSS examples using basic tags such as body, title, p, div… Pretty easy stuff to follow. So, I was given a task to add and style a specific page on a working website. <div> </div> tags became are more unique and are defined. I haven’t reached this topic in Code Academy, so on to Google I went. I had no idea what <p class= “content”> or <div id=”top”> meant. Here is what I learned from the searches:

  • Classes and IDs give you the ability to specifically define a selector. This allows you to have the same HTML element, but style it differently depending on its class or ID.

Using HTML you can define a selector tag with a unique class or ID and you can go back in the CSS style sheet to change those properties to different ones. In the CSS, a class selector is a name preceded by a . and an ID selector is a name preceded by a #. The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one. Classes are useful when you have a bunch of elements that should all receive the same styling.

Look at this example:

In HTML:

<div id=”content”>

<div class=”comments”>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet neque turpis.</p>

</div>

</div>

In CSS:

#content .comments{
padding-right: 85px;
padding-top: 20px;
}

This code tells a browser to use whatever styles that have been previously coded to the page but override whatever padding that was there to use these new rules/instructions.

Ah! Makes so much sense! So very useful to break up the content of a page to give HTML elements different looks.

5682033_orig

Div and Span

Leave a reply

I’ve been going through the Code Academy courses and today I am learning about the <div></div> and <span></span> HTML structure tags. I have a feeling that this is going to be a fundamental lesson so the following notes are for me to come back to, if needed, and maybe you will learn something new too.

the basics

<div> means division so this piece of code divides and groups page items into containers. Highly important. Gives the ability to style and create different parts of a webpage using CSS.

<span> controls the styling of smaller parts of a page like text. You can change the color, font size, font family etc of one or more words that are wrapped in the <span></span> element tags.

Example HTML code and results to the right:

Screen Shot 2012-12-28 at 11.34.12 AM

<body>
<div style=”width:50px; height:50px; background-color:red”></div>
<div style=”width:50px; height:50px; background-color:blue”></div>
<div style=”width:50px; height:50px; background-color:green”></div>
<div style=”width:50px; height:50px; background-color:yellow”></div>
</body>

 

 

An example of inline styling with HTML using <span></span>:

<p>I like the color <span style= “color:blue”> blue </span>. </p>

Changes the color of the word “blue” to blue. Another (more simpler and mainstream) way to change the styling of an element like text within a large block of text is to wrap words in HTML with the span tags like <span>blue</span> and then add the various, new style choices in CSS:

span{

font-family: tahoma;

color:#00fffb;

font-size:24px;

}

The featured image is from www.fanaian.org. Link is to an article on their site that outlines the differences between div and span elements.

Code_Academy_logo__transparent_

New to Web Developing? Me too!

2 Replies

There is a ton to learn and I hope I can get a hang of everything. This is a website that I have been working through to learn about the basics of web development (the backend of websites). Code Academy is a website that teaches anyone (like me!) who wants to learn about HTML, CSS, jQuery and JavaScript and more!

Pros

  • It is very easy to follow the courses. They are all “hands-on” meaning that there’s a little paragraph on what they are teaching and the student (me or you) and then the student uses the information to code themselves. You get to see the results of your code and it also gives feedback if it is wrong. (very, very helpful)
  • There are different “tracks” you can take and you dont have to take them in any sequence. The tracks are the topics (JavaScript, HTML & CSS, Python, Ruby, jQuery) and within each track there’s the learning sessions.
  • Along with basic feedback, there is a Q&A Forum that is for users/students to post questions on their broken code. I’ve used this a couple times during my lessons. Many times, I, along with other newbies get the code wrong for the same reasons (missing ; or ending tags </ >). Its nice knowing I’m not the only person out there forgetting little (&IMPORTANT) characters.

Cons

  • When you type an opening tag, the Code Academy program automatically creates a matching end tag. This is not a huge con but in the real world of coding this does not happen. When I’m learning I would like the tools/example problems to be as close to real life as possible. How will I remember to put in an end tag if its always made for me? The same thing also happens with quotation marks ” “.
  • There are a few little glitches and confusing aspects like completing a course on a track. Sometimes it doesn’t save your progress and makes you redo a lesson. Somewhat annoying, but again, the lessons are free so we can’t be that picky right?

 

So check the website out if you are looking for an easy, straight forward, and interactive way to learn basics of web coding.

 

pantone-book-11

All About Color

2 Replies

Color is one of those factors in a website or a logo that can change the whole overall feel of it. Many psychological studies out there point out that color has a huge impact on the mood of a design. Blue evokes a more calming and cooling mood while yellow encourages communication, stimulates the nervous system and activates memory. Here’s a website if you want to know more about Color Meanings and How Color Can Affect Choices You Make.

To make things easier in the world of web design and printing purposes, a company called Pantone created a universal color standard called Pantone Matching System (PMS). When making a logo or any color choice you want that color to read the same on your computer monitor and on everyone’s monitor. In the case of printing you want to ensure that your brochures, flyers, business cards, etc print the correct color you have chosen. The colors come in a fan booklet or a binder with color chips. There are three kinds of color:

  • CMYK: The standard for printing, which blends the ink colors of Cyan (C), Magenta (M), Yellow(Y) and Black (K or Key). CMYK printing uses “halftones,” or lighter shades of the four colors, to represent lighter versions of a color.
  • RGB: The color template primarily used for computer monitors by web designers, composed of the three colors Red, Green and Blue. These are also known as the “Primary Colors.” RGB tends to look more vibrant and versatile than CMYK, although it involves a different printing process and is not commonly used for that purpose. For TVs and computer monitors, each pixel represents one of the RGB colors.
  • Spot Colors: This term usually refers to CMYK, but is mainly used in the industry to define a non-standard color, such as a metallic or fluorescent.

Hex color codes come in handy when designing web pages. It is a six-digit number used in HTML and CSS that represents a color. Here is a color converter that changes RGB colors into a web HTML/CSS friendly hex color code. This is pretty handy if you create a wire frame with perfect colors that you want to transfer over to your website.

Need some color inspiration?

COLOURLovers is a great site with modern color inspirations and a section of latest color trends among many things. My favorite part is that each color comes with a hex color code and a RGB code. Also many of the color palettes have a picture where the inspiration for the color palette comes from.

DeGraeve created this nifty site where you can upload a picture and it creates a dull and a vibrant color scheme from it. This site generates hex color codes. Pretty useful if you have a picture that you want to use but are stuck with picking out colors that would work well with it.

mudcu.be, another color picker site. Picks color combos using a systematic approach. Pretty fun to use, many different ways to generate a color scheme.

Some Helpful Resources for Learning Web Developing

Leave a reply

Here’s a list of a couple of very helpful resources for those who are starting to learn how to web develop. Also helpful for those who are advanced web developers! All of these are beneficial resources of you are stuck on a function or need a little help with web coding.

WordPress Codex - An online manual about everything WordPress from installation to plug-ins to troubleshooting.

WordPress Starter Theme – A basic starter WordPress theme meant for creating custom themes.

A Look Into the WordPress Hierarchy - How templates fit together on a custom WordPress site.

The PHP Manual – Hypertext Preprocessor Manual. General Purpose scripting language for web development.

JQuery – one of the most used JavaScript library. Easy to use plug-ins that simplified HTML.