Atahualpa tips and tricks

Here’s my tips for working with the very powerful theme Atahualpa.

Firstly this template is unlike most, it has your options in the WP backend Admin->Atahualpa Theme Options->here there are more than 200 options to set.  This generally does not require you to edit PHP files and FTP them to your server,  or edit CSS. This also doesn’t require Child Themes or additional template pages to create, specify and use.

To add google analytics website verification or webmaster tools verification to Atahualpa:

Admin->Atahualpa Theme Options->HTML Inserts: Header->Paste your google or ykey (yahoo key) in here.

A typical install of mine uses these CSS inserts in Admin->Add HTML/CSS Inserts:

ul.rMenu li a {width:148px; text-align:center;} /* custom menu centered */
li.cat-item {background-image: url(/wp-content/themes/atahualpa/images/bullets/Filagree_30px.gif);background-repeat: no-repeat; background-position: 0em;} /* custom menu icon */
h4 {margin:0.33em 0 -0.8em;} /* custom H4 */
td#middle a {color:red;} /* red links on page but only content area */
td#middle {border-left:1px ridge #FDF1CE;} /* ? */
div.widget_categories ul li a {margin-left: 19px;} /* using widget for categories as menu item – customized */
div.widget_categories ul li {margin-left: 5px; margin-bottom: 8px;} /* using widget for categories as menu item – customized */
div.widget_categories ul {margin-bottom: 35px;} /* using widget for categories as menu item – customized */
.post img.alignleft {float: left; margin: 0px 10px 5px 0;} /* atahualpa by default drops image down 10 pixels next to text, this overrides the setting in css.php for a 0px top margin site wide for left aligned image  */
.post img.alignright {float: right; margin: 0px 0 5px 10px; } /* same thing as above for right aligned image, this is from the atahualpa forum: http://forum.bytesforall.com/showthread.php?t=4416&highlight=alignleft  */
.post img.aligncenter {display: block;margin: 0px auto;} /* same thing as above for center aligned image  */

Plugins:

I am also using “Thumbnail  for Excerpts” which places the post’s first image as a thumbnail on the category, archive or other pages with post excerpts. If you do not have an image in the blog post, then you can explicitly specify one in the post excerpt.

“WP Events Calendar” doesn’t work for me with Atalhualpa, it does with other themes. It is possible this has been fixed or is a case of incompatibilities because I’ve not re-tried this on a default install.

To set the width of the top horizontal navigation menu and center it and the text menu items:
(in Atahualpa HTML/CSS Inserts)
ul.rMenu li a {width:148px; text-align:center;}

2 alternate ways to do the same thing from the Atahualpa forum:
http://forum.bytesforall.com/showthread.php?t=122

To add a background image to the horizontal menu bar, you have to set the height higher to see it from under the li items.
div#menu1 {background-image: url(/wp-content/themes/atahualpa/images/header/banner_964px.gif);}

To remove the “< Previous Post” “Next Post >” links at the top or the bottom of your post pages:
Admin->Atahualpa Theme Options->Next/Previous Navigation->Location of Next/Previous Page Navigation on MULTI Post Pages->set it to “None”
Admin->Atahualpa Theme Options->Next/Previous Navigation->Location of Next/Previous Page Navigation on SINGLE Post Pages->set it to “None”

To show different category listings and indent them as a navigation menu:
from the Atahualpa forum and the master himself…Flynn : http://forum.bytesforall.com/showthread.php?t=2373

To indent sub items set check the “Show Hierarchy” checkbox inside the Category widget

You can use the default Categories widget multiple times but it will always display all categories.

To display several instances showing different categories, install and use multiple instances of the PHP code widget, drop a few of them into the sidebar, click on their Edit links to give each one a title, such as “Party Themes”, and put this into each one

<ul>
<?php wp_list_categories(‘show_count=1&title_li=&include =3,7,22‘); ?>
</ul>

3,7,22 means display posts of categories with the ID’s 3, 7 and 22.

Put the numbers in ascending order here. Look up the ID’s of categories at WP Admin -> Posts -> Categories -> Edit -> Watch browser status bar at bottom of browser window for “…&cat_ID=XX

Updating Atahualpa:

Atahualpa keeps in’s settings in the WordPress database, so you won’t lose your settings by overwriting your theme file, like doing an auto-update of Atahualpa. However early versions since 3.4.7 kept their settings (theme options) in one single option named bfa_ata4.

In this case (from Atahualpa 3.4.4 to 3.7.3):

  • Install a second version of the theme with it’s version number in the theme folder, this way you can run the new theme next to the old version and test activate the new one.
  • You’ll find that you need to copy your image and remove the default other (rotating) images from the /images/header folder.
  • Also if you have a favicon, copy your custom favicon from the old /images/favicon folder to the new one.
  • If you have lost your excerpt thumbnails and are running the plugin “thumbnail for excerpts”, it won’t work with the new Atahualpa, you’ll need to run another plugin like  “easy add thumbnail” to automatically use the first post image for the excerpt thumbnail. You may also want to do this if you’ve started from an older WordPress and have not or don’t want to specify the excerpt thumbnails for each post manually.

To move Atahualpa from one blog or website to another:

To export from the old website: Atahualpa theme options->Export/Import Settings->Export and download Atahualpa settings file.

To import to the new website:

Atahualpa version 3.6.5 and up: Atahualpa theme options->Export/Import Settings->Atahualpa import settings (paste export file contents into this box)

If your PHP code is now broken:

Since 3.6.5 PHP code cannot be used anymore in Atahualpa HTML/CSS Inserts, this is because PHP file functions cannot be used anymore in themes listed on wordpress.org. At the time I wrote this, Atahualpa is currently the most downloaded free theme from WordPress.org!

27 Comments

  1. startac says:

    do you have a screenshot of what the above modifications would look like? Perhaps include a link to a atahualpa settings file can be used?

    thanks.

  2. Thanks for the tips, they are most helpful. I am hoping you will have some advice on how to disable multiple image uploads in Atahualpa when you upload one image. Especially for a blog, the bandwidth can be significantly increased if every time you upload a picture you get
    image.jpg
    image-150-x-150.jpg
    image-300×200.jpg
    image-500×300.jpg
    image-800×600.jpg

    …and all you really wanted was the first one. Thanks in advance for any advice you can give.

    • GoogleThem says:

      Sharon, this shouldn’t affect your upload bandwidth at all. If you are on dialup, or a limited bandwidth connection, the advice would be to resize or resample the image to the exact dimensions before uploading it. Then in the media uploader, tell it to use the “full size” image, this will be the sharpest, highest quality graphics you can do with WordPress.

      When you upload the file I believe it’s duplicated and resized on the server. Those settings are set in the backend of WordPress in the Settings -> General -> Media. Thumbnail, Medium, and Large size. All this does is direct PHP to set those image size maximums. One of those is for the excerpt when you have a page of posts if your image is set to show. I like that part.

  3. laszlo says:

    Hi,
    thanks for your tips! i’d like the posts/excerpts in multi-posts pages to display in columns(magazine style) instead of the standard “one below the other”. could you help? i don’t know where to start!
    thanks!

    regards

    • GoogleThem says:

      Ahh, laszlo, that’s a tricky one. There’s a new tag for css3 which does the trick beautifully in most browsers…except Internet Explorer (all versions) including IE9! I am hoping IE 10 will have column support provided by css3. A side note, Opera doesn’t support the new tag either. However Firefox and Safari and Chrome and other webkit based based browsers all do with this kind of tag in your stylesheet:

      -moz-column-width: 13em;
      -webkit-column-width: 13em;
      -moz-column-gap: 1em;
      -webkit-column-gap: 1em;

  4. Roling.C says:

    Hi, I use WP 3.1, Theme is atahualpa, use Thumbnail for Excerpts, but it didn’t work at all, any suggestions to solve this? thanks.

  5. Emily says:

    Do you have any coding suggestions to make the navigation menu a bit more “snazzy?” I’m looking for either an actual tabbed-look (rounded on top two corners) or to make the tabs completely seperate of each other like radio buttons.

    Thank you very much!

  6. GoogleThem says:

    Roling.C: I use “Thumbnail for Excerpts” also with Atahualpa and it works, however I’m using WordPress MU for multiuser websites. Perhaps there’s an incompatibility with WordPress 3.1 and newer?

    I’ll report back if I remember while using that “Thumbnail for Excerpts” plugin on stand alone WP websites.

    BTW. There’s also a plugin that allows HTML in your excerpts which is nice because bold and links don’t show correctly in a standard WordPress excerpt.

  7. Shari Weiss says:

    I’m a blogger who’s not so good behind the scenes. Ataualpa was recommended to me and I’d love to use it, but I’m going to need some help . . . beginning with how to get my jpeg into the header.

    I have FileZilla. What exactly do I do next? Anyone have a step by step for me?

    • GoogleThem says:

      Shari,

      For a WordPress self hosted website or blog, you need to know the username and password of your hosting account.

      In FileZilla go to the “Site Manager”, create a “new site”, enter your website address (URL or IP/~username) in the “Host:” field, your username in the “User:” field and your password in the “Password:” field, then click the “Connect” button.

      If all is right, you will be connected to your website, navigate to the right directory (folder) on the server by double clicking on the right side, until you get this deep: /wp-content/themes/atahualpa/images/header/

      Then navigate on the left side in FileZilla (your computer’s files) to your header image you want to place into Atahualpa’s header image and drag it from left to right. Atahualpa will automatically recognize whatever images are in the this directory as the header image.

      Flynn gives all these tips directly in the theme settings, and there’s great support in the Atahualpa forum: http://forum.bytesforall.com/

  8. Clint says:

    Hi,

    I’m trying to put my menu bar over my header image. http://clintschubert.com/ I would like the menu to be in line with the bottom of my picture and right justified. So far I have been able to adjust the menu bar like needed except for getting it to move up “into” the header image. I saw your code above on this website but not sure if that will do what i’m wanting. Can you help?

    • GoogleThem says:

      Clint, have you tried this?

      In Atahualpa Theme Options->Overall Style & Config.:
      %bar1 %page-right %image %bar2

      Or %bar1 %cat-right %image %bar2 if your navigation menu is categories instead of pages.

  9. Tissy Joseph says:

    Hi, Can you please tell me how to reduce the space between the header and content in Atahualpa 3.6.7.
    I am unable to access forum.bytesforall. Getting 403.forbidden error. Don’t know why.

    Thanks in advance and best regards
    Tissy

    • GoogleThem says:

      Tissy, if your Atahualpa header has the extra space above and below the header image, it can be eliminated this way:
      Admin->Appearance->Atahualpa Theme Options->Style & edit HEADER AREA->%bar1 %image %bar2 %pages

      Remove the %bar1 and the %bar2 and the header image will sit closer to the content and higher on the page, leaving more content “above the fold”.

      The header style line in Atahualpa should look like this: %image %pages if you have a page menu, or if you have a blog post menu %image %cats

      If it’s a space issue inside the content container, then this won’t fix it, it would just help a bit.

  10. Jenn says:

    Hi there, I am having problems with the header pics. They have the recommended width (I think it is 1300 pixel), but on different browsers and on different screen sizes, the pictures (I have them rotating) are cut off on the right side.
    What can I do to make them fit to every browser, please?

    • GoogleThem says:

      Jenn, I can’t see your website, but my guess is that 1300 pixels is too wide. Especially with a slideshow.

      Many ways to check what it really is, once you find the width of the slideshow container, resize all of your pictures to be exactly that width (also height if you can), the re-upload them to the slideshow and remove the old ones from it.

      If you really do have a 1300 pixel wide slideshow that’s getting cutoff on the right on different browsers, it’s likely the screen isn’t wide enough to display the whole picture, in that case you’d see the browser window cutting off the entire right side of the WP website.

  11. Angel says:

    Hi there, don ‘t know if I’m too late to the party but I have a qauestion:

    How on earth do you get rid of the grey bullet bars that come up in the widgets. Been trying for days but I can’t figure it out.

    Any help would be appreciated.

    • GoogleThem says:

      Angel: For the sidebar menu, I use this in the Add HTML/CSS Inserts section (to style anything in Atahualpa if there’s no section for it):

      Add HTML/CSS Inserts:
      div.widget ul li {
      /* this is the grey bar bullet on Atahualpa border-left: 3px solid #C9CACC; */
      display: block;
      margin: 2px 0 2px 0;
      padding: 0 0 0 4px;
      }

  12. Vanessa says:

    Hi, is there a way to change font and font color on atahualpa´s pages titles?

    • GoogleThem says:

      Hi Vanessa, Funny, I just changed the title font centering yesterday. Here’s how you can change the page and post title font and font color with Atahualpa:
      Appearance->Atahualpa theme options->Add HTML/CSS inserts->(place this code at the bottom of whatever inserts you already have)
      h2 {font-family:"Times New Roman",Georgia,Serif;}
      h2 {color: red;}

  13. Vanessa says:

    It worked! Thank you very much! Now I can say I have my atahualpa site 100% customized in the way I wanted =)

  14. Susan says:

    This site is most helpful! I was finally able to separate my menu tabs more. I am still trying to improve my menu tabs so they stand out more and are separated more. Perhaps I would like them to look more like file folder tops (if you know what I mean). Any suggestions?

    • GoogleThem says:

      Susan: For rounded corners on the top only to make menu items look like tabs: Atahualpa Theme options->Add HTML/CSS inserts->CSS inserts-> add this line to the bottom of whatever you already have:
      ul.rMenu a {border-radius: 15px 15px 0 0}

      There’s more to it, earlier Firefox browsers need -moz-border-radius, chrome and Mac browsers may need webit-border-radius and all IE browsers up to version 9 don’t support CSS3 based rounded corners. You can do it with images or javascript.

      The method above is the one I prefer because it’s lower bandwidth and more compatible with future browsers.

  15. richard says:

    Hi
    I am looking to add borders to the left and right of my menu items but not to the top and bottom (a bit like this http://www.guardian.co.uk)

    I have tried to locate the CSS to amend and insert but to no avail.

    Any help would be really appreciated.

    Richard

  16. richard says:

    i have managed to work this out:

    }
    div#menu2 ul.rMenu li a {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;

    }

    but any ideas as to how i can control the height of the border to reduce it?

    • GoogleThem says:

      Richard: How about?

      div#menu2 ul.rMenu li a {
      border-top: 0px solid #fff;
      border-bottom: 0px solid #fff;
      border-left: 1px solid #000000;
      border-right: 1px solid #000000;
      }

      Guardian uses only border-right: 1px solid grey from what I see.

Leave a comment