Wordpress style archives - Ditto Support Site

Tutorials » Wordpress style archives

Support

Setup

Copy the following call to where you would like your archive displayed. Make sure you do not use the Ditto ID "wp" anywhere on your site. If you do, replace all instances of wp in this tutorial with another suitable Ditto ID.
[!Reflect?config=`wordpress` &targetID=`2` &getDocuments=`1` &dittoSnippetParameters=`parents:2`&id=`wp`!]
Change the 2 in parents:2 to the container holding your documents
Create a new document with the following content:
<h2>[+wp_month+] [+wp_day+] [+wp_year+]</h2> [!Ditto? &id=`wp` &extenders=`dateFilter` &parents=`2`!]
Make sure you change the 2 in &parents=`2` to the container holding your documents
Change &targetID=`2` in the Reflect call to reference the id of the new document.

Results

The results should look something like the following

Archives

These archives use this CSS

#reflect_example {
    width: 200px;
}
#reflect_example h3 {
    display: none;
}
#reflect_example ul {
    list-style: none;
}
.reflect_archive_list ul {
    list-style: none !imporant; 
    margin-left: 0px; 
    padding-left: 0;
}
.reflect_archive_list ul ul{
    margin-left: 0px; 
} 
.reflect_archive_list ul ul li {
	margin-top: -5px;
	margin-bottom: 0.8em;
}
.reflect_archive_list li a {	
	display:block;
	padding:5px 5px 5px 10px;
	margin:0 0 1px 0;
	background-color:#f6f6f6;
	border-right:10px solid #fff;
	color:#666;
	text-decoration:none;
	border-left:2px solid #ddd;
}
.reflect_archive_list li a:hover {
	background-color:#eee;
	color:#333;
	border-right:10px solid #eee;
}