BuyNowShop » How To

Add Custom CSS to Atahualpa

Edward Caissie — Wed, 14 Oct 2009 19:37:27 +0000

This has come up quite often on the WordPress.org Support forums lately and instead of searching through old posts there I am writing this post to make it a bit easier to find here.

For the WordPress Atahualpa theme (version 3.4.4 as of this writing), follow these steps to add your custom CSS if there is no option to use in its place.

Go to the theme options page

Near the bottom click on “Add HTML/CSS inserts”

Go to the bottom of that option page for “CSS Inserts”

Add: css-element { property: value; }

Click on the HUGE Save Changes button

Just replace css-element { property: value; } with the styling you want to add.

Hide a Category

Edward Caissie — Sat, 12 Sep 2009 15:02:14 +0000

From the WordPress.org Support forums:

I need to prevent my default category from appearing in the list of category links. Is there a way to hide the default category title, but still display all posts when the user clicks the “blog” (show all) tab?
biodrama

You can use a little CSS added to the end of your style.css file to stop a category title from appearing in the list, in your example, the “Uncategorized” default category can be made to not show up with:

.cat-item-1 {display:none;}

If you want to use a different default category, finds its ID and replace the ’1′ above accordingly.

Find Old WordPress Support Profile

Edward Caissie — Mon, 07 Sep 2009 20:20:38 +0000

This is what I did to find mine:

Go to “new” profile”
View page source
Search for gravatar
Follow line across until you see id=user-######-avatar
Append ###### to the end of http://wordpress.org/support/profile/

Bookmark it for future reference. Enjoy!

Signed,
http://wordpress.org/support/profile/914362
aka Cais

PS: You can of course just look at the link on “member” under your name in any post you have made, too … but that would be much too easy (*sheepish grin*)

Display Default Sidebar and Widgets

Edward Caissie — Fri, 14 Aug 2009 00:04:03 +0000

I thought it would be an interesting exercise to provide a solution to displaying the default content of the sidebar that comes with a theme and the content from activated widgets. This is especially useful when using a theme with only one widget area in the sidebar.

The first thing I would strongly recommend is to make a back-up of the sidebar.php file as what I am suggesting would be considered a large or significant edit.

I will be using the code from the Shades theme as it is the simplest to work from, for this tip, and should be easily related to most themes. First, look for the code similar to this, near the top of the sidebar.php file and make note where it is:

Next, follow the code to near the bottom of the file, and look for a statement very similar if not exactly like this:

The Shades theme actually has two (2) sidebar widget areas so the code to look for would look similar to this for multiple widget area themes:

Make sure to note the code and area between the “dynamic sidebar” line and its matching “endif” line above, in the case of the Shades theme it would be the first instance of the “endif” statement as shown above.

Now, the BIG edit: cut and paste all the code between the two statements you noted above and place it either directly below the “endif” statement; or, directly above the “dynamic sidebar” statement, depending on how you want your sidebar default and widget content to display. If you use “copy” it will display the sidebar default twice until you activate a widget.

Take a look at your blog … if you had no widgets activated before the edit, then you should not notice anything different. Try activating a widget or two and you should see them appear either above, or below, the “default” sidebar content, again depending on where you moved the default sidebar code to.

Feel free to contact us if you need help making these edits to the theme you are using.

Hide a Menu Page

Edward Caissie — Fri, 17 Jul 2009 23:59:46 +0000

How do you hide a menu page from the top of your blog?

There are a few different methods that you can use to hide a menu page. I will show you three different methods in this post, two using simple CSS and the third using a parameter in the wp_list_pages(); or the wp_page_menu(); functions. This example will work best if you are viewing this blog using the Custom child theme of the Desk Mess Mirrored theme as its CSS has been modified specifically for this post. (Switch to the Custom child theme of Desk Mess Mirrored).

You may have noticed there is a gaping space between the “Design” (or “Contact Us”) page and the “Themes” page … why? you ask. Well, because I wanted that space there. The gaping space is actually the home of the “Hide Me” page, good reading as well, especially if you cannot see it.

OK, let’s get to this. You can easily “hide” a page by using the exclude parameter in the wp_list_pages(); or the wp_page_menu(); functions. The code would look very similar to this:

I’m using the number 220 as it is the actual page ID of the “Hide Me” page. If you are using this method, (after reading the Hide Me page for reminders) use the ID of the page you want to hide. The wp_page_menu() function is described well in the comments here at Digging into WordPress (if you want to read more comparing it to wp_list_pages). I consider this to be only one method as wp_page_menu(); calls wp_list_pages(); to generate its output.

The other two methods are strictly CSS. I noted above the post ID for my “Hide Me” page is 220. Both wp_list_pages(); and wp_page_menu(); generate default class tags for each item in the menu. The class to style in this case is the page-item-, and specifically in this case I am styling the class page-item-220.

The first of the CSS methods behaves very similar to the exclude parameter used above. The CSS to add to your style.css sheet would be something along this line, and the page will behave as though it does not exist, or as in the functions, excluded from the menu:

.page-item-220 { display: none; }

The second method is the one I am using in the Custom child theme on this blog (the “Hide Me” page will show when using the other themes):

.page-item-220 { visibility: hidden; }

This simply makes the item invisible, but it still “holds” a place in the layout and gives me the effect I wanted … and maybe the effect you are looking for.
(NB: I specify the page “order” for each page; you may need to as well to create similar effects.)