Mas antes de copiar a lista e achar que algumas classes ou IDs não funcionam como desejado, vale lembrar que algumas classes e IDs são geradas dependendo da estrutura em que seu tema é montado.
Um exemplo disso são os widget, caso você use uma montagem personalizada de widget declarando nela, classes e IDs personalizados, é óbvio que os mostrados nesta lista podem não servir para você.

Para evitar que minha lista seja um verdadeiro fracasso pra você, verifique se está usando a montagem padrão de widget, suas classes e IDs não podem ganhar um nome, pois serão fixos, ao invés disso defina para widget_before IDs e classes com os códigos %1$s para ID e %2$s para classes, desta forma seus widgets terão IDs e classes geradas pelo WordPress e é de onde esta lista se baseia.

Não vou entrar no assunto de como criar um sidebar_widget, pois não é a ideia deste artigo, mas se quiser ver uma forma de montá-los, repare no que já vem nos temas padrões do WordPress, mais especificamente no arquivo function.php do tema default.

Esta lista é gerada através de experiências e pesquisas, portanto, pode não estar perfeito.

Bem, chega de papo e segue a lista completa em formato de css, basta copiar e colar em um arquivo sytle.css e começar a personalizar para seu novo tema.

/*
Theme Name:
Theme URI:
Description:
Author:
Author URI:
Version:
*/

/* – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – -

‘Este cabeçalho é indispensável ao criar um tema.
Edite esta parte com suas informações.

*/ – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – -

/* – INICIO – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - -
CSS reset básico para os navegadores.
- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - -*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,
legend,input,button,textarea,p,blockquote,th,td{
margin:0; padding:0; background: transparent;
}
/* – - TAG FIM – - */

/* INÍCIO – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – -
Imagens do post.
- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – -*/
/*
max-width: Limita o tamanho máximo para as Imagens no post
A Altura recebe auto para manter a proporção correta das imagens
edite o valor 600px como necessário para seu tema. */
/*Todas as imagens do post*/
.size-large, .size-full, .size-medium, .size-thumbnail,
.alignnone, .alignleft, .aligncenter, .alignright, img{
max-width: 600px;
height: auto;
}

/*Imagem sem alinhamento*/
.alignnone{
padding: 5px;
}

/*Imagem alinhada ao centro*/
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

/*Imagem alinhada a direita*/
.alignright {
float: right;
}

/*Imagem alinhada a esquerda*/
.alignleft {
float: left;
}

/*Borda da Imagens do post que possuem um legendas*/
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 6px;
/*Cantos arredondados para navegadores que o Apóiam*/
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

/*Imagem do post que possui uma legenda*/
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}

/*Texto da legenda da imagem do post que possui legenda*/
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
}
/* – - – FIM – - – */

/* INÍCIO – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – -
Galeria de imagem gerada pelo WordPress.
- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – */
/*Imagem da galeria*/
(id da div do post) .gallery dl dt img{}

/*Link em estado normal da imagem da galeria*/
(id da div do post) .gallery dl dt a{
display: block;
border: 2px solid #EFE9D1;
float:left;
margin-left:5px;
}

/*Link em estado hover da imagem da galeria*/
(id da div do post) .gallery dl dt a:hover{
float:left;
border: 2px solid #FF9900;
}

/*Box que carrega cada imagem da galeria*/
(id da div do post) .gallery dd{}
/* – - – FIM – - – */

/* INÍCIO – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – -
Personalizando sidebar dinâmico
- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – */
/* Para usar bullets (imagem ou caracteres especiais) em sua lista.
Primeiro declare para ul li para atingir o máximo de conteúdo possível*/

(id da div do seu sidebar) ul li:before{} /*before coloca o bullet depois do texto*/
(id da div do seu sidebar) ul li:after{} /*after coloca o bullet antes do texto*/

/*Dependendo da montagem do seu tema a lista de tags e a lista dos links não irão receber o bullet
então você pode usar as seguintes declarações para colocar neles também*/
(id da div do seu sidebar) .widget_tag_cloud a:before{}
(id da div do seu sidebar) .widget_tag_cloud a:after{}

(id da div do seu sidebar) .widget_links li:before
(id da div do seu sidebar) .widget_links li:after

/*Para usar caracteres especiais no lugar de imagens você pode usar a declaração content
veja um exemplo a baixo de como usá-la*/
#meu-sidebar ul li:before{content: “\203A 020″;}

/*Para uma lista completa dos caracteres acesse o site:
http://www.fileformat.info/info/unicode/char/a.htm */

/* – - – Início do calendário – - – */

/*Div que representa o Calendário*/
.widget_calendar{}

/*Div que fica dentro do calendário e carrega todos os elementos do calendário*/
#calendar_wrap{}

/*Texto de Mês e ano*/
#wp-calendar caption{}

/*Dias do mês*/
#calendar_wrap td{}

/*Dias da semana*/
#calendar_wrap th{}

/*Blocos em geral*/
#wp-calendar tr td{}

/*Dia Atual*/
#wp-calendar #today{}

/*Link em estado normal para os dias que possuem alguma postagem*/
#wp-calendar a{}

/*Link em estado hover para os dias que possuem alguma postagem*/
#wp-calendar a:hover{}

/* Botão para ir para o mês anterior*/
#wp-calendar #prev{}

/* Botão para ir para o mês seguinte*/
#wp-calendar #next{}

/* Link do botão para ir para o mês seguinte em estado normal*/
#wp-calendar #next a {}

/* Link do botão para ir para o mês anterior*/
#wp-calendar #prev a {}

/* – - – FIM Do Calendário – - – */

/* – - – Início do widget de Arquivos – - – */
.widget_archive{}
.widget_archive ul{}
.widget_archive ul li{}
.widget_archive ul li a{}

/* Lista suspensa de arquivos*/
.widget_archive select{}

/*Cada opção da lista suspensa de arquivos*/
.widget_archive option{}
/* – - – FIM do widget de Arquivos – - – */

/* – - – Início do widget de Categorias – - – */

/* Div que leva o widget das categorias*/
.widget_categories{}

/*Lista de todas as categorias*/
.widget_categories ul{}

/*Lista com cada categoria separada*/
.widget_categories ul li{}

/*Lista de sub-categoriais*/
.widget_categories ul ul.children{}

/*Links da lista de categorias*/
.widget_categories a{}

/*Lista suspensa de categorias*/
.widget_categories select{}

/*Se precisar ser mais declarativo em seu css poderá usar*/
.widget_categories select.postform{}
/*ou*/
.widget_categories select#cat{}

/*Cada opção da lista suspensa de categorias*/
.widget_categories option{}

/*Hierarquia de sub categoriais da lista suspensa */
.widget_categories .level-0{} /*Categoria comum*/
.widget_categories .level-1{} /*Sub-categoria*/
.widget_categories .level-2{} /*Sub-categoria da sub-categoria*/
/*Observação: Este número é infinito enquanto houver sub-categorias*/

/* – - – FIM do widget de Categorias – - – */

/* – - – Início do widget de comentários recentes – - – */

/*Div que leva os comentário recentes*/
.widget_recent_comments{}

/*Lista de todos os comentários*/
#recentcomments{}

/*Lista individual de cada comentário*/
.recentcomments{}

/*Link de cada comentário*/
#recentcomments li a{}
/* – - – FIM do widget de Comentários recentes – - – */

/* – - – Início do widget dos links- – - */
.widget_links{}
.widget_links ul{}
.widget_links ul li{}
.widget_links ul li a{}

/*Se pretende usar bullets sugiro usar uma das seguintes opções, declarando
o máximo possível das ids ou classes anteriores a esta – colocar Bullets na parte de link
pode ser bem chato caso não declare corretamente em seu css*/
(id da div do seu sidebar) .widget_links li:before{}
(id da div do seu sidebar) .widget_links li:after{}

(id da div do seu sidebar) .widget_links li a:before{}
(id da div do seu sidebar) .widget_links li a:after{}
/* – - – FIM do widget dos links- – - */

/* – - – Início do widget Meta- – - */
.widget_meta{}
.widget_meta ul
.widget_meta ul li{}
.widget_meta ul li a{}
/* – - – FIM do widget Meta- – - */

/* – - – Início do widget das Tags – - – */
.widget_tag_cloud{}
.widget_tag_cloud a{}

/*Como padrão as tags são criadas para ficar em uma lista na horizontal.
Para criar uma lista de tags na vertical use a seguinte declaração*/
.widget_tag_cloud a {display:list-item;}

/* – - – FIM do widget das Tags- – - */

/* – - – Início do widget das páginas- – - */
.widget_pages{}
.widget_pages ul{}
.widget_pages ul li{}
.widget_pages ul li a{}

/*Para mostrar a Hierarquia das páginas use*/
.widget_pages ul li{margin-left: 10px;}

/* – - – FIM do widget das páginas- – - */

/* – - – Início do widget Search – - – */
/*Este sidebar depende do seu tema estar ou não usando um arquivo para ele,
se não for usado um arquivo searchform.php em seu tema ele irá utilizar as seguintes classes e ids*/

/*Div que carrega o widget de busca*/
.widget_search{}

/*Id do formulário de busca, praticamente representa o widget_search*/
#searchform{}

/*Texto que aparece acima do campo de digitação*/
.screen-reader-text{}

/*Campo onde digitamos a nossa busca*/
#s

/*Botão do formulário de busca*/
#searchsubmit

/*Se estiver usando um arquivo searchform.php em seu tema
os ids e classes que serão utilizados serão os mesmos declarados neste arquivo*/

/* – - – FIM do widget Search – - – */

/* – - – Início do widget dos posts recentes – - – */
.widget_recent_entries{}
.widget_recent_entries ul{}
.widget_recent_entries ul li{}
.widget_recent_entries ul li a{}
/* – - – FIM do widget dos posts recentes – - – */

/* – - – Início do widget texto – - – */
.widget_text{}
div.textwidget{}
div.textwidget p{}
/* – - – FIM do widget Texto- – - */

/* – - – Início da personalização dos comentários – - – */
/*Parte destas classes já foram testadas, algumas dependem
da formatação do seu arquivo comments e funções extras.
Todas que testei estão comentadas*/

/*Existe também esta mesma lista para trackback, para usar
basta trocar commentlist por trackback*/

/*Lista de comentários*/
ol.commentlist {}

/*Lista dos blocos dos comentários*/
ol.commentlist li {}

/*Nome do autor do comentário*/
ol.commentlist li div.vcard cite.fn {}

/*Nome do autor quando postado com website*/
ol.commentlist li div.vcard cite.fn a.url {}

/*Bloco da imagem do avatar*/
ol.commentlist li div.vcard img.avatar {}

/*Bloco com a mensagem disse*/
ol.commentlist li div.vcard span.says {}

/*Bloco que mostra a data e hora*/
ol.commentlist li div.commentmetadata {}

/*Texto da data e hora e Botão editar*/
ol.commentlist li div.commentmetadata a{}

/*Texto do comentário*/
ol.commentlist li p {}

/*Botão de resposta ao comentário*/
ol.commentlist li div.reply {}

/*Link do botão de resposta ao comentário*/
ol.commentlist li div.reply a {}

/*Resposta a outros comentários já feitos*/
ol.commentlist li ul.children {}

/*Comentário de número impar*/
ol.commentlist li.thread-alt {}

/*Comentário de número par*/
ol.commentlist li.thread-even {}

/* Box do botão de cancelar resposta de comentário*/
#cancel-comment-reply{}

/*Link do Botão de cancelar resposta a comentário*/
#cancel-comment-reply a{}

/*Esses eu não consegui testar em meu tema ainda*/
ol.commentlist li div.vcard img.avatar-32 {}
ol.commentlist li div.vcard img.photo {}
ol.commentlist li div.comment-meta {}
ol.commentlist li div.comment-meta a {}
ol.commentlist li ul {}
ol.commentlist li.alt {}
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment {}
ol.commentlist li div.comment-author {}
ol.commentlist li div.vcard {}
ol.commentlist li.thread-odd {}
ol.commentlist li ul.children li {}
ol.commentlist li ul.children li.alt {}
ol.commentlist li ul.children li.bypostauthor {}
ol.commentlist li ul.children li.byuser {}
ol.commentlist li ul.children li.comment {}
ol.commentlist li ul.children li.comment-author-admin {}
ol.commentlist li ul.children li.depth-2 {}
ol.commentlist li ul.children li.depth-3 {}
ol.commentlist li ul.children li.depth-4 {}
ol.commentlist li ul.children li.depth-5 {}
ol.commentlist li ul.children li.odd {}
ol.commentlist li.even {}
ol.commentlist li.odd {}
ol.commentlist li.parent {}
ol.commentlist li.pingback {}

/* – - – FIM da personalização dos comentários – - – */

/*Essas classes fora achados no site codex e não tive como testar ainda*/
/* – - – Início das Classes usadas em Menus DropDown – - – */
.pagenav ul ul,
.pagenav .current_page_item ul ul,
.pagenav .current_page_ancestor ul ul,
.pagenav .current_page_ancestor .current_page_item ul ul,
.pagenav .current_page_ancestor .current_page_ancestor ul ul {
display: none;
}

.pagenav .current_page_item ul,
.pagenav .current_page_ancestor ul,
.pagenav .current_page_ancestor .current_page_item ul,
.pagenav .current_page_ancestor .current_page_ancestor ul,
.pagenav .current_page_ancestor .current_page_ancestor .current_page_item ul,
.pagenav .current_page_ancestor .current_page_ancestor .current_page_ancestor ul {
display: block;
}

.current_page_item {}
.current_page_parent {}
.current_page_ancestor {}

/* – - – FIM das Classes usadas em Menus DropDown – - – */

/* – - – Sem uma definição específica – - – */

/*Classe do link de leia mais quando um post é dividido em partes*/
.more-link{}

/*Campo para se diPost que está protegido por senha*/
(id da div do post) form{}

/*Botão do formulário de post protegido por senha*/
(id da div do post) input{}

/*Campo de texto de post protegidos por senha*/
(id da div do post) form{}
/* – - – FIM – - – */

Espero que tenham gostado e que esta lista possa ajudar um pouco a economizar tempo na criação do css para seu tema WordPress.

Se encontrarem algum erro ou tiverem algum item a acrescentar a esta lista, entre em contato ou deixe um comentário, por favor.

Custon Header

As novas versões do WordPress e WordPress MU têm vindo com uma funcionalidade que poucos sabem que existe, que nos serve para criar uma opção extra para nossos temas.

Com ela você pode, trocar a imagem do banner, trocar a cor do título e descrição do site ou até mesmo remover os textos e ficar só com a imagem de banner.
Estas opções são extremamente úteis para quando temos uma logomarca e queremos colocá-la em nosso site.

Dentro da pasta do seu WordPress em wp-admin tem um arquivo chamado custom-header.php e é ele que define as funcionalidades extras que vamos implementar, mas para usarmos essas funcionalidades de forma adequada precisamos definir algumas coisas para que seja adequada ao nosso tema.

Estrutura do header.

Primeiramente veja como está o meu arquivo header.php que é onde meu banner está sendo carregado, a parte onde tem o banner, título do site e descrição foram feitas da seguinte forma.

<div id=”banner”>
<h1><a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a></h1>
<h3><?php bloginfo(‘description’); ?></h3>
</div><!–banner–>

Código CSS.

As demais áreas do meu header.php não importam, desde que nenhum outro código esteja influenciando neste parte do site isso é tudo que importa.
Para personalizar esta área usei o seguinte código em css.

#banner h1{
padding-top: 30px;
padding-left: 50px;
}

#banner h1 a{
font-family: “Trajan Pro”,”Lucida Sans Unicode”,Arial,Helvetica,Sans,FreeSans,Jamrul,Garuda,Kalimati;
font-size: 50px;
color: #C40000;
font-weight:bold;
}

#banner h1 a:hover{color: #FF9900;}

#banner h3{
font-family: “Palatino Linotype”, “Times New Roman”, Georgia, Tahoma, “Century Schoolbook L”, Arial, Helvetica;
padding-left: 90px;
color: #C40000;
}

Código do function.

Agora que já vimos como a minha área de banner foi criada, poderemos reparar como o restante do código precisa ser alterado, então segue o código que precisa ser adicionado em seu arquivo function.php.

Vou colocar o código em partes e com comentários para poder explicar, então vá lendo com calma para entender, pois você terá que mudar algumas partes para que funcione em seu tema.
Se quiser copiar o código inteiro você pode, pois as explicações serão colocadas em comentário entre o código e não irá influenciar no seu arquivo function, mas fiquem atentos as partes que precisam ser alteradas para que tudo funcione bem.

Como já mencionei, adicione o código a seguir em seu arquivo function.php, se ele não existir crie um e coloque na pasta do seu tema.

<?php
/*
Definindo o tamanho da sua imagem do banner, isso será usado quando
você upar uma imagem maior ou menor que o tamanho correto, e com
esta opção você fará um corte em sua imagem para que ela se adapte
corretamente ao seu espaço para o banner.
*/
$content_width = 998;

// Definindo Valores padões.
// Cor padrão do texto.
define(‘HEADER_TEXTCOLOR’, ‘C40000′);
// Nome e caminho da imagem padrão do banner.
define(‘HEADER_IMAGE’, ‘%s/images/banner.jpg’);
// Largura da Imagem do banner que será a largura padrão.
define(‘HEADER_IMAGE_WIDTH’, 998);
// Altura do banner que será a altura padrão.
define(‘HEADER_IMAGE_HEIGHT’, 153);

//Esta função define o estilo para o tema.
//Você precisa alterar esses seletores para corresponder ao seu tema.
//Onde está #banner h1 ou #banner h3 coloque o que usou para definir seu banner no seu css.

//Você pode definir um novo nome para sua função diferente deste.
function myst_header_style() {
?>
<style>
#banner{
background: url(<?php header_image() ?>) no-repeat;
width: 998px;
height: 153px;
margin: 0 0;
padding: 0 0;
}

<?php if ( ‘blank’ == get_header_textcolor() ) { ?>
#banner h1, #banner h3 {
display: none;
}

<?php } else { ?>
#banner h1 a, #banner h3 {
color:#<?php header_textcolor() ?>;
}

#banner h3 {
margin-right: 30px;
}

<?php } ?>
</style>
<?php
}

//Painel de administração.
//O seletores #headimg h1 e #headimg #desc são utilizados para criar
//o painel de administração, então não mude estes seletores, as únicas coisas que você
//pode mudar é a formatação que você pode deixar mais parecida com o seu banner original.
//Eu usei a mesma formatação do meu banner para que quando o usuário veja o painel de
//cabeçalho personalizado, veja da mesma forma que está vendo no site, se pretende mudar isso
//tome cuidado de não alterar os códigos php, eles são muito importantes para o bom funcionamento.

//Você pode definir um novo nome para sua função diferente deste.
function myst_admin_header_style() {
?>
<style>
#headimg{
background: url(<?php header_image() ?>) no-repeat;
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
width:<?php echo HEADER_IMAGE_WIDTH; ?>px;
padding:0 0 0 18px;
}

#headimg h1{
padding-top: 50px;
padding-left: 40px;
}

#headimg h1 a{
color:#<?php echo HEADER_TEXTCOLOR ?>;
font-family: “Trajan Pro”,”Lucida Sans Unicode”,Arial,Helvetica,Sans,FreeSans,Jamrul,Garuda,Kalimati;
font-size: 50px;
font-weight:bold;
text-decoration:none;
}

#headimg #desc{
color:#<?php echo HEADER_TEXTCOLOR ?>;
font-family: “Palatino Linotype”, “Times New Roman”, Georgia, Tahoma, “Century Schoolbook L”, Arial, Helvetica;
padding-left: 80px;
font-size: 18px;
}

<!–Defina aqui os mesmos seletores css usados em seu style.css–>
<!–como pode ver usei novamente aqui o #banner–>
<?php if ( ‘blank’ == get_header_textcolor() ) { ?>
#banner h1, #banner h3 {
display: none;
}

#banner h1 a, #banner h3 {
color:#<?php echo HEADER_TEXTCOLOR ?>;
}

<?php } ?>
</style>
<?php
}

//Se definiu novos nomes para as suas funções redefina aqui eles novamente.
//Como você pode reparar os nomes que usei para as minhas funções são repetidos aqui.
add_custom_image_header(‘myst_header_style’, ‘myst_admin_header_style’);
?>

Salve seu arquivo function.php e entre em seu painel de administração, agora você verá na área aparência um novo campo chamado cabeçalho personalizado e poderá testar a nova funcionalidade do seu tema.

Possíveis erros.

1ª Caso dê algum erro repare se usou os seletores css corretamente, não esqueça que os seletores #headimg h1, #headimg h1 a ou #headimg #desc não pode ser alterados e os #banner, #banner h1, #banner h1 a e #bannr h3 devem ser alterados de acordo com o seu tema.
2ª Se mudou o nome das funções, repare se os repetiu na parte add_custom_image_header corretamente.
3ª Vale reparar também se os códigos php estão todos corretos e com seus devidos espaços.
4ª Não deixe espaços no final do seu arquivo function, isso pode causar erros, sempre depois de ?> aperte delete para eliminar possíveis erros deste tipo.

Esses são os erros mais comuns que podem ocorrer.

Vale ressaltar que, dependendo do estilo visual e se forem usar esta funcionalidade em um tema que será distribuído a terceiros, é importante disponibilizar o banner em arquivo psd (photoshop), ou outro formato que a pessoa possa usar para alterar a imagem a seu gosto, ou as pessoas não terrão como usufruir desta funcionalidade de forma adequada, criando um banner que não se adeque ao restante do visual do site.

Espero que tenham gostado da dica e que venham a usar para criar temas cada vez mais funcionais.

Créditos deste artigo:
Algumas das informações foram obtidas do site www.resources4bloggers.com