Tag Archives: Wordpress

Insert WordPress Page Content Anywhere You Like in Your Site

If you need to insert content from a Page into other places in your site, such as in a sidebar or a category page, then that’s easily done with this little trick I discovered from Scott Nelle.

As Scott mentions, he does this for clients so that they can easily add content to a sidebar. He just creates a Page and labels it so that they know that’s the Page they need to edit to change their content area in the sidebar.

Pretty smart, if you ask me. They don’t need to know where the widgets are, for example, or even what a widget is. Just tell them, “Edit the ‘Sidebar Page’ if you want to change the content in this area.”


How To Do This

First, you’ll need to create a Page (not a Post) with the content want in it. You will then need to find the ID of the Page. If you aren’t sure how to do that, here’s one way.

Next, put the following code where you’d like your Page content to show up (such as in a sidebar):

 $id = ID#;
 $p = get_page($id);
 echo apply_filters('the_content', $p->post_content);

You will need to insert your actual Page ID in the spot that says ID# above. So, for example, if I find out that my page ID is 14, my code in that section will look like this:

$id = 14;

After that, you may need to do some styling, depending on your layout and how you want things to work, but that’s it really. You can now go back and edit the page you created, and it will change the content wherever you’ve put your code for it.

Taking It a Little Further

I found the code above recently when I was looking to do something similar, though my situation was just slightly more complicated. I’ll go ahead and go over my situation as it may spur ideas for you to use this type of code in your own ways.

In my situation, I needed to put different content into different category templates.

In other words, I needed to be able to write up some editable content and images, and then insert them in a special place on my Blue Category page, for example. Then I needed to do the same thing for my Red Category, Yellow Category, and Green Category Pages.

I’ll try to represent that graphically.



The Solution

The solution was to use the code mentioned at the beginning of the post but to also use category templates. You can learn about creating category templates here.

As demonstrated above, I created a Page and then got the ID for it. (Let’s say the ID was 5.) This was content for my Blue Category.

I then created a Blue Category template (category-blue.php), placed the code above into the template where I wanted the content to appear, and put my Page ID into the correct spot so it looked like this:

 $id = 5;
 $p = get_page($id);
 echo apply_filters('the_content', $p->post_content);


And that was it. My Blue Category was set.

Then I moved on and made my Red Category content by creating a NEW Page. I got the ID for that (ID = 6). And then I created a Red Category template (category-red.php) and put my code in. It looked like this:

 $id = 6;
 $p = get_page($id);
 echo apply_filters('the_content', $p->post_content);


And on and on I went for all the different categories I wanted this for. Now, as you can see, I can easily go into my newly created Pages and update/change the inserted content for different categories.

If I want to change the inserted content on my Blue Category page, I just go to the Page I created for that and work in the editor, which is much easier than digging into the category templates and working with raw HTML, for example. In the editor, it’s easy to insert pretty much whatever you like – text, images, videos, etc.

So there you go — next time you wish you had an easily editable area somewhere on your site, you might remember this little trick of pulling in Page content wherever you like.

Photo: Embedment from BigStock

How to Customize Responsive WordPress Themes – Part 4: Media Queries

Responsive WordPress Themes - How Media Queries Work

In this 4th part of the series on “How to Customize Responsive WordPress Themes”, we’re going to take a closer look at media queries, and see how they work their magic in responsive WordPress themes. And don’t worry; it’s really not as complicated as you might think. On the contrary, as powerful and flexible as media queries may be, they’re actually very simple.

Before we continue, note that although media queries can be used in languages other than CSS, such as JavaScript, this article only concerns their use in your style-sheets. Also, while there are several types of devices that can be specified using the @media rule, we’ll only be looking at the screen media type here to keep things simple (for more on media types, see http://www.w3.org/TR/CSS21/media.html).

A simple example

A media query is an expression that will instruct a specific type of device to display your content in a particular manner depending on conditions that you define.

A media query has a logical construction, or syntax, that must specify the type of media concerned, and can include one or more features that apply to that media type. Let’s take a look at a simple example:

@media screen and (min-width: 768px) and (max-width: 979px) { ... }

  • The query opens with: @media. That’s a pretty obvious notification to devices saying “Hang on media thingy, check if these conditions apply to you“.
  • It then specifies the device type that is concerned by the query; in this case: screen. So, any device that does not display content on a screen will ignore the query and continue on its merry way.
  • The logical keyword and indicates that the condition immediately following it must also apply.
  • We then see 2 conditions in this rule: (min-width: 768px) and (max-width: 979px). That identifies devices with a viewport size anywhere between 768 and 979 pixels.
  • Finally, there are those brackets: { … }. They will contain the style rules that must be applied if the conditions specified by the media query are met.

Putting it all together, this simple query states that any device with a screen whose viewport size is between 768 and 979 pixels must respect all the styles contained in the curly brackets. Devices with a screen width that is less than 768px or greater than 979px will ignore this query. Any device that doesn’t directly display content on a screen will also ignore it (print or projection devices for example).

Adding your media-specific styles

Now let’s take a closer look at those curly brackets that enclose the media-specific styles. They are identical to the brackets you normally use when writing your style rules, and they must wrap all the style rules that apply to the media query. Just write your style rules as you normally do inside those extra brackets. Here’s an example of a simple style-sheet with a default margin value applied to a div container, and a lesser value that would apply only to screen devices with a viewport width of 767px or less.

/* Default styles */
div#main { margin:40px; padding:20px; }

/* Phones to tablets 767px and below */
@media screen and (max-width: 767px) {
 div#main { margin:20px; }

Note that is not necessary to define everything in your media queries. Media queries respect the cascade principles of CSS. That means that any default style rules that are not explicitly overridden by a media query will also apply to device types targeted by that particular media query. In the above example, the padding has not been explicitly defined in the media query. Device types targeted by that media query will, therefore, inherit the value defined in the default styles.

The above example demonstrates the use of the logical keyword and. There are 3 other logic elements that can also be used in your media queries.

  • A comma represents a logical OR
  • The keyword not can be used to negate the result of the query
  • The keyword only can be useful to hide stuff from older browsers

See examples 6, 8 and 9 on this page at W3.org for more.

Adapting a design to all screen sizes

Great! So we’ve now created a style-sheet and have included a media query that will apply different styles to smaller screens. But we know that there are more screen sizes than the ones we just created styles for. So what if we wanted to create a design that would adapt to all screen sizes?

You can have several media queries in the same style-sheet to define specific style rules for different conditions. If we want to define some style rules for all screen devices, from cellphones to large wall-mounted monitors, we could include all those queries in our style-sheet like in the example below.

/* Default styles */
div#main { margin:40px; padding:20px; }

/* Large display 1200px and above */
@media screen and (min-width: 1200px) {
 div#main { margin:50px; }

/* Portrait tablets 768px and above */
@media screen and (min-width: 768px) and (max-width: 979px) {
 div#main { margin:30px; }

/* Phones to tablets 767px and below */
@media screen and (max-width: 767px) {
 div#main { margin:20px; }

/* Phones 480px and below */
@media screen and (max-width: 480px) {
 div#main { margin:10px; }

In the above example, you can see that there is no specific media query for screen devices with a viewport width that is between 980 and 1199px. That’s because we are considering that size range as our default size. All style-rules that are not contained in media queries will be our default styles, and will apply to all screen devices that fall into that size range.

When you have a relatively simple theme with a relatively simple design (like Twenty-Twelve for example), you can get away with adding all your media queries in the same style-sheet. But what about when you’ve got a boat-load of styling to do for each media type, or want to organize things in different style-sheets?

Using multiple style-sheets

Happy days! Media queries can also be used to specify individual style-sheets that must be used only for specific media types and/or conditions. So you can have one style-sheet for your default styles, and another for your responsive stuff. Once you’ve created your style-sheets, there are 2 ways that you can call them (use only one or the other, not both, or things will likely get screwy on your site).

You can call your responsive style-sheet conditionally from within your default style-sheet using the @import rule. You simply need to append the media query conditions to a normal @import rule. So instead of this (which would load the responsive style-sheet regardless of the device):

@import url(responsive.css);

…you can use this (which only loads the responsive style-sheet if either of the 2 conditions are met):

@import url(responsive.css) screen and (max-width: 979px), screen and (min-width: 1200px) ;

The 2nd example above demonstrates the use of the comma as a logical OR. So the responsive style-sheet will only be loaded for screen widths less than 980px, OR greater than 1200px.

However, according to Google, there is a drawback to calling additional style-sheets from within the default one using the @import rule: page load time. The browser must first download, parse and execute the default style-sheet before it even realizes that it must also load the responsive one. There is an alternative, and faster way.

Load your style-sheets in parallel in your theme’s header.php file using <link> tags. You’ve surely noticed how a style-sheet can be loaded from the header in a WordPress theme; something like this:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); >" />

You can specify different style-sheets, like your responsive one, that should load only under specific conditions using a media query directly in the link. Here’s what that might look like using the same conditions specified in the previous example (this assumes that the responsive style-sheet is in the root of the theme):

<link rel="stylesheet" type="text/css" media="screen and (max-width: 979px), screen and (min-width: 1200px)" href="><?php echo get_template_directory_uri(); ?>/responsive.css">

Wrapping things up

We’ve seen how easy it actually is to write a media query, and how to use them in a style-sheet. We’ve also seen how to call external style-sheets using media queries. The next article in this series will cover a few things to look out for when creating your styles for various media types or conditions.

In the meantime, get out your Twenty-Twelve child-theme (you did make one, didn’t you?) and play around a bit with the responsive styles beginning on line 1351. You may also want to review Part 2 and Part 3 of this series while you’re at it :)

Additional resources to check out

Managing Images in WordPress with the Media Attacher

There are 2 ways to upload images into your WordPress site – through the post/page image uploader or through the media library.

Both place images into your overall media library; and both give you the ability to drag and drop upload multiple images at once.

So what’s the difference and which one should you use? Good questions.

Most people add images into a post using the Add/Insert button located just above the post/page editor. This gives you the ability to upload files from your computer, a web url, or from inside your media library.

Image uploader in the post/page editor

It also places that file immediately inside a “Gallery” which gives you the ability to quickly choose the image for re-use later in the same post.

Images available through the post/page editor gallery

That’s fine if you’re working with images not already in your media library, because those images have to be uploaded anyway.

But if you run a multi-author blog, or a website that has images inside the library that you plan to reuse, attaching those images to posts using the media library is the more efficient way to go.

Using Media Library to Attach Images to Posts and Pages

You can make images appear inside your gallery at the post and page level by using the media library.

This is also a great workflow option for those writers who like to compose blog posts with text first and then add images later. So rather than using the Add/Insert button at the post level and adding images from your library one by one, you can employ a more efficient method of attaching images.

Media Library shows all your site’s media

When you have a post in draft form – text only, navigate to your media library and find the images you plan to use with that post, select them and then click the “Attach” link.

A modal window will popup and give you a search field where you can type text to find posts. When those posts have populated the window, select the box next to the post name, and those images will automatically be “attached” to the selected post – that is, they will be available through that post or page image gallery, and available for quick insertion into the post or page editor screen.

Places images inside the gallery using the media attacher

Once you return to that draft post, you can then insert images into the editor by using the GALLERY found inside the Add/Insert screen, rather than uploading duplicate copies, or having to search for them individually inside the media library.